import { defineStore } from "pinia";
import { ref } from "vue";
import type { QTableProps } from "quasar";
import type { workingTimeDataRowType } from '@/modules/09_leave/interface/request/workTime'

export const useWorkTimeStore = defineStore("WorkTimeStore", () => {
    const rows = ref<workingTimeDataRowType[]>([])

    const visibleColumns = ref<string[]>([
        "round",
        "morning",
        "morningEnd",
        "afternoon",
        "afternoonEnd",
        "reason",
        "status",
    ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง

    // หัวตาราง
    const columns = ref<QTableProps["columns"]>([

        {
            name: "round",
            align: "left",
            label: "รอบ",
            sortable: true,
            field: "round",
            headerStyle: "font-size: 14px",
            style: "font-size: 14px",
        },
        {
            name: "morning",
            align: "left",
            label: "รอบเช้า",
            sortable: true,
            field: "morning",
            headerStyle: "font-size: 14px",
            style: "font-size: 14px",
            sort: (a: string, b: string) =>
                a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
        },
        {
            name: "morningEnd",
            align: "left",
            label: "รอบออก",
            sortable: true,
            field: "morningEnd",
            headerStyle: "font-size: 14px",
            style: "font-size: 14px",
            sort: (a: string, b: string) =>
                a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
        },
        {
            name: "afternoon",
            align: "left",
            label: "รอบบ่าย",
            sortable: true,
            field: "afternoon",
            headerStyle: "font-size: 14px",
            style: "font-size: 14px",
            sort: (a: string, b: string) =>
                a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
        },
        {
            name: "afternoonEnd",
            align: "left",
            label: "รอบออก",
            sortable: true,
            field: "afternoonEnd",
            headerStyle: "font-size: 14px",
            style: "font-size: 14px",
            sort: (a: string, b: string) =>
                a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
        },
        {
            name: "reason",
            align: "left",
            label: "คำอธิบาย",
            sortable: true,
            field: "reason",
            headerStyle: "font-size: 14px",
            style: "font-size: 14px",
            sort: (a: string, b: string) =>
                a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
        },
        {
            name: "status",
            align: "center",
            label: "สถานะการใช้งาน",
            sortable: false,
            field: "status",
            headerStyle: "font-size: 14px",
            style: "font-size: 14px",
        },
    ]);
    function fecthList(data: workingTimeDataRowType[]) {
        let datalist: workingTimeDataRowType[] = data.map((e: workingTimeDataRowType) => {
            return {
                round:`${e.morning}-${e.afternoonEnd}`,
                morning: e.morning,
                morningEnd: e.morningEnd,
                afternoon: e.afternoon,
                afternoonEnd: e.afternoonEnd,
                reason: e.reason === '' ? '-':e.reason,
                status: e.status,
            };
        });
        rows.value = datalist;
    }

    return {
        fecthList,
        rows,
        visibleColumns,
        columns
    };
})