/**
 * Author: Charles
 * Date: 2022.9.13
 * Description: [事件日志]
 */
import React, { useEffect } from 'react';
import { connect } from 'umi';
import { Modal, Tooltip, Table } from 'antd';
import { paginations, mapStatus, mapRiskType, mapRiskSourceType } from '@/constants';
import { StyledEllipsisWrap } from '@/components/style';

const ModalEventLog = props => {
  const {
    dispatch,
    loading,
    dataModal: {
      modalType,
      modalShow,
      modalData: { id },
    },
    dataEventLogList: { records = [], current, size, total },
  } = props;

  useEffect(() => {
    if (modalType === 'View_Event_Log' && modalShow) {
      dispatch({ type: 'Event/getEventRiskLog', payload: { eventId: id } });
    }
  }, [modalType, modalShow]);

  /* 点击分页 */
  const handlePageChange = (current, size) => {
    dispatch({ type: 'Event/getEventRiskLog', payload: { eventId: id, current, size } });
  };

  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      align: 'center',
      fixed: 'left',
      width: 60,
      render(t, r, idx) {
        return idx + 1;
      },
    },
    {
      title: '发送内容',
      dataIndex: 'content',
      align: 'center',
      width: 160,
      render: (t, r) => {
        return (
          <Tooltip placement="top" title={t}>
            <StyledEllipsisWrap maxLine={1}>{t || '-'}</StyledEllipsisWrap>
          </Tooltip>
        );
      },
    },
    {
      title: '接收者信息',
      dataIndex: 'recipient',
      align: 'center',
      width: 160,
      render: (t, r) => {
        return r.type == 2
          ? `${r.recipientName || '-'}（${r.recipient || '-'}）`
          : `${r.recipientName || '-'}`;
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      align: 'center',
      width: 120,
    },
    {
      title: '失败原因',
      dataIndex: 'statusMessage:',
      align: 'center',
      width: 160,
      render: (t, r) => {
        return (
          <Tooltip placement="top" title={t}>
            <StyledEllipsisWrap maxLine={1}>{t || '-'}</StyledEllipsisWrap>
          </Tooltip>
        );
      },
    },
  ];

  const pagination = {
    ...paginations,
    total: total,
    pageSize: size,
    current,
    showSizeChanger: total > 10,
    onChange: (current, pageSize) => {
      handlePageChange(current, pageSize);
    },
    onShowSizeChange: (current, pageSize) => {
      handlePageChange(1, pageSize);
    },
    showTotal(total) {
      return `总共 ${total} 条数据`;
    },
  };

  return (
    <Modal
      title="事件日志"
      placement="right"
      width={1000}
      maskClosable={false}
      onCancel={() => {
        dispatch({ type: 'Event/cancelModal' });
      }}
      visible={modalType === 'View_Event_Log' && modalShow}
      footer={null}
    >
      <Table
        rowKey="id"
        loading={loading}
        dataSource={records}
        columns={columns}
        pagination={pagination}
        scroll={{ x: 1500, y: 600 }}
      />
    </Modal>
  );
};

export default connect(({ Event, loading }) => ({
  ...Event,
  loading: loading.effects['Event/getEventRiskLog'],
}))(ModalEventLog);