import { Input, Tooltip ,Modal} from 'antd';
import { connect } from 'dva';
import React from 'react';
import { DataTable, SuggestSelect, UdcSelect } from '../../../components';
import { config, stringUtils } from '../../../utils';
import { CascaderItem } from '../../components';
const confirm = Modal.confirm;
const { api } = config;
const { excel } = api;
const { exportExcelURL } = excel;
const Items = ({ dispatch, itemAccess, loading }) => {
  const { list, total,cancelBtn } = itemAccess;
  const domain = 'itemAccess';
  // 接收路径上的参数
  const cccCode = stringUtils.queryURL('cccCode') ? stringUtils.queryURL('cccCode').split('%2C') : [];
  const suppArea = stringUtils.queryURL('suppArea') ? stringUtils.queryURL('suppArea').split('%2C') : [];

  const tableProps = {
    rowKey: 'id',
    sortBy: 'id',
    limit: stringUtils.queryURL('limit'),
    offset: stringUtils.queryURL('offset'),
    sortDirection: 'DESC',
    scroll: { x: '140%', y: 350 },
    domain,
    dispatch,
    loading,
    total,
    enableDoubleClick: false,
    showAdd: false,
    showDelete: false,
    showView: false,
    showEdit: false,
    dataSource: list,
    handleDownload: {
      requestUrl: `${exportExcelURL}/trail`,
      requestParam: window.location.search,
    },
    filter: [{
      title: '供应商',
      dataIndex: 'suppCode',
      options: {
        initialValue: stringUtils.queryURL('suppCode'),
      },
      tag: <Input placeholder="请输入名称/编号"/>,
    }, {
      title: '物料',
      dataIndex: 'itemCode',
      options: {
        initialValue: stringUtils.queryURL('itemCode'),
      },
      tag: <Input placeholder="请输入名称/编号"/>,
    }, {
      title: '物料类别',
      dataIndex: 'cccCode',
      options: {
        initialValue: cccCode,
      },
      tag: <CascaderItem placeholder="请选择大类/中类/小类" changeOnSelect={true}/>,
    }, {
      title: '审批编号',
      dataIndex: 'suppItemCode',
      options: {
        initialValue: stringUtils.queryURL('suppItemCode'),
      },
      tag: <Input placeholder="请输入审批编号"/>,
    }, {
      title: '供货区域',
      dataIndex: 'suppArea',
      options: {
        initialValue: suppArea,
      },
      tag: <SuggestSelect apiName="regions" mode="multiple"/>,
    }, {
      title: '样测部门',
      dataIndex: 'useOrg',
      options: {
        initialValue: stringUtils.queryURL('useOrg'),
      },
      tag: <UdcSelect domain="SRM" code="TEST_ORG_TYPE"/>,
    },{
      title: '批测部门',
      dataIndex: 'btOrg',
      options: {
        initialValue: stringUtils.queryURL('btOrg'),
      },
      tag: <SuggestSelect apiName="trialOrg" />,
    }, {
      title: '审批状态',
      dataIndex: 'checkStatus',
      options: {
        initialValue: stringUtils.queryURL('checkStatus'),
      },
      tag: <UdcSelect domain="ITEM" code="ITEM_SUPP_STATUS"/>,
    }, {
      title: '任务节点',
      dataIndex: 'activeTaskKey',
      options: {
        initialValue: stringUtils.queryURL('activeTaskKey'),
      },
      tag: <SuggestSelect apiName="taskDefs" params={{ defKeys: ['SuppliperItem'] }} optionKey="code"/>,
    }, {
      title: '流程状态',
      dataIndex: 'bpmStatus',
      options: {
        initialValue: stringUtils.queryURL('bpmStatus'),
      },
      tag: <UdcSelect domain="SRM" code="TRANSACT_STATUS"/>,
    }],
    columns: [{
      title: '审批编号',
      dataIndex: 'suppItemCode',
      className: 'alignCenter',
      sorter: true,
      width: '10%',
    }, {
      title: '物料编号',
      dataIndex: 'outerCode',
      className: 'alignCenter',
      sorter: true,
      width: '8%',
    }, {
      title: '临时编号',
      dataIndex: 'itemCode',
      className: 'alignCenter',
      sorter: true,
      width: '8%',
    }, {
      title: '物料名称',
      dataIndex: 'itemName',
      className: 'alignLeft',
      sorter: true,
      width: '10%',
      render: (value) => {
        if (value) {
          return value.length > 15 ? <Tooltip placement="bottom" title={value}>
            {value && `${value.slice(0, 15)}...`}
          </Tooltip> : value;
        } else {
          return '无';
        }
      },
    }, {
      title: '供应商名称',
      dataIndex: 'suppName',
      className: 'alignLeft',
      sorter: true,
      width: '10%',
    }, {
      title: '供货区域',
      dataIndex: 'suppArea',
      className: 'alignCenter',
      sorter: true,
      width: '7%',
    }, {
      title: '样测部门',
      dataIndex: 'orgType',
      className: 'alignCenter',
      sorter: true,
      width: '6%',
    },{
      title: '批测部门',
      dataIndex: 'btOrgName',
      className: 'alignCenter',
      sorter: true,
      width: '6%',
    }, {
      title: '审批状态',
      dataIndex: 'checkStatusName',
      className: 'alignCenter',
      width: '5%',
    }, {
      title: '物料状态',
      dataIndex: 'itemStatusName',
      className: 'alignCenter',
      width: '5%',
    }, {
      title: '当前任务',
      dataIndex: 'activeTaskName',
      className: 'alignLeft',
      width: '8%',
    }, {
      title: '物料缩写',
      dataIndex: 'memCode',
      className: 'alignCenter',
      width: '6%',
      render: (value) => {
        if (value) {
          return value.length > 15 ? <Tooltip placement="bottom" title={value}>
            {value && `${value.slice(0, 15)}...`}
          </Tooltip> : value;
        } else {
          return '无';
        }
      },
    }, {
      title: '品牌',
      dataIndex: 'brandName',
      className: 'alignCenter',
      width: '5%',
      render: (value) => {
        if (value) {
          return value.length > 15 ? <Tooltip placement="bottom" title={value}>
            {value && `${value.slice(0, 15)}...`}
          </Tooltip> : value;
        } else {
          return '无';
        }
      },
    }, {
      title: '规格型号',
      dataIndex: 'spec',
      className: 'alignLeft',
      width: '6%',
      render: (value) => {
        if (value) {
          return value.length > 15 ? <Tooltip placement="bottom" title={value}>
            {value && `${value.slice(0, 15)}...`}
          </Tooltip> : value;
        } else {
          return '无';
        }
      },
    }],
    buttons: [{
      key: 'view',
      type: 'primary',
      name: '查看',
      requiredSelected: 1,
      cb: (selectedKeys) => {
        dispatch({
          type: `${domain}/getView`,
          payload: {
            id: selectedKeys[0],
          },
        });
      },
    }, {
      key: 'approve',
      type: 'primary',
      name: '物料审批',
      requiredSelected: 1,
      cb: (selectedKeys) => {
        dispatch({
          type: `${domain}/getSingle`,
          payload: {
            id: selectedKeys[0],
          },
        });
      },
    },{
      key: 'cancel',
      type: 'primary',
      name: '取消审批',
      hidden: cancelBtn,
      requiredSelected: 1,
      cb: (selectedKeys) => {
        confirm({
          title: '确定要作废吗?',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            dispatch({
              type: `${domain}/delete`,
              payload: {
                id: selectedKeys[0],
              },
            });
          },
        });
      },
    }],
  };
 
  return (
    <div className="content-inner">
      <DataTable {...tableProps} />
    </div>
  );
};

export default connect(({ itemAccess, loading }) => ({ itemAccess, loading }))(Items);
