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 myVideo1 from '@/assets/media/movie.mp4';
import myVideo from '@/assets/media/movie1.mp4';

import DescriptionItem from '@/components/DescriptionItem';
import { Flex, Space } from 'antd';
import React from 'react';
import PieChart from '../PieChart';
import styles from './index.less';
const RightBox: React.FC = () => {
  const areas = [
    {
      icon: area1,
      name: '天府广场',
      value: 99.9,
    },
    {
      icon: area2,
      name: '宽窄巷子',
      value: 99.9,
    },
    {
      icon: area3,
      name: '武侯祠',
      value: 99.9,
    },
  ];

  const cityProblem = [
    {
      name: '物联感知',
      value: 12,
      dotColor: '#FF9B5D',
    },
    {
      name: '人工巡查',
      value: 12,
      dotColor: '#29B5FF',
    },
    {
      name: '市民投诉',
      value: 12,
      dotColor: '#FFE335',
    },
    {
      name: '其他',
      value: 12,
      dotColor: '#D5D5D5',
    },
  ];
  return (
    <div className={styles.container}>
      <div className={styles.topCard}>
        <div className={styles.title}>城市风险</div>
        <Flex justify="space-between" className={styles.risk}>
          <div>
            重大风险<span className={styles.largeRisk}>12</span>个
          </div>
          <div>
            较大风险<span className={styles.middleRisk}>12</span>个
          </div>
          <div>
            一般风险<span className={styles.normalRisk}>12</span>个
          </div>
        </Flex>
      </div>
      <div className={styles.middleCard}>
        <div className={styles.title}>城市问题</div>
        <Flex
          align="center"
          style={{
            marginTop: 10,
          }}
        >
          <div className={styles.chartContainer}>
            <PieChart></PieChart>
            <div className={styles.chartTitle}>
              <div>123.4</div>
              <div>万个</div>
            </div>
          </div>

          <Flex wrap="wrap" className={styles.cityProblem_right} gap={12}>
            {cityProblem.map((item, index) => {
              return (
                <Flex
                  key={index}
                  className={styles.problemItem}
                  align="center"
                  justify="space-between"
                >
                  <Space>
                    <div
                      className={styles.dot}
                      style={{ backgroundColor: item.dotColor }}
                    ></div>
                    <div>{item.name}</div>
                  </Space>
                  <div>
                    <span>{item.value}</span>
                    <span>个</span>
                  </div>
                </Flex>
              );
            })}
          </Flex>
        </Flex>
        <Flex justify="space-evenly" className={styles.bottomDesc}>
          <DescriptionItem
            direction="horizontal"
            name="待处置"
            value={346}
            valueStyle={{ margin: '0 10px' }}
            unit="件"
          ></DescriptionItem>
          <DescriptionItem
            direction="horizontal"
            name="结案率"
            value={98.3}
            valueStyle={{ margin: '0 10px' }}
            unit="%"
          ></DescriptionItem>
          <DescriptionItem
            direction="horizontal"
            name="疑难案件"
            valueStyle={{ margin: '0 10px' }}
            value={346}
            unit="件"
          ></DescriptionItem>
        </Flex>
      </div>
      <div className={styles.bottomCard}>
        <div className={styles.title}>重点关注</div>

        <Flex
          justify="space-between"
          style={{
            marginTop: 16,
          }}
        >
          {areas.map((item, index) => (
            <Space
              direction="vertical"
              size={10}
              key={index}
              className={styles.areaCard}
            >
              <video autoPlay width={185} height={84}>
                <source
                  src={index == 1 ? myVideo : myVideo1}
                  type="video/mp4"
                ></source>
              </video>
              <div>
                <div className={styles.name}>{item.name}</div>
                <div className={styles.value}>{item.value}</div>
              </div>
            </Space>
          ))}
        </Flex>
      </div>
    </div>
  );
};

export default RightBox;
