import React from 'react';
import { connect } from 'dva';
import { DatePicker, Tooltip, Modal, Select,Icon } from 'antd';
import { DataTable, UdcSelect, SuggestSelect } from '@components';
import { ExcelImport } from '@bizComponents';

import { stringUtils, config } from '@utils';
import moment from 'moment';

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

const RangePicker = DatePicker.RangePicker;

const Ed = ({ dispatch, ed, loading }) => {
  const { list, total, currentItem, createBtn, editBtn, approvalBtn, disableBtn, showUploadModal, supplier } = ed;
  const confirm = Modal.confirm;
  const Option = Select.Option;

  const domain = 'ed'

  const tableProps = {
    rowKey: 'id',
    limit: stringUtils.queryURL('limit'),
    offset: stringUtils.queryURL('offset'),
    sortBy: 'overdueDays1Flag',
    sortDirection: 'DESC',
    scroll: {
      x: '130%',
      y:400
    },
    domain,
    dispatch,
    loading,
    total,
    dataSource: list,
    showAdd: false,
    showEdit: false,
    showDelete: false,
    showUpload: !supplier,
    handleDownload: {
      requestUrl: `${exportExcelURL}/rpt8d`,
      requestParam: window.location.search,
    },
    filter: [{
      title: '报告单号',
      dataIndex: 'reportCode',
      options: {
        initialValue: currentItem.reportCode,
      },
    }, {
      title: '责任区分',
      dataIndex: 'dutyType',
      tag: <UdcSelect domain="SRM" code="DUTY_TYPE" />,
      options: {
        initialValue: currentItem.dutyType,
      },
    }, {
      title: '报告日期',
      dataIndex: 'reportDate',
      tag: <RangePicker format="YYYY-MM-DD" style={{ width: '100%' }} showTime />,
      options: {
        initialValue: currentItem.reportDateFrom ?
          [moment(currentItem.reportDateFrom), moment(currentItem.reportDateTo)] : '',
      },
    }, {
      title: '审批状态',
      dataIndex: 'approveStatus',
      tag: <UdcSelect domain="SRM" code="APPROVE_STATUS" />,
      options: {
        initialValue: currentItem.approveStatus,
      },
    }, {
      title: '任务节点',
      dataIndex: 'activeTaskKey',
      options: {
        initialValue: currentItem.activeTaskKey,
      },
      tag: <SuggestSelect apiName="taskDefs" params={{ defKeys: ['Report8dAddition'] }} optionKey="code" />,
    }, {
      title: '流程状态',
      dataIndex: 'bpmStatus',
      options: {
        initialValue: currentItem.bpmStatus || 'NONE',
      },
      tag: <UdcSelect domain="SRM" code="TRANSACT_STATUS" />,
    }],
    columns: [{
      title: '警示',
      dataIndex: 'overdueDays1Flag',
      width: '4%',
      render: (value) => {
        return (
          <Icon type={value ? 'warning' : ''} style={value ? { color: '#f5222d', fontSize: '18px' } : {}}
          />);
      },
    },{
      title: '报告单号',
      dataIndex: 'reportCode',
      className: 'alignCenter',
      sorter: true,
      width: '10%',
    }, {
      title: '状态',
      dataIndex: 'reportStatusName',
      className: 'alignCenter',
      width: '7%',
    }, {
      title: '审批状态',
      dataIndex: 'approveStatusName',
      className: 'alignCenter',
      width: '7%',
    }, {
      title: '当前任务',
      dataIndex: 'activeTaskName',
      className: 'alignLeft',
      width: '7%',
    },
    {
      title: '责任区分',
      dataIndex: 'dutyTypeName',
      className: 'alignCenter',
      width: '8%',
    }, {
      title: '责任单位(外部)',
      dataIndex: 'suppName',
      className: 'alignCenter',
      width: '12%',
    }, {
      title: '责任单位(内部)',
      dataIndex: 'ouName',
      className: 'alignCenter',
      width: '12%',
    }, {
      title: '责任角色',
      dataIndex: 'dutyRoleName',
      className: 'alignCenter',
      width: '8%',
    }, {
      title: '报告日期',
      dataIndex: 'reportDate',
      width: '8%',
    }, {
      title: '问题描述',
      dataIndex: 'problemDesc',
      width: '17%',
      className: 'alignLeft',
      render: (value, row, index) => {
        if (value) {
          return value.length > 15 ? <Tooltip placement="bottom" title={value}>
            {value && `${value.slice(0, 15)}...`}
          </Tooltip> : value;
        } else {
          return '无';
        }
      },
    }],
    buttons: [{
      key: 'add',
      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}/getSingle`,
          payload: {
            mode: 'update',
            id: selectedKeys[0],
          },
        });
      },
    }, {
      key: 'approval',
      type: 'primary',
      name: '审批',
      hidden: approvalBtn,
      disabled: approvalBtn,
      requiredSelected: 1,
      cb: (selectedKeys) => {
        dispatch({
          type: `${domain}/getSingle`,
          payload: {
            mode: 'approval',
            id: selectedKeys[0],
          },
        });
      },
    }, {
      key: 'disable',
      type: 'primary',
      name: '作废',
      hidden: disableBtn,
      disabled: disableBtn,
      requiredSelected: 1,
      cb: (selectedKey) => {
        dispatch({
          type: `${domain}/delete`,
          payload: {
            id: selectedKey,
            function: (key = selectedKey) => {
              confirm({
                title: '确定作废此8D报告吗',
                okText: '确定',
                okType: 'danger',
                cancelText: '取消',
                onOk() {
                  dispatch({
                    type: `${domain}/disable`,
                    payload: {
                      id: key,
                    },
                  });
                },
              });
            }
          },
        });
      },
    }],
  };

  const uploadModal = {
    domain,
    dispatch,
    showModal: showUploadModal,
    dataSource: [{
      aim: 'rpt8d',
      name: '8D报告',
      temp: '8DReport',
      tempName: '8D报告',
    }],
  }

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

export default connect(({ ed, loading }) => ({ ed, loading }))(Ed);
