import area1 from '@/assets/images/urbanSituation/area1.png';
import area2 from '@/assets/images/urbanSituation/area2.png';
import area3 from '@/assets/images/urbanSituation/area3.png';
import bg1 from '@/assets/images/urbanSituation/bg1.png';
import myVideo1 from '@/assets/media/movie.mp4';
import myVideo from '@/assets/media/movie1.mp4';
import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import services from '@/services';
import { Flex, Space } from 'antd';
import { useEffect, useState } from 'react';
import styles from './index.less';

const Focus = () => {
  const [areaData, setAreaData] = useState([]);

  const { dispatch } = useGlobalModalServices();

  const areas = [
    {
      icon: area1,
      objectName: '市委市政委',
      cqi: 99.9,
    },
    {
      icon: area2,
      objectName: '市城管委周边',
      cqi: 99.9,
    },
    {
      icon: area3,
      objectName: '高新区',
      cqi: 99.9,
    },
  ];

  const activity = [
    {
      name: '保障资源',
      value: 12,
      unit: '个',
    },
    {
      name: '当前问题',
      value: 12,
      unit: '个',
    },
    {
      name: '处置及时率',
      value: 12,
      unit: '%',
    },
  ];

  const getAreaData = () => {
    const params = {
      physicalSignType: '1', // 1实况指数  3周期指数
      indexType: '1', // 指数体系类型 0:内评价 1:外评价
      indexId: '', // 指数id
      objectId: '', // 网格id
      indexHierarchy: '1', // 指数层级，从1开始，多个用,逗号隔开
      objectHierarchy: '2', // 对象层级，从1开始，多个用,逗号隔开
    };
    services.Physicalsign.getImportantDistrictIndexInstance(params).then(
      (res) => {
        if (res.code === 200) {
          setAreaData(res.data.slice(0, 3));
        }
      },
    );
  };

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

  return (
    <div className={styles.wrap}>
      <div className={styles.header}>
        <span className={styles.title}>重点关注</span>
      </div>
      <div className={styles.content}>
        <Flex className={styles.sectionTop} justify="space-between">
          <span>重点区域</span>
          <span
            onClick={() => {
              dispatch.push('keyArea');
            }}
          >
            更多
          </span>
        </Flex>
        <div style={{ height: '246px' }}>
          <Flex justify="space-between">
            {areas.map((item, index) => (
              <Space
                direction="vertical"
                size={10}
                onClick={() => {
                  dispatch.push('KeyAreaDetail', {
                    title: '市委市政府',
                  });
                }}
                key={index}
                className={styles.areaCard}
              >
                <video
                  autoPlay
                  width={200}
                  style={{ objectFit: 'fill' }}
                  height={168}
                >
                  <source
                    src={index == 1 ? myVideo : myVideo1}
                    type="video/mp4"
                  ></source>
                </video>
                <div>
                  <div className={styles.name}>{item.objectName}</div>
                  <div className={styles.value}>{item.cqi || 0}</div>
                </div>
              </Space>
            ))}
          </Flex>
        </div>

        <Flex
          className={styles.sectionTop}
          justify="space-between"
          style={{ marginTop: 30 }}
        >
          <span>重大活动保障</span>
          <span>更多</span>
        </Flex>
        <div className={styles.activityWrap}>
          <Flex justify="space-between">
            {activity.map((item, index) => (
              <Flex
                justify="center"
                align="center"
                key={index}
                className={styles.card}
              >
                <div>
                  <Space size={10}>
                    <span className={styles.value}>{item.value}</span>
                    <span>{item.unit}</span>
                  </Space>
                  <div className={styles.name}>{item.name}</div>
                </div>
              </Flex>
            ))}
          </Flex>
          <div className={styles.title}>
            <img src={bg1} alt="" />
            <p>第十一届中国网络视的大会</p>
            <p>四川省第一届绿道健身运动会城市管理保障</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Focus;
