import React from 'react';
import { Button, Form, Modal, Table, DatePicker, Checkbox } from 'antd';
import { UdcSelect } from '@components';
import { ItemPicker } from '@bizComponents';
import moment from 'moment';
import UploadEL from './UploadEL';

const modal =
  ({
    mode,
    domain,
    readOnly,
    record,
    onOk,
    onCancel,
    dispatch,
    loading,
    ...modalProps
  }) => {

    const handleCancel = () => {
      onCancel();
    };

    const modalOpts = {
      ...modalProps,
      onCancel: handleCancel,
      footer: [
        <Button key="back" onClick={handleCancel}>取消</Button>,
      ],
    };

    const tableProps = {
      scroll: { x: '125%' },
      indentSize: 30,
      rowKey: 'ouName',
      dataSource: record,
      bordered: true,
      defaultExpandAllRows: true,
      columns: [{
        title: '证件类型',
        required: true,
        dataIndex: 'qualifyType',
        width: '12%',
        render: (value, row, index) => {
          return (<UdcSelect domain="SUPP"
            code="GYSZZ_TYPE"
            size="small"
            value={value}
            disabled={true}
          />);
        },
      }, {
        title: '证件名称',
        required: true,
        dataIndex: 'qualifyName',
        width: '10%',
      }, {
        title: '证件编号',
        required: true,
        dataIndex: 'qualifyNo',
        width: '10%',
      }, {
        title: '证件拥有者',
        required: true,
        dataIndex: 'qualifyOwner',
        width: '8%',
        render: (value, row, index) => {
          return (<UdcSelect domain="SRM"
            code="QUALIFY_OWNER"
            size="small"
            value={value}
            disabled={ true }
          />);
        },
      }, {
        title: '证件状态',
        dataIndex: 'qualifyStatusDesc',
        width: '6%',
      }, {
        title: '是否长期有效',
        dataIndex: 'longterm',
        width: '6%',
        render: (value, row, index) => {
          return (<Checkbox defaultChecked={value ? true : false} disabled={true} />);
        },
      }, {
        title: '生效日期',
        dataIndex: 'validFrom',
        width: '10%',
        render: (value, row, index) => {
          return (<DatePicker style={{ width: '100%' }} size="small" disabled={true} value={value ? moment(value) : value} />);
        },
      }, {
        title: '失效日期',
        dataIndex: 'validTo',
        width: '10%',
        render: (value, row, index) => {
          return (<DatePicker style={{ width: '100%' }} size="small" disabled={true} value={value ? moment(value) : value} />);
        },
      }, {
        title: '关联物料',
        dataIndex: 'relateItem',
        width: '10%',
        render: (value, row, index) => <ItemPicker
          apiName='items'
          value={{ id: row.relateToItemId, code: row.itemCode, name: row.itemName }}
          disabled={ true }
        />,
      }, {
        title: '附件',
        dataIndex: 'attachRepo',
        width: '16%',
        render: (value, row, index) => {
          let clsPath = row.attachRepo ? row.attachRepo : Math.abs(row.id);
          let dataKey = row.id > 0 ? row.id : '';
          return (
            <UploadEL
              currentData={ row }
              size={'small'}
              api={`/api/supp/sfs/token?clsPath=${clsPath}&dataKey=${dataKey}`}
              dataKey={`${dataKey}`}
              listTypes={['text', 'picture', 'picture-card']}
              disabled={true}
            />
          );
        }
      }],
    };

    return (
      <Modal {...modalOpts}>
        <Table loading={loading.effects[`${domain}/query`]} pagination={false} size="small" {...tableProps} />
      </Modal>
    );
  };

export default Form.create()(modal);
