import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Form/index';
import { h } from 'vue';
import Input from './customComponents/Input.vue';
import InputTextArea from './customComponents/InputTextArea.vue';
import InputNumber from './customComponents/InputNumber.vue';
import ArrayCom from './customComponents/ArrayCom.vue';
import Select from './customComponents/Select.vue';
import Checkbox from './customComponents/Checkbox.vue';
import Radio from './customComponents/Radio.vue';
import DatePicker from './customComponents/DatePicker.vue';
import TimePicker from './customComponents/TimePicker.vue';
import Switch from './customComponents/Switch.vue';

export const columns: BasicColumn[] = [
  {
    title: '变量标题',
    align: 'left',
    dataIndex: 'title',
    width: 100,
  },
  {
    title: '变量值',
    align: 'left',
    dataIndex: 'value',
    width: 300,
    customRender: ({ record }) => {
      switch (record.type) {
        case 'Input':
          const onchange = (val) => {
            console.log(val);
            record.value = val;
          };
          return h(Input, {
            value: record.value,
            tip: record.tip,
            errMsg: record.errMsg || '',
            rules: record.rules || [],
            style: { width: '100%' },
            onChange: onchange,
          });
        case 'InputNumber':
          const onNumberChange = (val) => {
            record.value = val;
          };
          return h(InputNumber, {
            value: record.value,
            tip: record.tip,
            errMsg: record.errMsg || '',
            rules: record.rules || [],
            style: { width: '100%' },
            onChange: onNumberChange,
          });
        case 'Select':
          const onSelectChange = (val) => {
            record.value = val;
          };
          return h(Select, {
            value: record.value,
            options: record.option,
            tip: record.tip,
            mode: 'SECRET_COMBOBOX_MODE_DO_NOT_USE',
            placeholder: '没有选中任何项',
            onChange: onSelectChange,
          });
        case 'MultipleSelect':
          const onMultipleChange = (val) => {
            record.value = val;
          };
          return h(Select, {
            value: record.value,
            mode: 'multiple',
            options: record.option,
            tip: record.tip,
            placeholder: '没有选中任何项',
            onChange: onMultipleChange,
          });
        case 'DatePicker':
          const onDatePickerChange = (val) => {
            record.value = val;
          };
          return h(DatePicker, {
            placeholder: '没有选择日期',
            value: record.value,
            tip: record.tip,
            onChange: onDatePickerChange,
          });
        case 'TimePicker':
          const onTimePickerChange = (val) => {
            record.value = val;
          };
          return h(TimePicker, {
            placeholder: '没有选择时间',
            value: record.value,
            tip: record.tip,
            onChange: onTimePickerChange,
          });
        case 'InputTextArea':
          const onTextAreaChange = (val) => {
            console.log(val);
            record.value = val;
          };
          return h(InputTextArea, {
            value: record.value,
            tip: record.tip,
            errMsg: record.errMsg || '',
            rules: record.rules || [],
            style: { width: '100%' },
            onChange: onTextAreaChange,
          });
        case 'Switch':
          const onSwitchChange = (val) => {
            record.value = val;
          };
          return h(Switch, {
            checked: record.value,
            tip: record.tip,
            onChange: onSwitchChange,
          });
        case 'Checkbox':
          const onCheckboxChange = (val) => {
            console.log(val);
            record.value = val;
          };
          return h(Checkbox, {
            value: record.value,
            options: record.option,
            tip: record.tip,
            onChange: onCheckboxChange,
          });
        case 'Radio':
          const onRadioChange = (val) => {
            record.value = val;
          };
          return h(Radio, {
            value: record.value,
            options: record.option,
            tip: record.tip,
            onChange: onRadioChange,
          });
        case 'ArrayCom':
          // const onRadioChange = (evt) => {
          //   record.value = evt.target.value;
          // };
          return h(ArrayCom, {
            // value: record.value,
            // options: record.option,
            // style: { width: '65%' },
            // onChange: onRadioChange,
          });
      }
    },
  },
  {
    title: '变量名',
    align: 'left',
    dataIndex: 'name',
    width: 150,
  },
];

export const schemas: FormSchema[] = [
  {
    field: 'type',
    component: 'Select',
    label: '类型',
    colProps: {
      span: 20,
    },
    defaultValue: '1',
    componentProps: {
      options: [
        {
          label: '字符',
          value: '1',
          key: '1',
        },
        {
          label: '数字',
          value: '2',
          key: '2',
        },
      ],
    },
  },
  {
    field: 'group',
    component: 'Select',
    label: '分组',
    colProps: {
      span: 20,
    },
    defaultValue: '1',
    componentProps: {
      options: [
        {
          label: '基础配置',
          value: '1',
          key: '1',
        },
        {
          label: '邮件配置',
          value: '2',
          key: '2',
        },
      ],
    },
  },
  {
    field: 'name',
    component: 'Input',
    label: '变量名',
    colProps: {
      span: 20,
    },
    required: true,
  },
  {
    field: 'title',
    component: 'Input',
    label: '变量标题',
    colProps: {
      span: 20,
    },
    rules: [{ required: true, type: 'email', trigger: 'blur' }],
  },
  {
    field: 'value',
    component: 'Input',
    label: '变量值',
    colProps: {
      span: 20,
    },
  },
  {
    field: 'tip',
    component: 'Input',
    label: '提示信息',
    colProps: {
      span: 20,
    },
  },
  {
    field: 'rule',
    component: 'Select',
    label: '校验规则',
    colProps: {
      span: 20,
    },
    componentProps: {
      mode: 'multiple',
      options: [
        {
          label: '必选(required)',
          value: 'required',
          key: 'required',
        },
        {
          label: '数字(digits)',
          value: 'digits',
          key: 'digits',
        },
        {
          label: '字母(letters)',
          value: 'letters',
          key: 'letters',
        },
        {
          label: '日期(time)',
          value: 'time',
          key: 'time',
        },
        {
          label: '邮箱(email)',
          value: 'email',
          key: 'email',
        },
        {
          label: '网址(url)',
          value: 'url',
          key: 'url',
        },
        {
          label: 'QQ号(qq)',
          value: 'qq',
          key: 'qq',
        },
        {
          label: '身份证(IDcard)',
          value: 'IDcard',
          key: 'IDcard',
        },
        {
          label: '座机电话(tel)',
          value: 'tel',
          key: 'tel',
        },
        {
          label: '手机(mobile)',
          value: 'mobile',
          key: 'mobile',
        },
        {
          label: '邮编(zipcode)',
          value: 'zipcode',
          key: 'zipcode',
        },
        {
          label: '中文(chinese)',
          value: 'chinese',
          key: 'chinese',
        },
        {
          label: '用户名(username)',
          value: 'username',
          key: 'username',
        },
        {
          label: '密码(password)',
          value: 'password',
          key: 'password',
        },
      ],
    },
  },
  {
    field: 'extra',
    component: 'InputTextArea',
    label: '扩展属性',
    colProps: {
      span: 20,
    },
  },
];