import { FormProps, BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Form/index';
import { adapt } from '/@/utils/adapt';
import moment from 'moment';
import { h } from 'vue';
import Upload from './customCom/Upload.vue';

const adaptWidth = adapt();

export const columns: BasicColumn[] = [
  {
    title: 'ID',
    dataIndex: 'id',
    editComponentProps: {
      prefix: '$',
    },
    width: 100,
    sorter: true,
  },
  {
    title: '交易类型',
    dataIndex: 'type',
    width: 130,
    customRender({ record }) {
      const options = ['支出', '收入', '内部转账'];
      return options[record.type];
    },
    sorter: true,
  },
  {
    title: '交易名称',
    dataIndex: 'name',
    width: 130,
    sorter: true,
  },
  {
    title: '交易账户',
    dataIndex: 'account',
    width: 150,
    sorter: true,
  },
  {
    title: '金额',
    dataIndex: 'money',
    width: 150,
    sorter: true,
  },
  {
    title: '相关人员',
    dataIndex: 'people',
    width: 150,
    sorter: true,
  },
  {
    title: '是否开票',
    dataIndex: 'invoice',
    width: 130,
    customRender({ record }) {
      const options = ['否', '是'];
      return options[record.invoice];
    },
    sorter: true,
  },
  {
    title: '备注',
    dataIndex: 'remark',
    width: 200,
    sorter: true,
  },
  {
    title: '交易日期',
    dataIndex: 'time',
    width: 200,
    customRender({ record }) {
      return moment(record.time).format('YYYY-MM-DD');
    },
    sorter: true,
  },
];

export function getFormConfig(): Partial<FormProps> {
  return {
    labelWidth: 100,
    schemas: [
      {
        field: `id`,
        label: `ID`,
        component: 'Input',
        componentProps: {
          placeholder: 'ID',
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `type`,
        label: `交易类型`,
        component: 'Select',
        componentProps: {
          options: [
            {
              label: '支出',
              value: 0,
            },
            {
              label: '收入',
              value: 1,
            },
            {
              label: '内部转账',
              value: 2,
            },
          ],
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `name`,
        label: `交易名称`,
        component: 'Input',
        componentProps: {
          placeholder: '交易名称',
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `account`,
        label: `交易账户`,
        component: 'Input',
        componentProps: {
          placeholder: '交易账户',
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `money`,
        label: `金额`,
        component: 'Input',
        componentProps: {
          type: 'number',
          placeholder: '金额',
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `people`,
        label: `相关人员`,
        component: 'Input',
        componentProps: {
          placeholder: '相关人员',
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `invoice`,
        label: `是否开票`,
        component: 'Select',
        componentProps: {
          placeholder: '是否开票',
          options: [
            {
              label: '是',
              value: 0,
            },
            {
              label: '否',
              value: 1,
            },
          ],
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `time`,
        label: `交易日期`,
        component: 'DatePicker',
        componentProps: {
          placeholder: '交易日期',
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
      {
        field: `remark`,
        label: `备注`,
        component: 'Input',
        componentProps: {
          placeholder: '备注',
        },
        colProps: {
          xl: 12,
          xxl: 8,
        },
      },
    ],
  };
}

// =================popup================================
export const schemas: FormSchema[] = [
  {
    field: 'type',
    component: 'Select',
    label: '交易类型',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    componentProps: {
      placeholder: '交易类型',
      options: [
        {
          label: '支出',
          value: 0,
        },
        {
          label: '收入',
          value: 1,
        },
        {
          label: '内部转账',
          value: 2,
        },
      ],
    },
    required: true,
  },
  {
    field: 'name',
    component: 'Select',
    label: '交易名称',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    componentProps: {
      placeholder: '交易名称',
      options: [],
    },
    required: true,
  },
  {
    field: 'inflow_account',
    component: 'Select',
    label: '流入账户',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    componentProps: {
      placeholder: '流入账户',
      options: [],
    },
    required: true,
    show: ({ values }) => {
      if (values.type === 2) {
        return true;
      }
      return false;
    },
  },
  {
    field: 'year',
    component: 'Select',
    label: '会费年份',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    componentProps: {
      placeholder: '会费年份',
      options: [],
    },
    required: true,
    show: ({ values }) => {
      if (values.name === '会费') {
        return true;
      }
      return false;
    },
  },
  {
    field: 'money',
    component: 'Input',
    label: '金额',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    componentProps: {
      type: 'number',
      placeholder: '金额',
    },
    required: true,
  },
  {
    field: 'people',
    component: 'Select',
    label: '相关人员',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    componentProps: {
      placeholder: '相关人员',
      options: [],
    },
    required: true,
  },
  {
    field: 'invoice',
    component: 'Switch',
    label: '是否开票',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    componentProps: {
      placeholder: '是否开票',
      options: [
        {
          label: '是',
          value: 0,
        },
        {
          label: '否',
          value: 1,
        },
      ],
    },
  },
  {
    field: 'invoiceNo',
    component: 'Input',
    label: '发票号',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    componentProps: {
      placeholder: '发票号',
    },
    show: ({ values }) => {
      if (values.invoice) {
        return true;
      }
      return false;
    },
  },
  {
    field: 'enclosure',
    component: 'Input',
    label: '附件',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    render: ({ model, field }) => {
      return h(Upload, {
        value: '',
        placeholder: '上传',
        onChange(value) {
          model[field] = value;
        },
      });
    },
  },
  {
    field: 'remark',
    component: 'Input',
    label: '备注',
    labelWidth: adaptWidth.labelWidth,
    colProps: {
      span: adaptWidth.elContainer,
    },
    componentProps: {
      placeholder: '备注',
    },
  },
];
