<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 { handleOperatingPlan } from '#/api/task';

import {
  defaultExternalFactors,
  defaultInternalFactors,
  defaultPerformancePlanData,
  drawerFormSchema,
  externalFactorsColumns,
  internalFactorsColumns,
  nonOilSalesPlanSchema,
  oilSalesPlanSchema,
  performancePlanColumns,
  // @ts-ignore: 忽略
} from './config-data';

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

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

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

// 初始化内在因素表格数据
const internalFactorsData = ref(defaultInternalFactors);
// 初始化外在因素表格数据
const externalFactorsData = ref(defaultExternalFactors);

// 初始化抽屉组件
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;

      // 重置表格数据
      internalFactorsData.value = [...defaultInternalFactors];
      externalFactorsData.value = [...defaultExternalFactors];
    } catch (error) {
      console.error(error);
    } finally {
      drawerApi.drawerLoading(false);
    }
  },
  onClosed() {
    formApi.resetForm();
    oilSalesPlanFormApi.resetForm();
    nonOilSalesPlanFormApi.resetForm();
    // 重置表格数据
    internalFactorsData.value = [...defaultInternalFactors];
    externalFactorsData.value = [...defaultExternalFactors];
    oilPerformancePlanData.value = [...defaultPerformancePlanData];
    nonOilPerformancePlanData.value = [...defaultPerformancePlanData];
  },
  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,
        internalFactors: internalFactorsApi.grid.getData(),
        externalFactors: externalFactorsApi.grid.getData(),
      };

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

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

// 初始化内在因素表格配置
const internalFactorsGridOptions: VxeGridProps = {
  size: 'medium',
  toolbarConfig: {
    custom: false,
    refresh: false,
    zoom: false,
  },
  pagerConfig: {
    enabled: false,
  },
  proxyConfig: {
    ajax: {
      query: async () => {
        // 这里可以调用API获取表格数据
        return {
          items: internalFactorsData.value,
        };
      },
    },
  },
  columns: internalFactorsColumns,
  editConfig: {
    mode: 'cell',
    trigger: 'click',
  },
};

// 初始化外在因素表格配置
const externalFactorsGridOptions: VxeGridProps = {
  size: 'medium',
  toolbarConfig: {
    custom: false,
    refresh: false,
    zoom: false,
  },
  pagerConfig: {
    enabled: false,
  },
  proxyConfig: {
    ajax: {
      query: async () => {
        // 这里可以调用API获取表格数据
        return {
          items: externalFactorsData.value,
        };
      },
    },
  },
  columns: externalFactorsColumns,
  editConfig: {
    mode: 'cell',
    trigger: 'click',
  },
};

// 初始化内在因素表格组件
const [InternalFactorsTable, internalFactorsApi] = useVbenVxeGrid({
  gridOptions: internalFactorsGridOptions,
});

// 初始化外在因素表格组件
const [ExternalFactorsTable, externalFactorsApi] = useVbenVxeGrid({
  gridOptions: externalFactorsGridOptions,
});

// 初始化油品销量提升计划表单
const [OilSalesPlanForm, oilSalesPlanFormApi] = useVbenForm({
  showDefaultActions: false,
  schema: oilSalesPlanSchema(),
});

// 初始化非油品销量提升计划表单
const [NonOilSalesPlanForm, nonOilSalesPlanFormApi] = useVbenForm({
  showDefaultActions: false,
  schema: nonOilSalesPlanSchema(),
});

// 初始化油品销量提升表格数据
const oilPerformancePlanData = ref(defaultPerformancePlanData);
// 初始化非油品销量提升表格数据
const nonOilPerformancePlanData = ref(defaultPerformancePlanData);

// 初始化油品销量提升表格配置
const oilPerformancePlanGridOptions: VxeGridProps = {
  size: 'medium',
  toolbarConfig: {
    custom: false,
    refresh: false,
    zoom: false,
  },
  pagerConfig: {
    enabled: false,
  },
  proxyConfig: {
    ajax: {
      query: async () => {
        return {
          items: oilPerformancePlanData.value,
        };
      },
    },
  },
  columns: performancePlanColumns,
  editConfig: {
    mode: 'cell',
    trigger: 'click',
  },
};

// 初始化非油品销量提升表格配置
const nonOilPerformancePlanGridOptions: VxeGridProps = {
  size: 'medium',
  toolbarConfig: {
    custom: false,
    refresh: false,
    zoom: false,
  },
  pagerConfig: {
    enabled: false,
  },
  proxyConfig: {
    ajax: {
      query: async () => {
        return {
          items: nonOilPerformancePlanData.value,
        };
      },
    },
  },
  columns: performancePlanColumns,
  editConfig: {
    mode: 'cell',
    trigger: 'click',
  },
};

// 初始化油品销量提升表格组件
const [OilPerformancePlanTable, oilPerformancePlanApi] = useVbenVxeGrid({
  gridOptions: oilPerformancePlanGridOptions,
});

// 初始化非油品销量提升表格组件
const [NonOilPerformancePlanTable, nonOilPerformancePlanApi] = useVbenVxeGrid({
  gridOptions: nonOilPerformancePlanGridOptions,
});

// 初始化激活标签页
const activeTab = ref('swot');

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

<template>
  <Drawer :title="taskParams.taskName">
    <el-tabs v-model="activeTab" class="w-full">
      <!-- SWOT分析标签页 -->
      <el-tab-pane label="SWOT分析" name="swot">
        <Form>
          <!-- 内在因素评估表格插槽 -->
          <template #internalFactorsTable>
            <InternalFactorsTable table-title="" class="w-full" />
          </template>

          <!-- 外在因素评估表格插槽 -->
          <template #externalFactorsTable>
            <ExternalFactorsTable table-title="" class="w-full" />
          </template>
        </Form>
      </el-tab-pane>

      <!-- 业绩提升计划标签页 -->
      <el-tab-pane label="业绩提升计划" name="performancePlan">
        <!-- 油品销量提升计划 -->
        <OilSalesPlanForm>
          <!-- 油品销量提升行动计划表插槽 -->
          <template #oilPerformancePlanTable>
            <OilPerformancePlanTable table-title="" class="w-full" />
          </template>
        </OilSalesPlanForm>

        <!-- 非油品销量提升计划 -->
        <NonOilSalesPlanForm>
          <!-- 非油品销量提升行动计划表插槽 -->
          <template #nonOilPerformancePlanTable>
            <NonOilPerformancePlanTable table-title="" class="w-full" />
          </template>
        </NonOilSalesPlanForm>
      </el-tab-pane>

      <!-- 上次SWOT分析标签页 -->
      <el-tab-pane label="上次SWOT分析" name="lastSwot">
        <!-- 上次SWOT分析内容 -->
      </el-tab-pane>

      <!-- 上次业绩提升计划标签页 -->
      <el-tab-pane label="上次业绩提升计划" name="lastPerformancePlan">
        <!-- 上次业绩提升计划内容 -->
      </el-tab-pane>
    </el-tabs>
  </Drawer>
</template>

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