<template>
  <div class="mx-2">
  <a @click="change()">
    <SvgIcon v-bind="{name: check? 'checked.svg' : 'uncheck.svg', type: check? 'blue' : 'gray', size: 22}"></SvgIcon>
  </a>
    <a class="ml-5" @click="userRights" v-if="api && check">
      <SvgIcon v-bind="{name: 'list.svg', type: check? 'blue' : 'gray', size: 20}"></SvgIcon>
    </a>
  </div>
</template>
<script setup>
const { $insertapi, $deleteapi, $store } = useNuxtApp()
const emit = defineEmits(["clickevent"])
var props = defineProps({
  appid: Number,
  row: Object,
  api: String,
  setting: String
})
var check = ref(false)
var current
if(props.row) {
  props.row.apps.map(v=>{
    if(v.userapps__apps==props.appid) {
      check.value = true
      current = v
    }
  })
}
async function change() {
  if(check.value) {
    await $deleteapi('userapps', current.userapps__id)
  } else {
    let obj = {user: props.row.id, apps: props.appid}
    await $insertapi('userapps', obj)
  }
  check.value = !check.value
}
function userRights() {
  emit('clickevent', {name: 'dataevent', data: {modal: {title: $store.lang==='en'? 'User rights' :  'Phân quyền', 
  height: '500px', width: '500px', component: 'menu/MenuRights', vbind: {row: props.row, api: props.api, setting: props.setting}}}})
}
</script>