import { Time } from '/@/components/Time';
import { FormProps, BasicColumn } from '/@/components/Table';
import { h, ref, computed } from 'vue';
import { FormSchema } from '/@/components/Form/index';
import { useI18n } from '/@/hooks/web/useI18n';
const { t } = useI18n();
import { dincrementList } from '/@/api/equity';
import type { Dayjs } from 'dayjs';
const selectPriceDate = ref('');
import dayjs from 'dayjs';
import { useLocaleStore } from '/@/store/modules/locale';
const localeStore = useLocaleStore();
const isEn = computed(() => localeStore.getLocale === 'en');

export const columns: BasicColumn[] = [
  {
    title: t('routes.equity.timeList'),
    dataIndex: 'createTime',
    width: 150,
    customRender: ({ record }) => {
      return (
        record.createTime &&
        h(Time, {
          value: record.createTime,
          mode: 'datetime',
        })
      );
    },
  },
  {
    title: t('routes.equity.Type'),
    dataIndex: 'type',
    width: 120,
    customRender: ({ record }) => {
      return t(`routes.finance.equityType.${record.type}`) || '-';
    },
  },
  {
    title: t('routes.equity.nickName'),
    dataIndex: 'nickName',
    width: 100,
  },
  {
    title: t('routes.equity.userName1'),
    dataIndex: 'userName',
    width: 180,
  },
  {
    title: t('routes.equity.email'),
    dataIndex: 'email',
    // slots: { customRender: 'orderType' },
    width: 150,
  },
  {
    title: t('routes.equity.userCount'),
    dataIndex: 'count',
    // slots: { customRender: 'orderStatus' },
    width: 120,
  },
  {
    title: t('routes.finance.totalTime'),
    dataIndex: 'totalTime',
    // slots: { customRender: 'orderStatus' },
    width: 120,
    customRender: ({ record }) => {
      return record.type == 2?'-':record.totalTime;
    },
  },
  {
    title: t('routes.equity.giveType'),
    dataIndex: 'giveType',
    // slots: { customRender: 'orderStatus' },
    width: 180,
    customRender: ({ record }) => {
      return t(`routes.finance.giveType.${record.giveType}`) || '-';
    },
  },
];
export const searchForm: Partial<FormProps> = {
  labelWidth: isEn.value ? 120 : 100,
  schemas: [
    {
      field: 'type',
      label: t('routes.equity.Type'),
      component: 'ApiSelect',
      componentProps: {
        maxLength: 50,
        api: async function () {
          const list = await dincrementList();
          let optionList = [];
          list.map((ele) => {
            optionList.push({
              name: t(`routes.finance.equityType.${ele.validTimeType}`),
              value: ele.validTimeType,
              key: ele.validTimeType,
            });
          });
          optionList.push({
            name: t('routes.finance.equityType.2'),
            value: 2,
            key: '2',
          });
          console.log('ele.id', optionList);
          return optionList;
        },
        numberToString: true,
        labelField: 'name',
        valueField: 'value',
        immediate: true,
      },
      colProps: {
        xl: 5,
        xxl: 5,
      },
    },
    {
      field: 'giveType',
      label: t('routes.equity.giveType'),
      component: 'Select',
      componentProps: {
        options: [
          {
            label: t('routes.finance.giveType.0'),
            value: 0,
            key: '0',
          },
          {
            label: t('routes.finance.giveType.1'),
            value: 1,
            key: '1',
          },
          {
            label: t('routes.finance.giveType.2'),
            value: 2,
            key: '2',
          },
          {
            label: t('routes.finance.giveType.3'),
            value: 3,
            key: '3',
          },
        ],
      },
      colProps: {
        xl: 5,
        xxl: 5,
      },
    },
    {
      field: 'timeList',
      label: t('routes.equity.timeList'),
      component: 'RangePicker',
      componentProps: {
        maxLength: 100,
        valueFormat: 'YYYY-MM-DD',
        format: 'YYYY-MM-DD',
        onCalendarChange: (date) => {
          console.log('current', date);
          selectPriceDate.value = date[0];
        },
        onOpenChange: (status) => {
          if (!status) {
            selectPriceDate.value = '';
          }
        },
        disabledDate: (current) => {
          if (selectPriceDate.value) {
            return (
              current > dayjs(selectPriceDate.value).add(3, 'year') ||
              current < dayjs(selectPriceDate.value).subtract(3, 'year')
            );
          } else {
            return false;
          }
        },
      },
      colProps: {
        xl: 7,
        xxl: 7,
      },
    },
  ],
};
export const InvoiceSchemas: FormSchema[] = [
  {
    field: 'type',
    component: 'Input',
    label: t('routes.product.types'),
    slot: 'text',
    colProps: {
      span: 24,
    },
  },
  {
    field: 'version',
    component: 'Input',
    label: t('routes.product.version'),
    required: true,
    colProps: {
      span: 24,
    },
    rules: [
      {
        required: true,
        // @ts-ignore
        validator: async (rule, value) => {
          if (!value) {
            return Promise.reject(t('common.inputText') + t('routes.product.version'));
          }
          if (/.*[\u4e00-\u9fa5]+.*$/.test(value)) {
            /* eslint-disable-next-line */
            return Promise.reject(t('routes.equity.zhTips'));
          }
          return Promise.resolve();
        },
        trigger: 'change',
      },
    ],
    componentProps: {
      maxLength: 15,
      onChange: (data) => {
        console.log('data', data);
      },
    },
  },
  {
    field: 'description',
    component: 'InputTextArea',
    required: true,
    label: t('routes.product.description'),
    componentProps: {
      rows: 4,
    },
    colProps: {
      span: 24,
    },
  },
];