import React from 'react';
import { connect } from 'dva';
import { DatePicker, Select, Tabs } from 'antd';
import { DataTable, SuggestSelect } from '@components';
import Modal from './Modal';
import styles from './index.less';
const RangePicker = DatePicker.RangePicker;
const Option = Select.Option;
const TabPane = Tabs.TabPane;

const Notification = ({ dispatch, notification, loading }) => {
  const {
    mode,
    currentItem,
    modalVisible,
    todoData,
    warnData,
    infoData,
    activeTab
  } = notification;
  const { todoParams, warnParams, infoParams, isValidRcpt } = notification;

  const domain = 'notification';
  const domainCN = '系统通知';

  const modalProps = {
    dispatch,
    loading,
    mode,
    domain,
    record: currentItem,
    visible: modalVisible,
    maskClosable: false,
    width: '50%',
    readOnly: mode === 'view',
    wrapClassName: 'vertical-center-modal',
    onOk(data) {
      dispatch({
        type: `${domain}/${mode}`,
        payload: data
      });
    },
    onCancel() {
      dispatch({
        type: `${domain}/hideModal`
      });
    }
  };

  const props = {
    rowKey: 'id',
    scroll: { x: '100%' },
    sortBy: 'createTime',
    sortDirection: 'DESC',
    domain,
    dispatch,
    loading,
    showAdd: false,
    showEdit: false,
    showDelete: false
  };

  let filter = [
    {
      title: '消息主题',
      dataIndex: 'subject',
      options: {
        initialValue: ''
      }
    },
    {
      title: '消息状态',
      dataIndex: 'unread',
      tag: (
        <Select allowClear>
          <Option value="1">未读</Option>
          <Option value="0">已读</Option>
        </Select>
      )
    },
    {
      title: '发送时间',
      dataIndex: 'createTime',
      tag: (
        <RangePicker format="YYYY-MM-DD" style={{ width: '100%' }} showTime />
      ),
      options: {
        initialValue: ''
      }
    }
  ];

  if (isValidRcpt) {
    filter = [
      ...filter,
      {
        title: '收件人',
        dataIndex: 'recipientId',
        tag: <SuggestSelect apiName="username" />
      }
    ];
  }

  const columns = [
    {
      title: '消息主题',
      dataIndex: 'msgSubject',
      width: '60%',
      className: 'alignLeft',
      render: (value, row, index) => {
        return (
          <div className={row.msgStatus ? styles.unread : styles.read}>
            {value} {row.msgStatus && <span className={styles.new}>new</span>}
          </div>
        );
      }
    },
    {
      title: '消息类型',
      dataIndex: 'msgEventType',
      width: '20%'
    },
    {
      title: '发送时间',
      dataIndex: 'msgSendTime',
      width: '20%',
      sorter: true
    }
  ];

  const todoProps = {
    ...props,
    total: todoParams.total,
    dataSource: todoData,
    filter: [
      ...filter,
      {
        title: '消息类型',
        dataIndex: 'eventType',
        tag: <SuggestSelect apiName="msgProcess" />,
        options: {
          initialValue: ''
        }
      },
      {
        title: '知会类型',
        dataIndex: 'notify',
        tag: (
          <Select allowClear>
            <Option value="1">是</Option>
            <Option value="0">否</Option>
          </Select>
        )
      }
    ],
    columns
  };

  const warnProps = {
    ...props,
    total: warnParams.total,
    dataSource: warnData,
    filter: [
      ...filter,
      {
        title: '消息类型',
        dataIndex: 'eventType',
        tag: <SuggestSelect apiName="msgProcess" />,
        options: {
          initialValue: ''
        }
      }
    ],
    columns
  };

  const infoProps = {
    ...props,
    total: infoParams.total,
    dataSource: infoData,
    filter: [
      ...filter,
      {
        title: '消息类型',
        dataIndex: 'eventType',
        tag: <SuggestSelect apiName="msgRemind" />,
        options: {
          initialValue: ''
        }
      }
    ],
    columns
  };

  const changeHandle = activeKey => {
    dispatch({
      type: `${domain}/changeTabs`,
      payload: { activeTab: activeKey }
    });
  };

  return (
    <div>
      <Tabs type="card" onChange={changeHandle} activeKey={activeTab}>
        <TabPane tab="待办消息" key="INBOX_TODO">
          <div className="content-inner">
            <DataTable {...todoProps} />
          </div>
        </TabPane>
        <TabPane tab="告警消息" key="INBOX_WARN">
          <div className="content-inner">
            <DataTable {...warnProps} />
          </div>
        </TabPane>
        <TabPane tab="系统消息" key="INBOX_INFO">
          <div className="content-inner">
            <DataTable {...infoProps} />
          </div>
        </TabPane>
      </Tabs>
      {modalVisible && <Modal {...modalProps} />}
    </div>
  );
};

export default connect(({ notification, loading }) => ({
  notification,
  loading
}))(Notification);
