/**
 * Author: Charles
 * Date: 2022.9.13
 * Description: [风险列表]
 */
import React, { useEffect } from 'react';
import { connect } from 'umi';
import { Table, Tooltip } from 'antd';
import { paginations, mapStatus, mapRiskType, mapRiskSourceType } from '@/constants';
import { StyledEllipsisWrap } from '@/components/style';
import moment from 'moment';

/* DataTable */
const DataTable = props => {
  const { loading, dataRisk } = props;

  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: 'riskKeyword',
      align: 'center',
      width: 260,
      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 ? moment(t).format('YYYY-MM-DD HH:mm:ss') : '-';
      },
    },
    {
      title: '处理状态',
      dataIndex: 'status',
      align: 'center',
      fixed: 'right',
      width: 100,
      render: (t, r) => {
        return mapStatus[t] ? mapStatus[t].label : '-';
      },
    },
  ];
  const pagination = {
    ...paginations,
    total: dataRisk.length,
    pageSize: 500,
    current: 1,
    showSizeChanger: dataRisk.length > 500,
    showTotal(total) {
      return `总共 ${total} 条数据`;
    },
  };
  return (
    <Table
      rowKey="id"
      loading={loading}
      dataSource={dataRisk}
      columns={columns}
      pagination={pagination}
      scroll={{ x: 1500, y: `calc(100vh - 400px)` }}
    />
  );
};

/* Main */
const RiskBlock = props => {
  const { dispatch, loading, dataRisk } = props;

  useEffect(() => {
    handleGetList(1, 10);
  }, []);

  /* 账号列表 */
  const handleGetList = (current, size) => {
    dispatch({
      type: 'RiskBlock/getEventRiskList',
      payload: {
        current: current || 1,
        size: size || 10,
      },
    });
  };

  return (
    <div className="mt-16">
      <DataTable loading={loading} dataRisk={dataRisk} />
    </div>
  );
};

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