import React from 'react';
import { connect } from 'dva';
import {Input, Tooltip, Modal, Icon, DatePicker} from 'antd';
import { config, dataUtils,stringUtils } from '@utils';
import { DataTable, UdcSelect, SuggestSelect } from '@components';
import './index.less';
import moment from 'moment';


const { api } = config;
const { excel } = api;
const { exportExcelURL } = excel;
const { RangePicker } = DatePicker;
const dateFormat = 'YYYY-MM-DD';
const approveDateFrom = stringUtils.queryURL('approveDateFrom');
const approveDateTo = stringUtils.queryURL('approveDateTo');
const Suppliers = ({ dispatch, suppliers, loading }) => {
  const { list, total, editBtn, approvalBtn, adjustBtn, currentItem, supplier } = suppliers;

  const domain = 'suppliers';
  const confirm = Modal.confirm;

  const tableProps = {
    rowKey: 'id',
    limit: stringUtils.queryURL('limit'),
    offset: stringUtils.queryURL('offset'),
    sortBy: 'overdueDays1Flag',
    sortDirection: 'DESC',
    scroll: { x: '210%', y: 400 },
    domain,
    dispatch,
    loading,
    total,
    showAdd: false,
    showEdit: false,
    showDelete: false,
    dataSource: list,
    handleMail: (selectedRowKeys, selectedRows) => {
    },
    handlePrint: (selectedRowKeys, selectedRows) => {
    },
    handleDownload: {
      requestUrl: `${exportExcelURL}/supp`,
      requestParam: window.location.search,
    },
    filter: [{
      title: '供应商',
      dataIndex: 'suppCodeName',
      tag: <Input placeholder="请输入名称/编号" />,
      options: {
        initialValue: currentItem.suppCodeName,
      },
    }, {
      title: '供货区域',
      dataIndex: 'region',
      tag: <SuggestSelect apiName="regions" mode="multiple" />,
      options: {
        initialValue: currentItem.region,
      },
    }, {
      title: '供应商状态',
      dataIndex: 'suppStatus',
      tag: <UdcSelect domain="SUPP" code="SUPP_STATUS" />,
      options: {
        initialValue: currentItem.suppStatus,
      },
    }, {
      title: '发票类型',
      dataIndex: 'invTypeList',
      tag: <UdcSelect domain="SRM" code="INV_TYPE" />,
      options: {
        initialValue: currentItem.invTypeList,
      },
    }, {
      title: '物料品类',
      dataIndex: 'gysylsx',
      tag: <UdcSelect domain="SUPP" code="GYSYLSX" mode="multiple" />,
      options: {
        initialValue: currentItem.gysylsx,
      },
    }, {
      title: '转正时间',
      dataIndex: 'approveDate',
      options: {
        initialValue: approveDateFrom ? [moment(approveDateFrom, dateFormat), moment(approveDateTo, dateFormat)] : []
      },
      tag: <RangePicker format="YYYY-MM-DD" style={{ width: '100%' }} />,
    }
    ,{
      title: '审批状态',
      dataIndex: 'approveStatus',
      tag: <UdcSelect domain="SUPP" code="SUPP_APPR_STATUS" />,
      options: {
        initialValue: currentItem.approveStatus,
      },
    }, {
      title: '任务节点',
      dataIndex: 'activeTaskKey',
      options: {
        initialValue: currentItem.activeTaskKey,
      },
      tag: <SuggestSelect apiName="taskDefs" params={{ defKeys: ['SuppliperAddition'] }} optionKey="code" />,
    }, {
      title: '流程状态',
      dataIndex: 'bpmStatus',
      options: {
        initialValue: currentItem.bpmStatus || 'NONE',
      },
      tag: <UdcSelect domain="SRM" code="TRANSACT_STATUS" />,
    }],
    columns: [//
      {
        title: '警示',
        dataIndex: 'overdueDays1Flag',
        width: '2%',
        render: (value) => {
          return (
            <Icon type={value ? 'warning' : ''} style={value ? { color: '#f5222d', fontSize: '18px' } : {}}
            />);
        },
      }, {
        title: '编号',
        dataIndex: 'suppCode',
        className: 'alignCenter',
        sorter: true,
        width: '4%',
      }, {
        title: '名称',
        dataIndex: 'suppName',
        className: 'alignLeft',
        sorter: true,
        width: '9%',
      }, {
        title: '类型',
        dataIndex: 'suppTypeName',
        className: 'alignCenter',
        width: '4%',
      },{
        title: '状态',
        dataIndex: 'suppStatusName',
        className: 'alignCenter',
        width: '3%',
      },  {
        title: '审批状态',
        dataIndex: 'approveStatusName',
        className: 'alignCenter',
        width: '4%',
      }, {
        title: '当前任务',
        dataIndex: 'activeTaskName',
        className: 'alignLeft',
        width: '5%',
      },{
        title: '供货区域',
        dataIndex: 'regionName',
        className: 'alignCenter',
        sorter: false,
        width: '5%',
        render: (value, row, index) => {
          if (value) {
            return value.length > 12 ? <Tooltip placement="bottom" title={value}>
              {value && `${value.slice(0, 12)}...`}
            </Tooltip> : value;
          } else {
            return '无';
          }
        },
      }, {
        title: '可供应物料',
        dataIndex: 'gysylsxName',
        className: 'alignCenter',
        sorter: false,
        width: '5%',
        render: (value, row, index) => {
          if (value) {
            return value.length > 12 ? <Tooltip placement="bottom" title={value}>
              {value && `${value.slice(0, 12)}...`}
            </Tooltip> : value;
          } else {
            return '无';
          }
        },
      }, {
        title: '供应商性质',
        dataIndex: 'gysxzName',
        className: 'alignCenter',
        sorter: false,
        width: '5%',
        render: (value, row, index) => {
          if (value) {
            return value.length > 12 ? <Tooltip placement="bottom" title={value}>
              {value && `${value.slice(0, 12)}...`}
            </Tooltip> : value;
          } else {
            return '无';
          }
        },
      }, {
        title: '电子邮箱',
        dataIndex: 'email',
        className: 'alignCenter',
        sorter: false,
        width: '6%',
      }, {
        title: '公司电话',
        dataIndex: 'suppTel',
        className: 'alignCenter',
        sorter: false,
        width: '5%',
      }, {
        title: '法人代表',
        dataIndex: 'repr',
        className: 'alignCenter',
        sorter: false,
        width: '4%',
      }, {
        title: '成立日期',
        dataIndex: 'registerDate',
        className: 'alignCenter',
        sorter: false,
        width: '5%',
      }, {
        title: '注册资金(万)',
        dataIndex: 'registerFund',
        className: 'alignRight',
        sorter: false,
        width: '5%',
      }, {
        title: '负责人',
        dataIndex: 'bussPic',
        className: 'alignCenter',
        sorter: false,
        width: '4%',
      }, {
        title: '负责人电话',
        dataIndex: 'bussPicTel',
        className: 'alignCenter',
        sorter: false,
        width: '5%',
      }, {
        title: '负责人邮箱',
        dataIndex: 'bussPicMail',
        className: 'alignCenter',
        sorter: false,
        width: '6%',
      }, {
        title: '自我介绍',
        dataIndex: 'remark',
        className: 'alignLeft',
        sorter: false,
        width: '7%',
        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: 'approveDate',
        className: 'alignLeft',
        width: '6%',
        render: (value, row, index) => {
          return dataUtils.dtm(value);
        },
      }],
    buttons: [{
      key: 'edit',
      type: 'primary',
      name: '修改',
      hidden: editBtn,
      disabled: editBtn,
      requiredSelected: 1,
      cb: (selectedKeys) => {
        dispatch({
          type: `${domain}/getSingle`,
          payload: {
            mode: 'update',
            id: selectedKeys[0],
          },
        });
      },
    },
    {
      key: 'updateQualify',
      type: 'primary',
      name: '仅更新资质',
      hidden: editBtn,
      requiredSelected: 1,
      cb: (selectedKeys) => {
        dispatch({
          type: `${domain}/getSingle`,
          payload: {
            mode: 'updateQualify',
            id: selectedKeys[0],
          },
        });
      },
    },
    {
      key: 'approval',
      type: 'primary',
      name: '审批',
      requiredSelected: 1,
      hidden: approvalBtn,
      disabled: approvalBtn,
      cb: (selectedKeys) => {
        dispatch({
          type: `${domain}/getSingle`,
          payload: {
            mode: 'approval',
            id: selectedKeys[0],
          },
        });
      },
    },
    //  {
    //   key: 'close',
    //   type: 'primary',
    //   name: '作废',
    //   requiredSelected: 1,
    //   cb: (selectedKey) => {
    //   //  const key = selectedKey;
    //     dispatch({
    //       type: `${domain}/delete`,
    //       payload: {
    //         id: selectedKey,
    //         function: (key = selectedKey) => {
    //           confirm({
    //             title: '确定作废此供应商吗',
    //             okText: '确定',
    //             okType: 'danger',
    //             cancelText: '取消',
    //             onOk() {
    //               dispatch({
    //                 type: `${domain}/disable`,
    //                 payload: {
    //                   id: key,
    //                 },
    //               });
    //             },
    //           });
    //         }
    //       },
    //     });

    //   },
    // },

    {
      key: 'qualify',
      type: 'primary',
      name: '资质详情',
      requiredSelected: 1,
      hidden: supplier.supplier,
      cb: (selectedKeys) => {
        dispatch({
          type: `${domain}/getSingle`,
          payload: {
            mode: 'qualify',
            id: selectedKeys[0],
          },
        });
      },
    },
    {
      key: 'adjust',
      type: 'primary',
      name: '供应商调整',
      requiredSelected: 1,
      hidden: !adjustBtn,
      cb: (selectedKeys) => {
        dispatch({
          type: `${domain}/getSingle`,
          payload: {
            mode: 'adjust',
            id: selectedKeys[0],
          },
        });
      },
    }],
  };

  return (
    <div className="content-inner">
      <DataTable {...tableProps} />
    </div>
  );
};

export default connect(({ suppliers, loading }) => ({ suppliers, loading }))(Suppliers);
