import { Input, Modal, Tooltip,DatePicker } from 'antd';
import { connect } from 'dva';
import moment from 'moment';
import { routerRedux } from 'dva/router';
import React from 'react';

import { DataTable, UdcSelect } from '../../../components';
import { config, stringUtils } from '../../../utils';
import { CascaderItem, ExcelImport } from '../../components';

const { api } = config;
const { excel } = api;
const { exportExcelURL } = excel;
const { RangePicker } = DatePicker;

const Items = ({ dispatch, items, loading }) => {
  const { list, total, createBtn, editBtn, invalidBtn, trialBtn, historyBtn, showUploadModal, supplier } = items;

  const domain = 'items';
  const dateFormat = 'YYYY-MM-DD';
  const createDateFrom = stringUtils.queryURL('createDateFrom');
  const createDateTo = stringUtils.queryURL('createDateTo');
  const approveDateFrom = stringUtils.queryURL('approveDateFrom');
  const approveDateTo = stringUtils.queryURL('approveDateTo');

  const confirm = Modal.confirm;
  // 接收路径上的参数
  const cccCode = stringUtils.queryURL('cccCode') ? stringUtils.queryURL('cccCode').split('%2C') : [];

  const tableProps = {
    rowKey: 'id',
    sortBy: 'createTime',
    sortDirection: 'DESC',
    limit: stringUtils.queryURL('limit'),
    offset: stringUtils.queryURL('offset'),
    scroll: { x: '215%', y: 400 },
    domain,
    dispatch,
    loading,
    total,
    showAdd: false,
    showEdit: false,
    showDelete: false,
    dataSource: list,
    showUpload: !supplier,
    handleDownload: {
      requestUrl: `${exportExcelURL}/item`,
      requestParam: window.location.search,
    },
    filter: [{
      title: '物料',
      dataIndex: 'itemCode',
      tag: <Input placeholder="请输入名称/编号" />,
      options: {
        initialValue: stringUtils.queryURL('itemCode'),
      },
    }, {
      title: '物料类别',
      dataIndex: 'cccCode',
      tag: <CascaderItem placeholder="选择大类/中类/小类" changeOnSelect={true} />,
      options: {
        initialValue: cccCode,
      },
    }, {
      title: '物料状态',
      dataIndex: 'itemStatus',
      tag: <UdcSelect domain="ITEM" code="ITEM_STATUS" />,
      options: {
        initialValue: stringUtils.queryURL('itemStatus'),
      },
    }, {
      title: '物料属性',
      dataIndex: 'itemProp',
      tag: <UdcSelect domain="EDP" code="ITEM_PROP" />,
      options: {
        initialValue: stringUtils.queryURL('itemProp'),
      },
    }, {
      title: '创建时间',
      dataIndex: 'createDate',
      options: {
        initialValue: createDateFrom ? [moment(createDateFrom, dateFormat), moment(createDateTo, dateFormat)] : []
      },
      tag: <RangePicker format="YYYY-MM-DD" style={{ width: '100%' }} />,
    }, {
      title: '转正时间',
      dataIndex: 'approveDate',
      options: {
        initialValue: approveDateFrom ? [moment(approveDateFrom, dateFormat), moment(approveDateTo, dateFormat)] : []
      },
      tag: <RangePicker format="YYYY-MM-DD" style={{ width: '100%' }} />,
    }],
    columns: [{
      title: '编号',
      dataIndex: 'outerCode',
      className: 'alignCenter noWrap',
      sorter: true,
      width: '4%',
    }, {
      title: '临时编号',
      dataIndex: 'itemCode',
      className: 'alignCenter noWrap',
      sorter: true,
      width: '4%',
    }, {
      title: '名称',
      dataIndex: 'itemName',
      className: 'alignLeft',
      sorter: true,
      width: '3%',
      render: (value) => {
        if (value) {
          return value.length > 15 ? <Tooltip placement="bottom" title={value}>
            {value && `${value.slice(0, 15)}...`}
          </Tooltip> : value;
        } else {
          return '无';
        }
      },
    }, {
      title: '物料缩写',
      dataIndex: 'memCode',
      className: 'alignLeft',
      width: '3%',
      render: (value) => {
        if (value) {
          return value.length > 10 ? <Tooltip placement="bottom" title={value}>
            {value && `${value.slice(0, 10)}...`}
          </Tooltip> : value;
        } else {
          return '无';
        }
      },
    }, {
      title: '品牌',
      dataIndex: 'brand',
      width: '3%',
      render: (value) => {
        if (value) {
          return value.length > 10 ? <Tooltip placement="bottom" title={value}>
            {value && `${value.slice(0, 10)}...`}
          </Tooltip> : value;
        } else {
          return '无';
        }
      },
    }, {
      title: '物料类型',
      dataIndex: 'typeName',
      width: '4%',
    }, {
      title: '规格型号',
      dataIndex: 'spec',
      className: 'alignLeft',
      width: '3%',
      render: (value) => {
        if (value) {
          return value.length > 10 ?
            <Tooltip placement="bottom" title={value}>
              {value && `${value.slice(0, 10)}...`}
            </Tooltip> : value;
        } else {
          return '无';
        }
      },
    }, {
      title: '物料状态',
      dataIndex: 'itemStatusName',
      width: '3%',
    }, {
      title: '盘点类型',
      dataIndex: 'itemStakeTypeName',
      width: '3%',
    }, {
      title: '物料属性',
      dataIndex: 'itemPropName',
      width: '3%',
    }, {
      title: '替代物料编号',
      dataIndex: 'repItemCode',
      className: 'alignCenter noWrap',
      width: '4%',
    }, {
      title: '替代物料名称',
      dataIndex: 'repItemName',
      width: '4%',
      render: (value) => {
        if (value) {
          return value.length > 15 ? <Tooltip placement="bottom" title={value}>
            {value && `${value.slice(0, 15)}...`}
          </Tooltip> : value;
        } else {
          return '无';
        }
      },
    }, {
      title: '供货厂家数',
      dataIndex: 'suppNum',
      width: '4%',
    }, {
      title: '询价周期(月)',
      dataIndex: 'pricePeriod',
      width: '4%',
    }, {
      title: '主计量单位',
      dataIndex: 'uomName',
      width: '4%',
    }, {
      title: '采购价格仓库',
      dataIndex: 'whPropName',
      width: '4%',
    }, {
      title: '配送类型',
      dataIndex: 'distPropName',
      width: '3%',
    }, {
      title: '仓库类型',
      dataIndex: 'whTypeName',
      width: '3%',
    }, {
      title: '产地',
      dataIndex: 'origin',
      width: '2%',
    }, {
      title: '含税单价',
      dataIndex: 'itemPrice',
      width: '3%',
    }, {
      title: '存储方式',
      dataIndex: 'storageModeName',
      width: '3%',
    }, {
      title: '税种',
      dataIndex: 'taxCodeName',
      width: '3%',
    }, {
      title: '订货周期',
      dataIndex: 'orderPeriod',
      width: '3%',
    }, {
      title: '存储条件',
      dataIndex: 'storageCondition',
      width: '3%',
    }, {
      title: '税率',
      dataIndex: 'taxRate',
      width: '3%',
    }, {
      title: '最小订货数量',
      dataIndex: 'moq',
      width: '4%',
    }, {
      title: '保质期',
      dataIndex: 'storeValueDays',
      width: '3%',
    }, {
      title: '创建时间',
      dataIndex: 'createTime',
      width: '4%',
    }, {
      title: '转正时间',
      dataIndex: 'approveDate',
      width: '4%',
    }],
    buttons: [{
      key: 'create',
      type: 'primary',
      name: '新增',
      hidden: createBtn,
      disabled: createBtn,
      requiredSelected: 0,
      cb: (selectedKeys) => {
        dispatch({
          type: `${domain}/getSingle`,
          payload: {
            mode: 'create',
          },
        });
      },
    }, {
      key: 'edit',
      type: 'primary',
      name: '修改',
      hidden: editBtn,
      disabled: editBtn,
      requiredSelected: 1,
      cb: (selectedKeys) => {
        dispatch({
          type: `${domain}/goToEdit`,
          payload: {
            mode: 'update',
            id: selectedKeys[0],
          },
        });
      },
    }, {
      key: 'invalid',
      type: 'primary',
      name: '作废',
      hidden: invalidBtn,
      disabled: invalidBtn,
      requiredSelected: 1,
      cb: (selectedKeys) => {
        confirm({
          title: '确定要作废吗?',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            dispatch({
              type: `${domain}/delete`,
              payload: {
                ids: selectedKeys,
              },
            });
          },
        });
      }
    }, {
      key: 'deactivate',
      type: 'primary',
      name: '停用',
      hidden: invalidBtn,
      disabled: invalidBtn,
      requiredSelected: 1,
      cb: (selectedKeys, searchBarForm, selectedRows) => {
        confirm({
          title: '确定要停用吗?',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            dispatch({
              type: `${domain}/deactivate`,
              payload: {
                selectedRow: selectedRows[0],
              },
            });
          },
        });
      }
    }, {
      key: 'recovery',
      type: 'primary',
      name: '停用恢复',
      hidden: invalidBtn,
      disabled: invalidBtn,
      requiredSelected: 1,
      cb: (selectedKeys, searchBarForm, selectedRows) => {
        confirm({
          title: '确定要停用恢复吗?',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            dispatch({
              type: `${domain}/recover`,
              payload: {
                selectedRow: selectedRows[0],
              },
            });
          },
        });
      }
    }, {
      key: 'trial',
      type: 'primary',
      name: '提起试制',
      hidden: trialBtn,
      disabled: trialBtn,
      requiredSelected: 1,
      cb: (selectedKeys) => {
        dispatch({
          type: `${domain}/trial`,
          payload: {
            ids: selectedKeys,
          },
        });
      },
    }, {
      key: 'prices',
      type: 'primary',
      name: '物料价格',
      hidden: historyBtn,
      disabled: historyBtn,
      requiredSelected: 1,
      cb: (selectedKeys) => {
        dispatch(routerRedux.push(`/price-mgmt/prices/${selectedKeys[0]}?mode=view&from=item`));
      },
    }],
  };

  const uploadModal = {
    domain,
    dispatch,
    showModal: showUploadModal,
    dataSource: [{
      aim: 'item',
      name: '新原料',
      temp: 'New_Item',
      tempName: '新原料',
    }],
  };

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

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