<script setup>
import Table from "@/components/customUI/Table.vue";
import AccountModal from "./AccountModal.vue";
import {
  getAccountUserList,
  getAccountOneUser,
  delAccount,
} from "@/apis/account";
import { onMounted, ref, inject } from "vue";
import AccountPasswordModal from "./AccountPasswordModal.vue";

const { openToast, cancelToastOpen } = inject("app_toast");

const columns = [
  {
    title: "編號",
    key: "index",
  },
  {
    title: "姓名",
    key: "full_name",
    filter: true,
  },
  {
    title: "帳號",
    key: "account",
  },
  {
    title: "角色",
    key: "role_full_name",
  },
  {
    title: "email",
    key: "email",
  },
  {
    title: "手機",
    key: "phone",
  },
  {
    title: "建立時間",
    key: "created_at",
  },
  {
    title: "操作",
    key: "operation",
  },
];

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

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

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

const onSearch = () => {
  getDataSource();
};
const onReset = () => {
  searchData.value = {
    Full_name: "",
    Role_full_name: "",
  };
  getDataSource();
};

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

const formState = ref({
  Id: "",
  Account: "",
  Name: "",
  Email: "",
  Phone: "",
  RoleId: "",
  Password: "",
});

const openModal = (record) => {
  if (record) {
    formState.value = record;
  } else {
    resetModalForm();
  }
  account_user_modal.showModal();
};

const openChangeModal = ({ Id, Name }) => {
  formState.value = {
    Id,
    Name,
  };
  account_user_password_modal.showModal();
};

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

const resetModalForm = () => {
  formState.value = {
    Id: "",
    Account: "",
    Name: "",
    Email: "",
    Phone: "",
    RoleId: "",
    Password: "",
  };
};

const removeAccount = async (id) => {
  openToast("warning", "是否確認刪除該項目?", "body", async () => {
    await cancelToastOpen();
    const res = await delAccount(id);
    if (res.isSuccess) {
      getDataSource();
      openToast("success", "刪除成功");
    } else {
      openToast("error", res.msg);
    }
  });
};
</script>

<template>
  <AccountModal
    :formState="formState"
    :reset="resetModalForm"
    :getData="getDataSource"
  />
  <AccountPasswordModal :reset="resetModalForm" :account="formState" />
  <Table :columns="columns" :dataSource="dataSource" :loading="loading">
    <template #beforeTable>
      <button
        class="btn btn-success mr-3"
        @click.stop.prevent="() => openModal(null)"
      >
        <font-awesome-icon :icon="['fas', 'plus']" />新增
      </button>
      <div class="flex items-center mb-8">
        <Input
          placeholder="請輸入使用者名稱"
          name="Full_name"
          :value="searchData"
          class="mr-3"
        />
        <Input
          placeholder="請輸入角色名稱"
          name="Role_full_name"
          :value="searchData"
        />
        <button
          class="btn btn-outline-success ml-5"
          @click.stop.prevent="onSearch"
        >
          搜尋
        </button>
        <button
          class="btn btn-outline-success mx-4"
          @click.stop.prevent="onReset"
        >
          重置
        </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)"
        >
          修改
        </button>
        <button
          class="btn btn-sm btn-info text-white mr-2"
          @click.stop.prevent="
            () =>
              openChangeModal({
                Id: record.userinfo_guid,
                Name: record.full_name,
              })
          "
        >
          變更密碼
        </button>
        <button
          class="btn btn-sm btn-error text-white"
          @click.stop.prevent="() => removeAccount(record.userinfo_guid)"
        >
          刪除
        </button>
      </template>
      <template v-else>
        {{ record[column.key] }}
      </template>
    </template>
  </Table>
</template>

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