import React from 'react';
import { connect } from 'dva';
import { Card, Tooltip } from 'antd';
import { DataTable, SuggestSelect } from '../../../components';
import { CascaderItem } from '../../components';

const SuppList = ({ dispatch, suppList, loading }) => {
  const { list, total, filterParams } = suppList;

  const domain = 'suppList';
  const domainCN = '供应商联系表';

  const tableProps = {
    rowKey: 'rowKey',
    sortBy: 'suppCode',
    scroll: { x: '250%' },
    domain,
    dispatch,
    loading,
    total,
    showAdd: false,
    enableSelection: false,
    dataSource: list,
    handleDownload: {
      requestUrl: `/srm/api/export/supplist`,
      requestParam: window.location.search,
    },
    filter: [{
      title: '配送区域',
      dataIndex: 'suppRegion',
      tag: <SuggestSelect apiName="regions" mode="multiple" />,
      options: {
        initialValue: filterParams.suppRegion,
      },
    }, {
      title: '物料类别',
      dataIndex: 'cccCode',
      tag: <CascaderItem placeholder="选择大类/中类/小类" changeOnSelect={true} />,
      options: {
        initialValue: filterParams.cccCode,
      },
    }],
    columns: [{
      title: '负责采购专员',
      dataIndex: 'purch',
      width: '4%',
    }, {
      title: '供应商编码',
      dataIndex: 'suppCode',
      width: '4%',
    }, {
      title: '供应商名称',
      dataIndex: 'suppName',
      width: '6%',
    }, {
      title: '供应品类',
      dataIndex: 'suppPropertyDesc',
      width: '6%',
      render: (value, row, index) => {
        if (value) {
          return value.length > 8 ? (
            <Tooltip placement="bottom" title={value}> {value && `${value.slice(0, 8)}...`}  </Tooltip>) : value;
        }
      },
    }, {
      title: '供应商主物料品牌',
      dataIndex: 'itemBrand',
      width: '4%',
      render: (value, row, index) => {
        if (value) {
          return value.length > 8 ? (
            <Tooltip placement="bottom" title={value}> {value && `${value.slice(0, 8)}...`}  </Tooltip>) : value;
        }
      },
    }, {
      title: '供货产品明细',
      dataIndex: 'itemDetail',
      width: '4%',
      render: (value, row, index) => {
        if (value) {
          return value.length > 8 ? (
            <Tooltip placement="bottom" title={value}> {value && `${value.slice(0, 8)}...`}  </Tooltip>) : value;
        }
      },
    }, {
      title: '合作开始时间',
      dataIndex: 'approveDate',
      width: '3%',
    }, {
      title: '供应商成立日期',
      dataIndex: 'registerDate',
      width: '3%',
    }, {
      title: '供应商成立年限',
      dataIndex: 'regYears',
      width: '3%',
    }, {
      title: '合同性质',
      dataIndex: 'contractProperty',
      width: '3%',
    }, {
      title: '账期',
      dataIndex: 'paymentTermDesc',
      width: '3%',
    }, {
      title: '付款方式',
      dataIndex: 'payMethodDesc',
      width: '4%',
    }, {
      title: '税种',
      dataIndex: 'invTypeName',
      width: '4%',
    }, {
      title: '税率',
      dataIndex: 'taxRate',
      width: '3%',
    }, {
      title: '配送区域',
      dataIndex: 'suppRegion',
      width: '6%',
      render: (value, row, index) => {
        if (value) {
          return value.length > 8 ? (
            <Tooltip placement="bottom" title={value}> {value && `${value.slice(0, 8)}...`}  </Tooltip>) : value;
        }
      },
    }, {
      title: '配送方式',
      dataIndex: 'shippingMethod',
      width: '4%',
    }, {
      title: '服务品牌',
      dataIndex: 'serviceBrand',
      width: '4%',
    }, {
      title: '类别',
      dataIndex: 'suppProps',
      width: '4%',
      render: (value, row, index) => {
        if (value) {
          return value.length > 8 ? (
            <Tooltip placement="bottom" title={value}> {value && `${value.slice(0, 8)}...`}  </Tooltip>) : value;
        }
      },
    }, {
      title: '供应商来源',
      dataIndex: 'gysly',
      width: '4%',
      render: (value, row, index) => {
        if (value) {
          return value.length > 8 ? (
            <Tooltip placement="bottom" title={value}> {value && `${value.slice(0, 8)}...`}  </Tooltip>) : value;
        }
      },
    }, {
      title: '联系人',
      dataIndex: 'contPerson',
      width: '3%',
    }, {
      title: '联系电话',
      dataIndex: 'tel',
      width: '3%',
    }, {
      title: '电子邮箱',
      dataIndex: 'email',
      width: '3%',
    }, {
      title: '开户银行',
      dataIndex: 'suppBank',
      width: '4%',
      render: (value, row, index) => {
        if (value) {
          return value.length > 8 ? (
            <Tooltip placement="bottom" title={value}> {value && `${value.slice(0, 8)}...`}  </Tooltip>) : value;
        }
      },
    }, {
      title: '开户行账号',
      dataIndex: 'bankAccount',
      width: '3%',
      render: (value, row, index) => {
        if (value) {
          return value.length > 10 ? (
            <Tooltip placement="bottom" title={value}> {value && `${value.slice(0, 8)}...`}  </Tooltip>) : value;
        }
      },
    }, {
      title: '联系地址',
      dataIndex: 'detailAddr',
      width: '4%',
      render: (value, row, index) => {
        if (value) {
          return value.length > 8 ? (
            <Tooltip placement="bottom" title={value}> {value && `${value.slice(0, 8)}...`}  </Tooltip>) : value;
        }
      },
    }, {
      title: '备注',
      dataIndex: 'remark',
      width: '3%',
      render: (value, row, index) => {
        if (value) {
          return value.length > 8 ? (
            <Tooltip placement="bottom" title={value}> {value && `${value.slice(0, 8)}...`}  </Tooltip>) : value;
        }
      },
    }
    ],
  };

  return (
    <Card>
      <DataTable {...tableProps} />
    </Card>
  );
};

export default connect(({ suppList, loading }) => ({ suppList, loading }))(SuppList);
