import { defineStore } from "pinia";
import { ref } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import type {
  DataResponseList,
  MainList,
} from "@/modules/12_evaluatePersonal/interface/index/director";
import type { QTableProps } from "quasar";

// store ระบบวินัย >> ข้อมูลพื้นฐาน >> กรรมการ
export const useEvaluateDirectorDataStore = defineStore(
  "evaluateDirector",
  () => {
    const mixin = useCounterMixin();
    const { date2Thai } = mixin;
    //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
    const visibleColumns = ref<string[]>([
      "no",
      "name",
      "position",
      "email",
      "phone",
    ]);

    // หัวตาราง
    const columns = ref<QTableProps["columns"]>([
      {
        name: "no",
        align: "left",
        label: "ลำดับ",
        sortable: false,
        field: "no",
        headerStyle: "font-size: 14px",
        style: "font-size: 14px",
      },
      {
        name: "name",
        align: "left",
        label: "ชื่อ-นามสกุล",
        sortable: true,
        field: "name",
        headerStyle: "font-size: 14px",
        style: "font-size: 14px",
      },
      {
        name: "position",
        align: "left",
        label: "ตำแหน่ง",
        sortable: true,
        field: "position",
        headerStyle: "font-size: 14px",
        style: "font-size: 14px",
      },
      {
        name: "email",
        align: "left",
        label: "อีเมล",
        sortable: true,
        field: "email",
        headerStyle: "font-size: 14px",
        style: "font-size: 14px",
      },
      {
        name: "phone",
        align: "left",
        label: "เบอร์โทรศัพท์",
        sortable: true,
        field: "phone",
        headerStyle: "font-size: 14px",
        style: "font-size: 14px",
      },
    ]);

    // ข้อมูลในตาราง
    const rows = ref<MainList[]>([]);
    const rowsData = ref<MainList[]>([]);
    function fetchData(data: DataResponseList[]) {
      const dataList: MainList[] = data.map((item: DataResponseList) => ({
        id: item.id,
        name: `${item.prefix}${item.firstName} ${item.lastName}`,
        prefix: item.prefix,
        firstName: item.firstName,
        lastName: item.lastName,
        phone: item.phone ? item.phone : "-",
        email: item.email ? item.email : "-",
        position: item.position ? item.position : "-",

        createdFullName: item.createdFullName,
        lastUpdateFullName: item.lastUpdateFullName,
        createdUserId: item.createdUserId,
        lastUpdateUserId: item.lastUpdateUserId,
        createdAt: item.createdAt,
        lastUpdatedAt: item.lastUpdatedAt,
      }));
      rows.value = dataList;
      rowsData.value = dataList;
    }

    return {
      visibleColumns,
      columns,
      rows,
      rowsData,
      fetchData,
    };
  }
);