import myVideo1 from '@/assets/media/movie.mp4';
import myVideo from '@/assets/media/movie1.mp4';
import { Flex, Space } from 'antd';
import React from 'react';
import styles from './index.less';

/** @name 重点区域实况直播 */
const KeyAreaLive: React.FC = () => {
  const areas = [
    {
      name: '川大路152号',
      value: 99.9,
    },
    {
      name: '川大路152号',
      value: 99.9,
    },
    {
      name: '川大路152号',
      value: 99.9,
    },
  ];

  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>
        <div className={styles.messageWrap}>
          <div>
            <Space>
              <div className={styles.time}>3分钟前</div>
              <div>市民上报双桥路共享单车乱停放</div>
            </Space>
          </div>
          <div>
            <Space>
              <div className={styles.time}>3分钟前</div>
              <div>人工巡查发现双桥路交通拥堵</div>
            </Space>
          </div>
        </div>
      </Flex>
    </div>
  );
};

export default KeyAreaLive;
