<script setup lang="ts">
// @ts-ignore: 忽略
import type { VxeGridProps } from '#/adapter/vxe-table';

import { ref } from 'vue';

// @ts-ignore: 忽略
import { useVbenDrawer, useVbenForm } from '@vben/common-ui';

// @ts-ignore: 忽略
import { useVbenVxeGrid } from '#/adapter/vxe-table';
// @ts-ignore: 忽略
import { handleAdditiveInventory } from '#/api/task';

// @ts-ignore: 忽略
import { defautTableColumns, drawerFormSchema } from './config-data.tsx';

// 定义事件
const emit = defineEmits<{ reload: [] }>();

// 初始化表单配置
const [Form, formApi] = useVbenForm({
  showDefaultActions: false,
  schema: drawerFormSchema(),
});

const getFormValues = () => {
  return formApi.getValues();
};

// 初始化任务参数
const taskParams = ref({
  taskId: '',
  taskName: '',
  taskList: '',
});

// 初始化抽屉组件
const [Drawer, drawerApi] = useVbenDrawer({
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      return;
    }
    try {
      drawerApi.drawerLoading(true);
      const { taskId, taskName, taskList } = drawerApi.getData();
      taskParams.value.taskId = taskId;
      taskParams.value.taskName = taskName;
      taskParams.value.taskList = taskList;
    } catch (error) {
      console.error(error);
    } finally {
      drawerApi.drawerLoading(false);
    }
  },
  onClosed() {
    formApi.resetForm();
  },
  async onConfirm() {
    try {
      this.confirmLoading = true;
      const { valid } = await formApi.validate();
      if (!valid) {
        return;
      }

      const list = basicTableApi.grid.getData();
      const params: any = [];
      list.forEach((item: any) => {
        params.push({
          ...item,
          taskId: taskParams.value.taskId,
        });
      });

      // 这里可以调用API提交数据
      await handleAdditiveInventory(params);

      emit('reload');
      drawerApi.close();
    } catch (error) {
      console.error(error);
    } finally {
      this.confirmLoading = false;
    }
  },
});

// 初始化表格配置
const gridOptions: VxeGridProps = {
  size: 'medium',
  toolbarConfig: {
    custom: false,
    refresh: false,
    zoom: false,
  },
  pagerConfig: {
    enabled: false,
  },
  proxyConfig: {
    ajax: {
      query: async () => {
        // 这里可以调用API获取表格数据
        // const list = taskParams.value.taskList;
        // if (list.)
        return {
          items: taskParams.value.taskList, // 初始数据为空
        };
      },
    },
  },
  columns: defautTableColumns(getFormValues),
  editConfig: {
    mode: 'cell',
    trigger: 'click',
  },
};

// 初始化表格组件
const [BasicTable, basicTableApi] = useVbenVxeGrid({
  gridOptions,
});
</script>

<template>
  <Drawer :title="taskParams.taskName">
    <Form>
      <!-- 添加剂库存表格插槽 -->
      <template #description>
        <div class="flex items-center">
          <span class="text-sm text-gray-500">
            统计添加剂使用数量，每月1号/16号完成添加剂库存管理表（登记日期选择1号或16号），1号填写上月16-31日添加剂用量，16号填写本月1-15日添加剂用量，油站根据库存量合理申请采购添加剂，添加剂采购申请日期为每月1-25日，26至30日为结算期不接受下单采购。
          </span>
        </div>
      </template>
      <template #additiveInventoryTable>
        <BasicTable table-title="" class="w-full" />
      </template>
    </Form>
  </Drawer>
</template>

<style scoped lang="scss">
:deep(.el-input-number) {
  width: 100%;
}
</style>
