import { Button, Modal, Table, Tooltip } from 'antd';
import React from 'react';

import { networkUtils, config, enums, dataUtils } from '@utils';
import { UploadEL } from '@components';

const { api } = config;
const { rfq } = api;
const { quoteList } = rfq;

// 对金额类型字段进行格式化
const format = (value) => {
  return value ? `${parseFloat(value).toFixed(2)}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',') : '';
};

class QuotepModal extends React.PureComponent {

  constructor(props) {
    super(props);

    this.state = {
      dataSource: [],
      fetching: false,
    };
  }

  componentWillReceiveProps = (nextProps) => {
    if (nextProps.visible) {
      this.fetchData();
    }
  };

  fetchData = () => {
    const record = this.props.record;
    this.setState({ fetching: true });

    networkUtils.request({
      method: 'get',
      url: quoteList,
      data: {
        docNo: record.docNo,
      }
    }).then((data) => {
      this.setState({
        dataSource: data.data,
        fetching: false,
      });
    });
  };

  render() {
    const { dataSource, fetching } = this.state;
    const { visible, onCancel, modalProps, record } = this.props;

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

    const modalOpts = {
      ...modalProps,
      visible,
      maskClosable: false,
      title: '报价明细',
      onCancel: handleClose,
      footer: [
        <Button key="back" onClick={handleClose}>关闭</Button>,
      ],
    };

    const quoteProps = {
      rowKey: 'id',
      scroll: { x: '230%' },
      dataSource,
      loading: fetching,
      pagination: false,
      size: 'small',
      columns: [{
        title: '物料编号',
        dataIndex: 'itemCode',
        width: '4%',
        className: 'noWrap',
        sorter: true,
      }, {
        title: '物料名称',
        dataIndex: 'itemName',
        width: '4%',
        className: 'alignLeft noWrap',
        sorter: true,
        render: (value, row, index) => {
          if (value) {
            return value.length > 10 ? (
              <Tooltip placement="bottom" title={value}> {value && `${value.slice(0, 10)}...`} </Tooltip>) : value;
          } else {
            return '';
          }
        },
      }, {
        title: '供应商名称',
        dataIndex: 'suppName',
        width: '4%',
        className: 'alignLeft noWrap',
        sorter: true,
        render: (value, row, index) => {
          if (value) {
            return value.length > 10 ? <Tooltip placement="bottom" title={value}>
              {value && `${value.slice(0, 10)}...`}
            </Tooltip> : value;
          } else {
            return '无';
          }
        },
      }, {
        title: '供货区域',
        dataIndex: 'suppCenterName',
        width: '4%',
        align: 'alignCenter',
        sorter: true,
      }, {
        title: '预估用量',
        dataIndex: 'estimatedNum',
        width: '4%',
        className: 'alignRight',
        sorter: true,

      }, {
        title: '起订量',
        dataIndex: 'minNum',
        width: '4%',
        className: 'alignRight',
        sorter: true,
      }, {
        title: '含税单价',
        dataIndex: 'price',
        width: '4%',
        className: 'alignRight',
        sorter: true,
        render: format
      }, {
        title: '最高可供应量',
        dataIndex: 'maxProvideNum',
        width: '4%',
        className: 'alignRight',
        sorter: true,
      }, {
        title: '报价状态',
        dataIndex: 'docStatusName',
        width: '4%',
        className: 'noWrap',
      }, {
        title: '报价时间',
        dataIndex: 'priceTime',
        width: '4%',
        className: 'noWrap',
        render: (value, row, index) => {
          return dataUtils.dtm(value);
        },
        sorter: true,
      }, {
        title: '价格生效日',
        dataIndex: 'fromDate',
        width: '4%',
        className: 'noWrap',
        render: (value, row, index) => {
          return dataUtils.ymd(value);
        },
        sorter: true,
      }, {
        title: '价格失效日',
        dataIndex: 'toDate',
        width: '4%',
        className: 'noWrap',
        render: (value, row, index) => {
          return dataUtils.ymd(value);
        },
        sorter: true,
      }, {
        title: '订货周期(天)',
        dataIndex: 'orderPeriod',
        width: '4%',
        className: 'alignRight',
        sorter: true,
      }, {
        title: '配送时间(天)',
        dataIndex: 'deliveryPeriod',
        width: '4%',
        className: 'alignRight',
        sorter: true,
      }, {
        title: '上月绩效',
        dataIndex: 'scoreGrade',
        align: 'alignCenter',
        width: '4%',
      }, {
        title: '含税金额',
        dataIndex: 'amt',
        width: '4%',
        className: 'alignRight',
        sorter: true,
        render: format
      }, {
        title: '未税单价',
        dataIndex: 'netPrice',
        width: '4%',
        className: 'alignRight',
        sorter: true,
        render: format
      }, {
        title: '未税金额',
        dataIndex: 'netAmt',
        width: '4%',
        className: 'alignRight',
        sorter: true,
        render: format
      }, {
        title: '税额',
        dataIndex: 'taxAmt',
        width: '4%',
        className: 'alignRight',
        sorter: true,
        render: format
      }, {
        title: '税率(%)',
        dataIndex: 'taxRate',
        width: '4%',
        className: 'alignRight',
        sorter: true,
      }, {
        title: '备注',
        dataIndex: 'remark',
        width: '5%',
        className: 'alignLeft',
        render: (value, row, index) => {
          if (value) {
            return value.length > 15 ? (
              <Tooltip placement="bottom" title={value}> {value && `${value.slice(0, 15)}...`} </Tooltip>) : value;
          } else {
            return '';
          }
        },
      }, {
        title: '报价附件',
        dataIndex: 'quoteAttch',
        width: '6%',
        className: 'alignLeft',
        render: (value, row, index) => {
          return (
            <UploadEL size={'small'}
              api={`/api/source-mgmt/qo/iqo/sfs/token?clsPath=${row.attachRepo}&dataKey=${row.pqmId}`}
              dataKey={row.pqmId}
              listTypes={'text'}
              disabled={true} />
          )
        },
      }],
    };

    return (
      <Modal wrapClassName="vertical-center-modal" width="75%" {...modalOpts} >
        <Table {...quoteProps} />
      </Modal>
    );
  }
}

export default QuotepModal;
