<template>
  <div v-if="columns?.length">
    <DynamicTable row-key="id"
      header-title="原材料库存"
      title-tooltip=""
      :data-request="Api.materialsInventory.materialsInventoryList"
      :columns="columns"
      bordered
      size="small"
      :scroll="{ x: 1920 }">
      <template #toolbar>
        <a-button type="primary"
          :disabled="!$auth('app:materials_inventory:export')"
          @click="exportMI()">
          导出原材料盘点表
        </a-button></template>
    </DynamicTable>
  </div>
</template>

<script setup
  lang="tsx">
  import { useTable } from '@/components/core/dynamic-table';
  import { baseColumns, type TableColumnItem, type TableListItem } from './columns';
  import Api from '@/api/';
  import { onMounted, ref, unref } from 'vue';
  import { useFormModal } from '@/hooks/useModal';
  import { exportSchemas } from './exportSchema';
  import dayjs from 'dayjs';
  import fileDownload from 'js-file-download';
  import { message } from 'ant-design-vue';

  defineOptions({
    name: 'MaterialsInventory',
  });
  const [DynamicTable, dynamicTableInstance] = useTable();
  const [showExportModal] = useFormModal();
  let columns = ref<TableColumnItem[]>();
  onMounted(() => {
    columns.value = [
      ...baseColumns,

      // {
      //   title: '操作',
      //   maxWidth: 60,
      //   width: 60,
      //   minWidth: 60,
      //   dataIndex: 'ACTION',
      //   hideInSearch: true,
      //   actions: ({ record }) => [
      //     {
      //       icon: 'ant-design:edit-outlined',
      //       tooltip: '编辑',
      //       auth: {
      //         perm: 'app:materials_inventory:update',
      //         effect: 'disable',
      //       },
      //       onClick: () => openEditModal(record),
      //     },
      //     // {
      //     //   icon: 'ant-design:delete-outlined',
      //     //   color: 'red',
      //     //   tooltip: '删除此记录',
      //     //   auth: 'app:materials_inventory:delete',
      //     //   popConfirm: {
      //     //     title: '你确定要删除吗？',
      //     //     placement: 'left',
      //     //     onConfirm: () => delRowConfirm(record.id),
      //     //   },
      //     // },
      //   ],
      // },
    ];
  });
  const exportMI = async () => {
    const { time } = unref<{ time: string; projectId: number }>(
      dynamicTableInstance?.queryFormRef?.formModel as { time: string; projectId: number },
    );

    const [formRef] = await showExportModal({
      modalProps: {
        title: `导出条件选择`,
        width: '50%',
        okText: '导出',
        onFinish: async (values) => {
          const response = await Api.materialsInventory.materialsInventoryExport(values);
          const { time } = values;
          fileDownload(response, `${dayjs(time).format('YYYY.MM.盘点表')}.xls`);
        },
      },
      formProps: {
        labelWidth: 100,
        schemas: exportSchemas,
      },
    });

    // auto fill export time fields
    if (time) {
      formRef?.setFieldsValue({
        time,
      });
    }
  };

  /**
   * @description 打开新增/编辑弹窗
   */
  const openEditModal = async (record: Partial<TableListItem>) => {
    message.warning(
      <div>
        暂不支持编辑功能,等待后期需求确认
        <div>库存数量是由出入库记录自动计算得出的，库存单价为入库的单价</div>
      </div>
    );
    // const [formRef] = await showModal({
    //   modalProps: {
    //     title: `${record.id ? '编辑' : '新增'}盘点记录`,
    //     width: '50%',
    //     onFinish: async (values) => {
    //       const params = {
    //         ...values,
    //         signingDate: formatToDate(values.signingDate),
    //         deliveryDeadline: formatToDate(values.deliveryDeadline),
    //       };
    //       if (record.id) {
    //         await Api.contract.contractUpdate({ id: record.id }, params);
    //       } else {
    //         await Api.contract.contractCreate(params);
    //       }
    //       dynamicTableInstance?.reload();
    //     },
    //   },
    //   formProps: {
    //     labelWidth: 100,
    //     schemas: contractSchemas(contractTypes.value),
    //   },
    // });
    // // 如果是编辑的话，需要获取角色详情
    // if (record.id) {
    //   const info = await Api.contract.contractInfo({ id: record.id });
    //   formRef?.setFieldsValue({
    //     ...info,
    //   });
    // }
  };
  const delRowConfirm = async (record) => {
    await Api.contract.contractDelete({ id: record });
    dynamicTableInstance?.reload();
  };
</script>

<style lang="less"
  scoped></style>
import dayjs from 'dayjs'; import fileDownload from 'js-file-download'; import type { TableQueryItem
} from '../in-out/columns'; import { exportSchemas } from '../in-out/exportSchema'; import dayjs
from 'dayjs'; import fileDownload from 'js-file-download'; import type { TableQueryItem } from
'../in-out/columns'; import { exportSchemas } from './exportSchema'; import dayjs from 'dayjs';
import fileDownload from 'js-file-download'; import type { TableQueryItem } from
'../in-out/columns'; import { exportSchemas } from './exportSchema'; import dayjs from 'dayjs';
import fileDownload from 'js-file-download'; import type { TableQueryItem } from
'../in-out/columns';
