import bg1 from '@/assets/images/urbanSituation/bg1.png';
import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import services from '@/services';
import { cqiDisplay } from '@/utils/ui';
import { useModel } from '@umijs/max';
import { Flex, Space } from 'antd';
import { useEffect, useState } from 'react';
import styles from './index.less';

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

  const { initialState } = useModel('@@initialState');
  const { areaId } = initialState;

  const { dispatch } = useGlobalModalServices();

  const activity = [
    {
      name: '保障点位',
      value: 5,
      unit: '个',
    },
    {
      name: '保障资源',
      value: 10,
      unit: '个',
    },
    {
      name: '当前问题',
      value: 3,
      unit: '个',
    },
  ];

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

  useEffect(() => {
    getAreaData();
  }, []);
  const imgMap: Record<any, any> = {
    0: require('@/assets/images/urbanSituation/zdgz1.png'),
    1: require('@/assets/images/urbanSituation/zdgz2.png'),
    2: require('@/assets/images/urbanSituation/zdgz3.png'),
  };
  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">
            {areaData.map((item: any, index: number) => (
              <Space
                direction="vertical"
                size={10}
                onClick={() => {
                  dispatch.push('KeyAreaDetail', {
                    title: item.objectName,
                    props: {
                      objectId: item.objectId,
                      cqi: item.cqi,
                    },
                  });
                }}
                key={index}
                className={styles.areaCard}
              >
                <img
                  src={
                    imgMap[index] ||
                    require('@/assets/images/urbanSituation/zdgz1.png')
                  }
                  alt=""
                />
                {/* <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}>
                    {cqiDisplay(item.cqi) || 0}
                  </div>
                </div>
              </Space>
            ))}
          </Flex>
        </div>

        <Flex
          className={styles.sectionTop}
          justify="space-between"
          style={{ marginTop: 30 }}
        >
          <span>重大活动保障</span>
          <span
            onClick={() => {
              const url = 'https://10.1.174.34:13000';
              window.open(url, '_blank');
            }}
          >
            更多
          </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> */}
            <p>城市环境品质提升</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Focus;
