/**
 * 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 ModalEventInfo = props => {
  const {
    dispatch,
    loading,
    dataModal: {
      modalType,
      modalShow,
      modalData: { id },
    },
    dataEventRiskList,
  } = props;

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

  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      align: 'center',
      fixed: 'left',
      width: 80,
      render(t, r, idx) {
        return idx + 1;
      },
    },
    {
      title: '风险源名称',
      dataIndex: 'riskName',
      align: 'center',
      width: 160,
      render: (t, r) => {
        return (
          <Tooltip placement="top" title={t}>
            <StyledEllipsisWrap maxLine={1}>{t}</StyledEllipsisWrap>
          </Tooltip>
        );
      },
    },
    {
      title: '风险源地址',
      dataIndex: 'riskUrl',
      align: 'center',
      width: 160,
      render: (t, r) => {
        return (
          <Tooltip placement="top" title={t}>
            <StyledEllipsisWrap maxLine={2}>{t}</StyledEllipsisWrap>
          </Tooltip>
        );
      },
    },
    {
      title: '风险站点',
      dataIndex: 'riskHost',
      align: 'center',
      width: 160,
      render: (t, r) => {
        return (
          <Tooltip placement="top" title={t}>
            <StyledEllipsisWrap maxLine={2}>{t}</StyledEllipsisWrap>
          </Tooltip>
        );
      },
    },
    {
      title: '风险类型',
      dataIndex: 'riskType',
      align: 'center',
      width: 160,
      render: (t, r) => {
        return mapRiskType[t] ? mapRiskType[t].label : '-';
      },
    },
    {
      title: '风险源类型',
      dataIndex: 'fileFormat',
      align: 'center',
      width: 160,
      render: (t, r) => {
        return mapRiskSourceType[t] ? mapRiskSourceType[t].label : '-';
      },
    },
    {
      title: '检测时间',
      dataIndex: 'checkTime',
      align: 'center',
      width: 160,
      render: (t, r) => {
        return t || '-';
      },
    },
    {
      title: '处理状态',
      dataIndex: 'status',
      align: 'center',
      fixed: 'right',
      width: 100,
      render: (t, r) => {
        return mapStatus[t] ? mapStatus[t].label : '-';
      },
    },
  ];

  const pagination = {
    ...paginations,
    total: dataEventRiskList.length,
    pageSize: 500,
    current: 1,
    showSizeChanger: dataEventRiskList.length > 500,
    showTotal(total) {
      return `总共 ${total} 条数据`;
    },
  };

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

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