<script setup>
import { FIX_COL, COM_COL } from "../constant/OperationTableColumns";
import { defineProps, computed, inject, watch } from "vue";
import {
  deleteOperationRecord,
  deleteOperationCompany,
} from "@/apis/operation";
import useSearchParam from "@/hooks/useSearchParam";

const { openToast, cancelToastOpen } = inject("app_toast");
const FILE_BASEURL = import.meta.env.VITE_FILE_API_BASEURL;
const { searchParams } = useSearchParam();

const { dataSource, openModal, updateEditRecord, search, tableLoading } =
  inject("operation_table");

const columns = computed(() =>
  searchParams.value?.work_type < 3 ? FIX_COL : COM_COL
);

const changeData = (record) => {
  console.log("changeData", record);
  updateEditRecord(record);
  openModal(record.formId);
};

const deleteItem = async (id) => {
  openToast("warning", "是否確認刪除該項目?", "body", async () => {
    await cancelToastOpen();
    let res;
    if (searchParams.value?.work_type < 3) {
      res = await deleteOperationRecord(id);
    } else {
      res = await deleteOperationCompany(id);
    }
    if (res.isSuccess) {
      search();
      openToast("success", "刪除成功");
    } else {
      openToast("error", res.msg);
    }
  });
};
</script>

<template>
  <Table :loading="tableLoading" :columns="columns" :dataSource="dataSource">
    <template #bodyCell="{ record, column, index }">
      <template v-if="column.key === 'lorf'">
        <span v-if="record.lorf?.length === 0"></span>
        <template v-else>
          <span class="flex flex-wrap gap-1">
            <a
              v-for="file in record.lorf"
              :href="`${FILE_BASEURL}/upload/operation/${
                file?.save_file_name
              }.${
                file?.ori_file_name.split('.')[
                  file?.ori_file_name.split('.').length - 1
                ]
              }`"
              target="_blank"
              class="mx-1"
            >
              <img
                v-if="
                  file?.ori_file_name.split('.')[
                    file?.ori_file_name.split('.').length - 1
                  ].match(/png|jpg|jpeg|gif|bmp/gi)
                "
                :src="`${FILE_BASEURL}/upload/operation/${
                  file?.save_file_name
                }.${
                  file?.ori_file_name.split('.')[
                    file?.ori_file_name.split('.').length - 1
                  ]
                }`"
                class="w-14 h-14"
              />
              <div 
                v-else-if="
                  file?.ori_file_name.split('.')[
                    file?.ori_file_name.split('.').length - 1
                  ].match(/pdf/g)
                " 
                class="w-14 h-14"
              >
                <font-awesome-icon
                    class="mx-auto my-1 text-5xl text-white"
                    :icon="['fas', 'file-pdf']"
                  />
              </div>
              <div 
                v-else-if="
                  file?.ori_file_name.split('.')[
                    file?.ori_file_name.split('.').length - 1
                  ].match(/csv|xls/g)
                " 
                class="w-14 h-14"
              >
                <font-awesome-icon
                    class="mx-auto my-1 text-5xl text-white"
                    :icon="['fas', 'file-excel']"
                  />
              </div>
              <div 
                v-else-if="
                  file?.ori_file_name.split('.')[
                    file?.ori_file_name.split('.').length - 1
                  ].match(/doc|docx/g)
                " 
                class="w-14 h-14"
              >
                <font-awesome-icon
                    class="mx-auto my-1 text-5xl text-white"
                    :icon="['fas', 'file-word']"
                  />
              </div>
            </a>
          </span>
        </template>
      </template>
      <template v-if="column.key === 'operation'">
        <button
          class="btn btn-sm btn-success text-white mr-2"
          @click.stop.prevent="() => changeData(record)"
        >
          修改
        </button>
        <button
          class="btn btn-sm btn-error text-white"
          @click.stop.prevent="() => deleteItem(record.id)"
        >
          刪除
        </button>
      </template></template
    ></Table
  >
</template>

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