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

const Option = Select.Option;

const RangePicker = DatePicker.RangePicker;
const dateFormat = 'YYYY-MM-DD';

const { api } = config;
const { excel } = api;
const { exportExcelURL } = excel;
const Contracts = ({ dispatch, contracts, loading }) => {
  const { list, total, addBtnFlag, editBtnFlag, viewBtnFlag, approvalBtnFlag, cancelBtnFlag, sealUploadBtnFlag, deleteBtnFlag } = contracts;

  const domain = 'contracts';
  const domainCN = '合同列表';

  const signDateFrom = stringUtils.queryURL('signDateFrom');
  const signDateTo = stringUtils.queryURL('signDateTo');

  const confirm = Modal.confirm;
  const tableProps = {
    rowKey: 'id',
    limit: stringUtils.queryURL('limit'),
    offset: stringUtils.queryURL('offset'),
    sortBy: stringUtils.queryURL('sortBy') || 'id',
    sortDirection: stringUtils.queryURL('sortDirection') || 'DESC',
    scroll: {
      x: '200%',
      y: 400
    },
    domain,
    dispatch,
    loading,
    total,
    showAdd: addBtnFlag,
    showEdit: editBtnFlag,
    showView: viewBtnFlag,
    showDelete: false,
    dataSource: list,
    handleDownload: {
      requestUrl: `${exportExcelURL}/contract`,
      requestParam: window.location.search,
    },
    filter: [{
      title: '合同',
      dataIndex: 'contractCodeName',
      options: {
        initialValue: stringUtils.queryURL('contractCodeName'),
      },
      tag: <Input placeholder="请输入编号/名称" />,
    }, {
      title: '采购方',
      dataIndex: 'ouCodeName',
      options: {
        initialValue: stringUtils.queryURL('ouCodeName'),
      },
      tag: <Input placeholder="请输入编号/名称" />,
    }, {
      title: '供应商',
      dataIndex: 'suppCodeName',
      options: {
        initialValue: stringUtils.queryURL('suppCodeName'),
      },
      tag: <Input placeholder="请输入编号/名称" />,
    },
    {
      title: '合同状态',
      dataIndex: 'checkStatus',
      options: {
        initialValue: stringUtils.queryURL('checkStatus'),
      },
      tag: <UdcSelect domain="CONTRACT" code="CONTRACT_STATUS" />,
    },
    {
      title: '合同类型',
      dataIndex: 'contractType',
      options: {
        initialValue: stringUtils.queryURL('contractType'),
      },
      tag: <UdcSelect domain="CONTRACT" code="CONTRACT_TYPE" />,
    },
    {
      title: '签署日期',
      dataIndex: 'signDate',
      options: {
        initialValue: signDateFrom ? [moment(signDateFrom, dateFormat), moment(signDateTo, dateFormat)] : []
      },
      tag: <RangePicker format="YYYY-MM-DD" style={{ width: '100%' }} />,
    }, {
      title: '任务节点',
      dataIndex: 'activeTaskKey',
      options: {
        initialValue: stringUtils.queryURL('activeTaskKey'),
      },
      tag: (
        <SuggestSelect
          apiName="taskDefs"
          params={{ defKeys: ['ATypeContract', 'BCTypeContract'] }}
          optionKey="code"
        />
      ),
    }, {
      title: '流程状态',
      dataIndex: 'bpmStatus',
      options: {
        initialValue: stringUtils.queryURL('bpmStatus') || 'NONE',
      },
      tag: <UdcSelect domain="SRM" code="TRANSACT_STATUS" />,
    }
    ],
    columns: [{
      title: '编号',
      dataIndex: 'contractCode',
      sorter: true,
      width: '9%',
      className: 'noWrap',
    }, {
      title: '名称',
      dataIndex: 'contractName',
      sorter: true,
      width: '7%',
      className: 'alignLeft',
      render: (value, row, index) => {
        if (value) {
          return value.length > 8 ? (
            <Tooltip placement="bottom" title={value}> {value && `${value.slice(0, 8)}...`}  </Tooltip>) : value;
        } else {
          return '无';
        }
      },
    }, {
      title: '类型',
      dataIndex: 'contractTypeName',
      width: '3%',
    }, {
      title: '状态',
      dataIndex: 'checkStatusName',
      width: '3%',
      className: 'noWrap',
    }, {
      title: '当前任务',
      dataIndex: 'activeTaskName',
      className: 'alignLeft',
      width: '5%',
    }, {
      title: '签署日期',
      dataIndex: 'signDate',
      sorter: true,
      width: '5%',
      className: 'noWrap',
    }, {
      title: '总金额',
      dataIndex: 'amount',
      sorter: true,
      width: '4%',
      className: 'alignRight',
    }, {
      title: '采购方编号',
      dataIndex: 'ouCode',
      sorter: true,
      width: '5%',
      className: 'noWrap',
    }, {
      title: '采购方名称',
      dataIndex: 'ouName',
      sorter: true,
      width: '9%',
      className: 'alignLeft',
      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: 'suppCode',
      sorter: true,
      width: '5%',
      className: 'noWrap',
    }, {
      title: '供应商名称',
      dataIndex: 'suppName',
      sorter: true,
      width: '9%',
      className: 'alignLeft',
      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: 'amountTotal',
      sorter: true,
      width: '5%',
      className: 'alignRight',
    }, {
      title: '金额完成率(%)',
      dataIndex: 'amountRate',
      width: '4%',
      className: 'alignRight',
    }, {
      title: '总数量',
      dataIndex: 'itemCount',
      sorter: true,
      width: '4%',
      className: 'alignRight',
    }, {
      title: '已完成数量',
      dataIndex: 'itemCountTotal',
      sorter: true,
      width: '5%',
      className: 'alignRight',
    }, {
      title: '数量完成率(%)',
      dataIndex: 'itemCountRate',
      width: '4%',
      className: 'alignRight',
    }, {
      title: '币种',
      dataIndex: 'currencyName',
      width: '3%',
      className: 'noWrap',
    }, {
      title: '生效日期',
      dataIndex: 'timeInForceDate',
      sorter: true,
      width: '5%',
      className: 'noWrap',
    }, {
      title: '失效日期',
      dataIndex: 'deadDate',
      sorter: true,
      width: '5%',
      className: 'noWrap',
    },],
    buttons: [
      {
        key: 'approval',
        type: 'primary',
        name: '审批',
        hidden: !approvalBtnFlag,
        requiredSelected: 1,
        cb: (selectedKeys) => {
          dispatch({
            type: `${domain}/getSingle`,
            payload: {
              mode: 'approval',
              id: selectedKeys[0],
            },
          });
        },
      },
      {
        key: 'cancel',
        type: 'primary',
        name: '作废',
        requiredSelected: 1,
        hidden: !cancelBtnFlag,
        cb: (selectedKeys) => {
          confirm({
            title: '确定要作废吗?',
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            onOk() {
              dispatch({
                type: `${domain}/updateStatus`,
                payload: {
                  id: selectedKeys[0],
                  checkStatus: '4',
                },
              });
            },
          });
        },
      },
      {
        key: 'sealUpload',
        type: 'primary',
        name: '盖章合同上传',
        requiredSelected: 1,
        hidden: !sealUploadBtnFlag,
        cb: (selectedKeys) => {
          dispatch({
            type: `${domain}/getSingle`,
            payload: {
              id: selectedKeys[0],
              mode: 'view',
              otherProps: {
                uploadSeal: true,
              }
            },
          });
        },
      },
      {
        key: 'delete',
        type: 'primary',
        name: '终止',
        requiredSelected: 1,
        hidden: !deleteBtnFlag,
        cb: (selectedKeys) => {
          confirm({
            title: '确定要终止吗?',
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            onOk() {
              dispatch({
                type: `${domain}/deleteContract`,
                payload: {
                  id: selectedKeys[0]
                },
              });
            },
          });
        },
      },
    ],
  };

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

export default connect(({ contracts, loading }) => ({ contracts, loading }))(Contracts);
