import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';

import { useUserStore } from '@vben/stores';

import { getMultipleImageUploadConfig } from '#/components/upload';
import { getDictOptions } from '#/utils/dict';

const userStore = useUserStore();

// 事件报告表格配置
export const tableColumns: VxeGridProps['columns'] = [
  {
    title: '操作',
    minWidth: 150,
    align: 'center',
    fixed: 'left',
    slots: { default: 'action' },
  },
  { title: '油站', field: 'stationName', minWidth: 150, align: 'center' },
  { title: '事件名称', field: 'eventName', minWidth: 180, align: 'center' },
  {
    title: '事件等级',
    field: 'eventLevel',
    minWidth: 120,
    align: 'center',
    formatter: (params: { cellValue: number }) => {
      const levelMap = {
        0: '轻微',
        1: '中等',
        2: '重大',
      };
      return levelMap[params.cellValue] || params.cellValue;
    },
  },
  { title: '事件类型', field: 'eventType', minWidth: 120, align: 'center' },
  {
    title: '发生时间',
    field: 'occurrenceTime',
    minWidth: 160,
    align: 'center',
  },
  {
    title: '发生地点',
    field: 'occurrenceLocation',
    minWidth: 160,
    align: 'center',
  },
  {
    title: '政府机构参与',
    field: 'governmentMediaInvolvement',
    minWidth: 120,
    align: 'center',
    formatter: (params: { cellValue: number }) => {
      return params.cellValue === 1 ? '是' : '否';
    },
  },
  { title: '车辆信息', field: 'vehicleInfo', minWidth: 150, align: 'center' },
  {
    title: '天气情况',
    field: 'weatherCondition',
    minWidth: 120,
    align: 'center',
  },
  { title: '单位/部门', field: 'department', minWidth: 120, align: 'center' },
  {
    title: '当事员工',
    field: 'involvedEmployee',
    minWidth: 120,
    align: 'center',
  },
  { title: '性别', field: 'gender', minWidth: 80, align: 'center' },
  { title: '入职时间', field: 'hireDate', minWidth: 160, align: 'center' },
  { title: '岗位', field: 'post', minWidth: 100, align: 'center' },
  {
    title: '营业主管/当班经理',
    field: 'manager',
    minWidth: 150,
    align: 'center',
  },
  {
    title: '事件简述及后果',
    field: 'eventDescription',
    minWidth: 200,
    align: 'center',
  },
  { title: '事件原因', field: 'eventCause', minWidth: 150, align: 'center' },
  {
    title: '已采取措施',
    field: 'measuresTaken',
    minWidth: 150,
    align: 'center',
  },
  {
    title: '建议改善措施',
    field: 'improvementSuggestions',
    minWidth: 150,
    align: 'center',
  },
  {
    title: '环节',
    field: 'processStage',
    minWidth: 120,
    align: 'center',
    formatter: (params: { cellValue: number }) => {
      const stageMap = {
        0: '事件填报',
        1: '事件审查',
        2: '已完成',
        3: '事件裁定',
      };
      return stageMap[params.cellValue] || params.cellValue;
    },
  },
  { title: '扣分', field: 'deductionScore', minWidth: 100, align: 'center' },
  { title: '备注', field: 'remarks', minWidth: 150, align: 'center' },
];
/**
 * API返回数据映射到表格显示
 */
export function mapApiToView(data: any[]) {
  return data;
}

