import { Table } from 'antd';
import dayjs from 'dayjs';
import { useEffect, useMemo } from 'react';
import ReactZmage from 'react-zmage';
import styles from '../PatrolReportDetail.less';
import Empty from './Empty';
import MandateBtn from './MandateBtn';

export default function ReportDumCom(props) {
  const { data = [], title, statusCheck, changeStatus } = props;
  const errorCount = data?.length || 0;
  const columns = [
    {
      title: '报警时间',
      dataIndex: 'event_time',
      render: (time) => dayjs(time).format('YYYY-MM-DD HH:mm:ss'),
    },
    {
      title: '设备名称',
      dataIndex: 'device_name',
    },
    {
      title: '报警类型',
      dataIndex: 'event_type',
      // render: type => alarmType[type],
    },
    {
      title: '报警图片',
      render: (item) => (
        <ReactZmage
          controller={{
            // 关闭按钮
            close: true,
            // 旋转按钮
            rotate: true,
            // 缩放按钮
            zoom: false,
            // 下载按钮
            download: false,
            // 翻页按钮
            flip: false,
            // 多页指示
            pagination: false,
          }}
          backdrop="rgba(255,255,255,0.5)"
          style={{ height: '0.9rem' }}
          src={item.path}
        />
      ),
    },
    {
      title: '关联任务',
      dataIndex: 'id',
      render: (id) => <MandateBtn relationId={id} />,
    },
  ];

  const show = useMemo(() => {
    if (statusCheck.length != 3) {
      // 不显示异常数据时，隐藏次模块
      if (!statusCheck.includes(1)) return null;
      // 过滤异常并且此模块没有异常数据时，不显示此模块
      if (statusCheck.includes(1) && errorCount == 0) return null;
    }
    return true;
  }, [statusCheck, errorCount]);

  useEffect(() => {
    if (show) {
      changeStatus(1);
    } else {
      changeStatus(0);
    }
  }, [show]);

  if (!show) return null;
  return (
    <div style={{ marginBottom: '0.3rem' }}>
      <div className={styles.tabBarExtraContent}>
        <div className={styles.text} style={{ width: '60%' }}>
          {title}
        </div>
        <div className={styles.abnormal}>
          <div className={styles.text} style={{ float: 'right' }}>
            异常({errorCount})
          </div>
        </div>
      </div>
      <Table
        bordered
        rowKey="event_time"
        columns={columns}
        dataSource={data}
        locale={{
          emptyText: <Empty />,
        }}
        pagination={false}
      />
    </div>
  );
}