<script setup>
import Table from "@/components/customUI/Table.vue";
import Input from "@/components/customUI/Input.vue";
import { getAccountRoleList, delRole } from "@/apis/account";
import RoleAuthModal from "./RoleAuthModal.vue";
import { ref, onMounted, computed, inject } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const { openToast, cancelToastOpen } = inject("app_toast");
const columns = computed(() => [
  {
    title: t("accountManagement.index"),
    key: "index",
  },
  {
    title: t("accountManagement.role_name"),
    key: "full_name",
  },
  {
    title: t("accountManagement.created_at"),
    key: "created_at",
  },
  {
    title: t("accountManagement.operation"),
    key: "operation",
    width: 400,
  },
]);

const dataSource = ref([]);
const loading = ref(false);

const getRole = async (searchData = {}) => {
  loading.value = true;
  const res = await getAccountRoleList(searchData);
  dataSource.value = res.data;
  loading.value = false;
};

onMounted(() => {
  getRole();
});

const selectedRole = ref({
  full_name: "",
});
const disabled = ref(true);

const view = (record) => {
  selectedRole.value = { ...record, Name: record.full_name };
};

const edit = (record) => {
  disabled.value = false;
  view(record);
};
const add = () => {
  disabled.value = false;
  selectedRole.value = { Name: "" };
  role_auth_modal.showModal();
};

const remove = async (Id) => {
  openToast("warning", t("msg.sure_to_delete"), "body", async () => {
    await cancelToastOpen();
    const res = await delRole(Id);
    if (res.isSuccess) {
      dataSource.value = dataSource.value.filter(
        ({ role_guid }) => role_guid !== Id
      );
      openToast("success", t("msg.delete_success"));
    } else {
      openToast("error", res.msg);
    }
  });
};

const cancelModal = () => {
  selectedRole.value = null;
  disabled.value = true;
  role_auth_modal.close();
};

const searchRole = ref({
  Full_name: "",
});

const onSearch = () => {
  getRole(searchRole.value);
};
</script>

<template>
  <RoleAuthModal
    :selectedRole="selectedRole"
    :cancelModal="cancelModal"
    :disabled="disabled"
    :update="getRole"
  />
  <Table
    :columns="columns"
    :dataSource="dataSource"
    rowKey="role_guid"
    :loading="loading"
  >
    <template #beforeTable>
      <div class="flex items-center mb-8">
        <Input
          :placeholder="t('accountManagement.role_placeholder')"
          name="Full_name"
          :value="searchRole"
        />
        <button class="btn btn-search mx-3" @click.stop.prevent="onSearch">
          <font-awesome-icon :icon="['fas', 'search']" />
          {{ $t("button.search") }}
        </button>
        <button class="btn btn-add ml-10" @click.stop.prevent="add">
          <font-awesome-icon :icon="['fas', 'plus']" /> {{ $t("button.add") }}
        </button>
      </div>
    </template>
    <template #bodyCell="{ record, column, index }">
      <template v-if="column.key === 'index'">{{ index + 1 }}</template>
      <template v-else-if="column.key === 'operation'">
        <button
          class="btn btn-sm btn-info text-white mr-2"
          @click.stop.prevent="() => view(record)"
        >
          {{ $t("button.view") }}
        </button>
        <button
          class="btn btn-sm btn-success text-white mr-2"
          @click.stop.prevent="() => edit(record)"
        >
          {{ $t("button.edit") }}
        </button>
        <button
          class="btn btn-sm btn-error text-white"
          @click.stop.prevent="() => remove(record.role_guid)"
        >
          {{ $t("button.delete") }}
        </button>
      </template>
      <template v-else>
        {{ record[column.key] }}
      </template>
    </template>
  </Table>
</template>

<style lang="css" scoped></style>