// 抽屉表单schema
export const drawerFormSchema: FormSchemaGetter = () => [
  {
    component: 'Input',
    dependencies: {
      show: () => false,
      triggerFields: [''],
    },
    fieldName: 'id',
  },

  {
    component: 'Select',
    componentProps: {
      placeholder: '请选择场站',
      options: (userStore.userInfo?.stations || []).map((item: any) => {
        return {
          label: item.stationName,
          value: item.id,
        };
      }),
    },
    fieldName: 'stationId',
    label: '场站',
    rules: 'required',
  },
  {
    component: 'Select',
    componentProps: {
      placeholder: '请选择事件等级',
      options: [
        { label: '轻微', value: 0 },
        { label: '中等', value: 1 },
      ],
    },
    fieldName: 'eventLevel',
    label: '事件等级',
    rules: 'required',
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入事件名称',
      maxlength: 100,
    },
    fieldName: 'eventName',
    label: '事件名称',
    rules: 'required',
  },
  {
    component: 'DatePicker',
    componentProps: {
      type: 'datetime',
      format: 'YYYY-MM-DD HH:mm:ss',
      valueFormat: 'YYYY-MM-DD HH:mm:ss',
      placeholder: '请选择发生时间',
      style: {
        width: '100%',
      },
    },
    fieldName: 'occurrenceTime',
    label: '发生时间',
    rules: 'required',
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入发生地点',
      maxlength: 200,
    },
    fieldName: 'occurrenceLocation',
    label: '发生地点',
    rules: 'required',
  },
  {
    component: 'RadioGroup',
    componentProps: {
      placeholder: '请选择是否已参与',
      options: [
        { label: '否', value: 0 },
        { label: '是', value: 1 },
      ],
    },
    fieldName: 'governmentMediaInvolvement',
    label: '政府机构/媒体是否已参与',
    rules: 'required',
  },
  {
    component: 'Select',
    componentProps: {
      placeholder: '请选择事件类型',
      options: getDictOptions('event_type'),
    },
    fieldName: 'eventType',
    label: '事件类型',
    rules: 'required',
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入车辆品牌.车型',
      maxlength: 100,
    },
    fieldName: 'vehicleInfo',
    label: '车辆品牌.车型',
    rules: 'required',
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入车牌号',
      maxlength: 50,
    },
    fieldName: 'licensePlateNumber',
    label: '车牌号',
    rules: 'required',
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入现场天气情况',
      maxlength: 100,
    },
    fieldName: 'weatherCondition',
    label: '现场天气情况',
    rules: 'required',
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入单位/部门',
      maxlength: 100,
    },
    fieldName: 'department',
    label: '单位/部门',
    rules: 'required',
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入当事员工',
      maxlength: 50,
    },
    fieldName: 'involvedEmployee',
    label: '当事员工',
    rules: 'required',
  },
  {
    component: 'RadioGroup',
    componentProps: {
      placeholder: '请选择性别',
      options: [
        { label: '男', value: '男' },
        { label: '女', value: '女' },
      ],
    },
    fieldName: 'gender',
    label: '性别',
    rules: 'required',
  },
  {
    component: 'DatePicker',
    componentProps: {
      type: 'date',
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DD HH:mm:ss',
      placeholder: '请选择入职时间',
      style: {
        width: '100%',
      },
    },
    fieldName: 'hireDate',
    label: '入职时间',
    rules: 'required',
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入岗位',
      maxlength: 50,
    },
    fieldName: 'post',
    label: '岗位',
    rules: 'required',
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入营业主管/当班经理',
      maxlength: 50,
    },
    fieldName: 'manager',
    label: '营业主管/当班经理',
    rules: 'required',
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入事件简述及造成的后果',
      maxlength: 500,
      type: 'textarea',
      showWordLimit: true,
    },
    fieldName: 'eventDescription',
    label: '事件简述及造成的后果',
    rules: 'required',
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入事件原因',
      maxlength: 500,
      type: 'textarea',
      showWordLimit: true,
    },
    fieldName: 'eventCause',
    label: '事件原因',
    rules: 'required',
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入已采取的措施及目前情况',
      maxlength: 500,
      type: 'textarea',
      showWordLimit: true,
    },
    fieldName: 'measuresTaken',
    label: '已采取的措施及目前情况',
    rules: 'required',
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入建议的改善措施',
      maxlength: 500,
      type: 'textarea',
      showWordLimit: true,
    },
    fieldName: 'improvementSuggestions',
    label: '建议的改善措施',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'images',
    dependencies: {
      show: () => false,
      triggerFields: [''],
    },
  },
  {
    component: 'Upload',
    fieldName: 'imagesUrl',
    label: '图片',
    componentProps: (row: any) => {
      return {
        ...getMultipleImageUploadConfig(5),
        multiple: true,
        // 调整上传框大小的样式
        onSuccess: (res: any, uploadFile: any, uploadFiles: any) => {
          if (res.code === 200) {
            const paths: string[] = [];
            uploadFiles.forEach((item: any) => {
              if (item.response?.code === 200) {
                paths.push(item.response.data.fileName);
              }
            });
            row.images = paths.join(',');
            return res.data;
          }
        },
      };
    },
    renderComponentContent: () => {
      return {
        default: () => '点击上传照片',
      };
    },
  },
  {
    component: 'RadioGroup',
    componentProps: {
      placeholder: '请选择是否提交',
      options: [
        { label: '是', value: true },
        { label: '否', value: false },
      ],
    },
    fieldName: 'isSubmitted',
    label: '是否提交',
    rules: 'required',
  },
];

export const queryFormSchema: FormSchemaGetter = () => QUERY_FORM_SCHEMA;

// 查询表单模式配置
const QUERY_FORM_SCHEMA = [
  {
    component: 'Select',
    fieldName: 'stationId',
    label: '场站',
    componentProps: {
      placeholder: '请选择场站',
      options: (userStore.userInfo?.stations || []).map((item: any) => {
        return {
          label: item.stationName,
          value: item.id,
        };
      }),
    },
  },
  {
    component: 'Select',
    fieldName: 'eventType',
    label: '事件类型',
    componentProps: {
      placeholder: '请选择事件类型',
      options: getDictOptions('event_type'),
    },
  },
  {
    component: 'Select',
    fieldName: 'eventLevel',
    label: '事件等级',
    componentProps: {
      placeholder: '请选择事件等级',
      options: [
        { label: '轻微', value: 0 },
        { label: '中等', value: 1 },
      ],
    },
  },
  {
    component: 'DatePicker',
    fieldName: 'occurrenceTime',
    label: '发生时间',
    componentProps: {
      type: 'daterange',
      format: 'YYYY-MM-DD HH:mm:ss',
      valueFormat: 'YYYY-MM-DD HH:mm:ss',
      startPlaceholder: '开始日期',
      endPlaceholder: '结束日期',
    },
  },
  {
    component: 'Input',
    fieldName: 'eventName',
    label: '事件名称',
    componentProps: {
      placeholder: '请输入事件名称',
    },
  },
];

/**
 * 处理表单数据
 * @param data 表单数据
 * @returns 处理后的数据
 */
export function processFormData(data: any) {
  // 构建返回数据
  return data;
}
