<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 { handleTurnInRateSurvey } 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 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 values = await formApi.getValues();
      // const params = {
      //   id: taskParams.value.taskId,
      //   ...values,
      // };

      const list = basicTableApi.grid.getData();
      const params: any = [];
      list.forEach((item: any) => {
        params.push({
          ...item,
          surveyStartTime: values.surveyStartTime,
          surveyEndTime: values.surveyEndTime,
        });
      });

      // 这里可以调用API提交数据
      await handleTurnInRateSurvey(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获取表格数据
        return {
          items: taskParams.value.taskList, // 初始数据为空
        };
      },
    },
  },
  columns: defautTableColumns,
  editConfig: {
    mode: 'cell',
    trigger: 'click',
  },
};

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

// 确认事件
const confirmEvent = (row: any) => {
  // 处理确认事件
};
</script>

<template>
  <Drawer :title="taskParams.taskName">
    <Form>
      <!-- 拐入率调查表格插槽 -->
      <template #entranceSurveyTable>
        <BasicTable table-title="" class="w-full">
          <template #action="{ row }">
            <ElSpace>
              <ElPopconfirm
                :title="$t('common.confirm-delete')"
                @confirm="confirmEvent(row)"
              >
                <template #reference>
                  <ElButton
                    size="small"
                    type="danger"
                    plain
                    v-access:code="['system:dict:remove']"
                  >
                    删除
                  </ElButton>
                </template>
              </ElPopconfirm>
            </ElSpace>
          </template>
        </BasicTable>
      </template>
    </Form>
  </Drawer>
</template>

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