import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Form';
import dayjs from 'dayjs';
import { h } from 'vue';
import { DatePicker } from 'ant-design-vue';
import JSearchSelect from '/@/components/Form/src/jeecg/components/JSearchSelect.vue';

// 表格字段
export const getTableColumns = ({ onTimeChange, onClickRemark, onBrandNumChange }): BasicColumn[] => [
  {
    title: '序号',
    dataIndex: 'serialNumber',
    key: 'serialNumber',
    width: 40,
    align: 'center',
  },
  {
    title: '炉号',
    dataIndex: 'heatNo',
    key: 'heatNo',
    width: 60,
    align: 'center',
  },
  {
    title: '送样时间',
    dataIndex: 'deliveryTime',
    key: 'deliveryTime',
    width: 104,
    align: 'center',
    customRender({ text, record }) {
      if (!record.heatNo) return '';
      return h(DatePicker, {
        bordered: false,
        showTime: true,
        size: 'small',
        allowClear: false,
        suffixIcon: '',
        defaultValue: dayjs(text),
        onChange(date) {
          onTimeChange && onTimeChange(date, record);
        },
      });
    },
  },
  {
    title: '牌号',
    dataIndex: 'brandNum',
    key: 'brandNum',
    width: 57,
    align: 'center',
    customRender(opt) {
      if (!opt.record.heatNo) return '';
      return h(JSearchSelect, {
        value: opt.text,
        dict: 'billet_spec',
        size: 'small',
        bordered: false,
        dropdownStyle: {},
        allowClear: false,
        onChange(value) {
          onBrandNumChange && onBrandNumChange(value, opt.record);
        },
      });
    },
  },
  {
    title: '班产 / 170 / 定尺',
    dataIndex: 'size',
    key: 'size',
    width: 100,
    align: 'center',
  },
  {
    title: '班产',
    dataIndex: 'workLength',
    key: 'workLength',
    width: 150,
    align: 'left',
    customRender({ text }) {
      if (!text) return '';
      return h('div', {}, [
        h('span', { style: { display: 'inline', width: '50px', color: '#f50' } }, text.size),
        h('span', {}, ' / '),
        h('span', { style: { display: 'inline', width: '50px', color: '#108ee9' } }, text.num ? text.num + ' 支' : ''),
        h('span', {}, ' / '),
        h('span', { style: { display: 'inline', color: '#87d068' } }, text.weight ? text.weight + ' 吨' : ''),
      ]);
    },
  },
  {
    title: '日产',
    dataIndex: 'dayLength',
    key: 'dayLength',
    width: 150,
    align: 'left',
    customRender({ text }) {
      if (!text) return '';
      return h('div', {}, [
        h('span', { style: { display: 'inline', width: '50px', color: '#f50' } }, text.size),
        h('span', {}, ' / '),
        h('span', { style: { display: 'inline', width: '50px', color: '#108ee9' } }, text.num ? text.num + ' 支' : ''),
        h('span', {}, ' / '),
        h('span', { style: { display: 'inline', color: '#87d068' } }, text.weight ? text.weight + ' 吨' : ''),
      ]);
    },
  },
  {
    title: '备注',
    dataIndex: 'notes',
    key: 'notes',
    width: 95,
    align: 'center',
    customRender(opt) {
      if (!opt.record.heatNo) return '';
      return h(
        'div',
        {
          style: {
            cursor: 'pointer',
            width: '100%',
            height: '32px',
          },
          onClick: () => {
            onClickRemark && onClickRemark(opt.record, opt.text);
          },
        },
        opt.text
      );
    },
  },
];

// 自定义表单字段
export const getFormSchemas = ({ onDateChange }) => {
  return [
    {
      field: 'ccmNo',
      label: '铸机',
      component: 'Input',
      defaultValue: '5',
      componentProps: {
        dictCode: 'lg_zj',
      },
      colProps: { span: 6 },
      slot: 'ccmNo',
    },
    {
      label: '',
      field: 'zhanwei',
      component: 'Input',
      slot: 'zhanwei',
      colProps: { span: 18 },
    },
    {
      label: '班次日期',
      field: 'queryDate',
      component: 'DatePicker',
      defaultValue: dayjs(),
      componentProps: {
        valueFormat: 'YYYY-MM-DD',
        onChange: (v) => {
          onDateChange && onDateChange(v);
        },
      },
    },
    {
      label: '',
      field: 'shiftObj',
      component: 'Input',
      slot: 'shiftObj',
      colProps: { span: 14 },
    },
  ] as FormSchema[];
};