import EmptySpace from '@/components/EmptySpace';
import Modal from '@/components/HncyModal';
import KeyAreaEventDetail from '@/pages/Common/Event/KeyAreaEventDetail';
import services from '@/services';
import { useModel } from '@umijs/max';
import { Flex, Space } from 'antd';
import React, { useEffect, useState } from 'react';
import styles from './index.less';

/** @name 重点区域实况直播 */
const KeyAreaLive: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const { areaId } = initialState;
  const [eventList, setEventList] = useState([]);

  // 事件详情弹窗
  const [detailModalOpt, setDetailModalOpt] = useState<{
    open: boolean;
    title: string;
    eventId: string;
  }>({
    open: false,
    title: '',
    eventId: '',
  });

  const areas = [
    {
      name: '川大路152号',
      value: 99.9,
    },
    {
      name: '川大路152号',
      value: 99.9,
    },
    {
      name: '川大路152号',
      value: 99.9,
    },
  ];

  const getEventListData = async () => {
    const params = {
      eventStatus: '处置中',
      keyAreaId: areaId, // objectId
      dateType: 'monthly', // dateType
      // limit: 3
    };
    const res = await services.Physicalsign.getNormalEventListForKeyAreas(
      params,
    );
    if (res.code === 200) {
      console.log('getEventListData', res.data);
      setEventList(res.data);
    }
  };

  useEffect(() => {
    getEventListData();
  }, []);

  return (
    <div className={styles.container}>
      <Flex justify="space-between" align="center">
        <div className={styles.title}>重点区域实况直播</div>
        {/* <div className={styles.more}>更多</div> */}
      </Flex>
      <Flex
        gap={10}
        style={{
          margin: '24px 0',
        }}
      >
        {areas.map((item, index) => (
          <div key={index} className={styles.areaCard}>
            <video autoPlay width={200} height={108}>
              {/* <source
                src={index == 1 ? myVideo : myVideo1}
                type="video/mp4"
              ></source> */}
            </video>
            <div>
              <div className={styles.name}>{item.name}</div>
            </div>
          </div>
        ))}
      </Flex>
      <Flex gap={18} align="center">
        <div className={styles.liveMark}>
          实况
          <br />
          轮播
        </div>
        {eventList?.length ? (
          <div className={styles.messageWrap}>
            {eventList?.map((item: any) => (
              <div
                key={item.eventId}
                onClick={() => {
                  setDetailModalOpt({
                    open: true,
                    title: '事件详情',
                    eventId: item.eventId,
                  });
                }}
              >
                <Space>
                  <div className={styles.time}>
                    {item.reportDurationDescription}
                  </div>
                  <div style={{ cursor: 'pointer' }}>
                    {item.standardEventTitle}
                  </div>
                </Space>
              </div>
            ))}
          </div>
        ) : (
          <EmptySpace describe="暂无数据" style={{ padding: '0' }} />
        )}
      </Flex>
      <Modal
        open={detailModalOpt?.open}
        title={detailModalOpt?.title}
        onCancel={() =>
          setDetailModalOpt({ open: false, title: '', eventId: '' })
        }
        width={1160}
        height={850}
      >
        <KeyAreaEventDetail eventId={detailModalOpt?.eventId} />
      </Modal>
    </div>
  );
};

export default KeyAreaLive;
