import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import { h } from 'vue';
import { ElInputNumber } from 'element-plus';

export const queryFormSchema: FormSchemaGetter = () => [
  {
    component: 'Select',
    fieldName: 'station',
    label: '油站',
    componentProps: {
      placeholder: '请选择油站',
      options: [
        { label: '油站1', value: '油站1' },
        { label: '油站2', value: '油站2' },
        { label: '油站3', value: '油站3' },
        { label: '油站4', value: '油站4' },
        { label: '油站5', value: '油站5' },
      ],
    },
  },
  {
    component: 'Input',
    fieldName: 'name',
    label: '名称',
    componentProps: {
      placeholder: '请输入名称',
    },
  },
  {
    component: 'DatePicker',
    fieldName: 'scoringTime',
    label: '评分时间',
    componentProps: {
      type: 'daterange',
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DD HH:mm:ss',
      startPlaceholder: '开始日期',
      endPlaceholder: '结束日期',
    },
  },
  {
    component: 'Input',
    fieldName: 'scorer',
    label: '评分人',
    componentProps: {
      placeholder: '请输入评分人',
    },
  },
  {
    component: 'Select',
    fieldName: 'scorerPosition',
    label: '评分人岗位',
    componentProps: {
      placeholder: '请选择评分人岗位',
      options: [
        { label: '站长', value: '站长' },
        { label: '营业员', value: '营业员' },
        { label: '安全员', value: '安全员' },
        { label: '主管', value: '主管' },
      ],
    },
  },
  {
    component: 'Input',
    fieldName: 'scoredPerson',
    label: '被评人',
    componentProps: {
      placeholder: '请输入被评人',
    },
  },
  {
    component: 'Select',
    fieldName: 'scoredPersonPosition',
    label: '被评人岗位',
    componentProps: {
      placeholder: '请选择被评人岗位',
      options: [
        { label: '站长', value: '站长' },
        { label: '营业员', value: '营业员' },
        { label: '安全员', value: '安全员' },
        { label: '主管', value: '主管' },
      ],
    },
  },
  {
    component: 'Space',
    fieldName: 'intervalDays',
    label: '时间间隔天',
    renderComponentContent: (value: any, api: any) => {
        return {
          default: () => [
            h(ElInputNumber, {
              placeholder: '最小值',
              min: 0,
              max: 100,
              style: { width: '50%' },
              modelValue: value.intervalDaysMin,
              'onUpdate:modelValue': (val: number) => api.setValue('intervalDaysMin', val),
            }),
            ' - ',
            h(ElInputNumber, {
              placeholder: '最大值',
              min: 0,
              max: 100,
              style: { width: '50%' },
              modelValue: value.intervalDaysMax,
              'onUpdate:modelValue': (val: number) => api.setValue('intervalDaysMax', val),
            }),
          ],
        };
      },
  },
  {
    component: 'Space',
    fieldName: 'score',
    label: '评分',
    renderComponentContent: (value: any, api: any) => {
        return {
          default: () => [
            h(ElInputNumber, {
              placeholder: '最小值',
              min: 0,
              max: 100,
              style: { width: '50%' },
              modelValue: value.scoreMin,
              'onUpdate:modelValue': (val: number) => api.setValue('scoreMin', val),
            }),
            ' - ',
            h(ElInputNumber, {
              placeholder: '最大值',
              min: 0,
              max: 100,
              style: { width: '50%' },
              modelValue: value.scoreMax,
              'onUpdate:modelValue': (val: number) => api.setValue('scoreMax', val),
            }),
          ],
        };
      },
  },
];

export const tableColumns: VxeGridProps['columns'] = [
  {
    type: 'checkbox',
    width: 80,
  },
  {
    field: 'scoredPerson',
    title: '被评人',
    minWidth: 120,
  },
  {
    field: 'scoredPersonPosition',
    title: '被评人岗位',
    minWidth: 120,
  },
  {
    field: 'station',
    title: '油站',
    minWidth: 120,
  },
  {
    field: 'name',
    title: '名称',
    minWidth: 150,
  },
  {
    field: 'scorer',
    title: '评分人',
    minWidth: 120,
  },
  {
    field: 'scorerPosition',
    title: '评分人岗位',
    minWidth: 120,
  },
  {
    field: 'score',
    title: '评分',
    minWidth: 100,
    align: 'center',
  },
  {
    field: 'comment',
    title: '评语',
    minWidth: 200,
  },
  {
    field: 'scoringTime',
    title: '评分时间',
    minWidth: 180,
  },
  {
    field: 'intervalDays',
    title: '间隔天数',
    minWidth: 120,
    align: 'center',
  }
];
