<script setup>
import Table from "@/components/customUI/Table.vue";
// import AccountModal from "./AccountModal.vue";
import {
  getUserList
} from "@/apis/headquarters";
import { onMounted, ref, inject, computed } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const { openToast, cancelToastOpen } = inject("app_toast");

const dataSource = ref([]);
const loading = ref(false);
const searchData = ref({
  Full_name: "",
  Role_full_name: "",
});
const columns = computed(() => [
  {
    title: t("accountManagement.index"),
    key: "index",
  },
  {
    title: t("accountManagement.name"),
    key: "full_name",
    filter: true,
  },
  {
    title: t("accountManagement.account"),
    key: "account",
  },
  {
    title: t("accountManagement.role"),
    key: "role_full_name",
  },
  {
    title: t("accountManagement.email"),
    key: "email",
  },
  {
    title: t("accountManagement.phone"),
    key: "phone",
  },
  {
    title: t("accountManagement.created_at"),
    key: "created_at",
  },
  {
    title: t("accountManagement.operation"),
    key: "operation",
  },
]);

const getDataSource = async () => {
  loading.value = true;
  const res = await getUserList();
  dataSource.value = res.data?.users || [];
  loading.value = false;
};

const onSearch = () => {
  getDataSource();
};

const onReset = () => {
  getDataSource();
};

const getUser = async (id) => {
  // const res = await getAccountOneUser(id);
  openModal(res.data);
};

onMounted(() => {
  getDataSource();
});
</script>

<template>
  <h1 class="text-2xl font-extrabold mb-2">
    {{ $t("accountManagement.account_title") }}
  </h1>
  <Table :columns="columns" :dataSource="dataSource" :loading="loading">
    <template #beforeTable>
      <div class="flex items-center mb-8">
        <Input
          :placeholder="t('accountManagement.name_placeholder')"
          name="Full_name"
          :value="searchData"
          class="mr-3 w-96"
        />
        <Input
          :placeholder="t('accountManagement.role_placeholder')"
          name="Role_full_name"
          :value="searchData"
        />
        <button class="btn btn-search ml-5" @click.stop.prevent="onSearch">
          <font-awesome-icon :icon="['fas', 'search']" />
          {{ $t("button.search") }}
        </button>
        <button class="btn btn-neutral mx-4" @click.stop.prevent="onReset">
          {{ $t("button.reset") }}
        </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-success text-white mr-2"
          @click.stop.prevent="() => getUser(record.userinfo_guid)"
        >
          {{ $t("button.edit") }}
        </button>
      </template>
      <template v-else>
        {{ record[column.key] }}
      </template>
    </template>
  </Table>
</template>

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