<script setup>
import girlUsingMobile from "@images/pages/girl-using-mobile.png";

const isRoleDialogVisible = ref(false);
const roleDetail = ref();
const roleId = ref();
const test = ref(0);
const isAddRoleDialogVisible = ref(false);

const editPermission = (id, value) => {
  isRoleDialogVisible.value = true;
  roleDetail.value = value;
  roleId.value = id;
};

const search = ref("");
const itemsPerPage = ref(10);
const page = ref(1);
const sortBy = ref(null);
const orderBy = ref(null);
const updateSignal = ref(0);
const rolesData = ref([]);

async function fetchData() {
  const res = await $api("/account-panel/roles", {
    method: "get",
    headers: {
      "Content-Type": "application/json",
    },
  });
  rolesData.value = res;
}
fetchData();
</script>

<template>
  <VRow>
    <!-- 👉 Roles -->
    <VCol v-for="item in rolesData" :key="item.id" cols="12" sm="6" lg="4">
      <VCard>
        <VCardText class="d-flex align-center pb-1">
          <span>總計 {{ item.users_count }} 個用戶</span>
          <VSpacer />
        </VCardText>

        <VCardText class="pb-5">
          <h4 class="text-h4">{{ item.name }}</h4>
          <span>{{ item.alias }}</span>
          <div
            v-if="$ability.can('create', 'admin')"
            class="d-flex align-center"
          >
            <a
              href="javascript:void(0)"
              @click="editPermission(item.id, item.details)"
            >
              編輯角色
            </a>

            <VSpacer />
            <VBtn icon color="disabled" variant="text" size="x-small">
              <VIcon size="24" icon="tabler-copy" />
            </VBtn>
          </div>
        </VCardText>
      </VCard>
    </VCol>

    <!-- 👉 Add New Role -->
    <VCol cols="12" sm="6" lg="4">
      <VCard
        v-if="$ability.can('create', 'admin')"
        class="h-100"
        :ripple="false"
      >
        <VRow no-gutters class="h-100">
          <VCol
            cols="5"
            class="d-flex flex-column justify-end align-center mt-5"
          >
            <img width="85" :src="girlUsingMobile" />
          </VCol>

          <VCol cols="7">
            <VCardText
              class="d-flex flex-column align-end justify-end gap-2 h-100"
            >
              <VBtn @click="editPermission(0, [])"> 新增角色 </VBtn>
              <span class="text-end">如果角色不存在，請新增角色</span>
            </VCardText>
          </VCol>
        </VRow>
      </VCard>
      <AddEditRoleDialog
        v-model:is-dialog-visible="isAddRoleDialogVisible"
        v-model:role-permissions="roleDetail"
        @role-updated="fetchData"
      />
    </VCol>
  </VRow>

  <AddEditRoleDialog
    v-model:is-dialog-visible="isRoleDialogVisible"
    v-model:role-permissions="roleDetail"
    v-model:role-id="roleId"
    @role-updated="fetchData"
  />
</template>
