import myVideo1 from '@/assets/media/movie.mp4';
import myVideo from '@/assets/media/movie1.mp4';
import DescriptionItem from '@/components/DescriptionItem';
import EmptySpace from '@/components/EmptySpace';
import services from '@/services';
import { useRequest } from 'ahooks';
import { Flex, Space } from 'antd';
import React, { useMemo } from 'react';
import PieChart from '../PieChart';
import styles from './index.less';
const RightBox: React.FC<{ objectId: string }> = ({ objectId }) => {
  //查询城市问题
  const { data: cityPieData } = useRequest(() =>
    services.Physicalsign.getCityEventGroupBySource({
      physicalSignType: '1',
      indexType: '1',
      indexId: '1',
      objectId,
      startTime: '',
      endTime: '',
    }),
  );
  //查询重点关注
  const { data: importAreaData } = useRequest(() =>
    services.Physicalsign.getImportantDistrictIndexInstance({
      physicalSignType: '1',
      indexType: '1',
      indexId: '1',
      objectId,
      indexHierarchy: '1',
      objectHierarchy: '19',
    }),
  );
  //城市问题饼图
  const cityProblem = useMemo(() => {
    let colorConfig: string[] = [
      '#FF9B5D',
      '#29B5FF',
      '#FFE335',
      '#D5D5D5',
      '#ff98f9',
    ];
    let sourceData = cityPieData?.data.source;
    return sourceData?.map((it, index) => ({
      name: it.name,
      value: it.count,
      dotColor: colorConfig[index],
      itemStyle: {
        color: colorConfig[index],
      },
    }));
  }, [cityPieData]);
  //事件数
  const eventData = useMemo(() => {
    return cityPieData?.data.event;
  }, [cityPieData]);

  //结案率
  const doneRate = useMemo(() => {
    let { noHandle, total } = cityPieData?.data.event || {
      noHandle: 0,
      total: 0,
    };
    return (total - noHandle) / total;
  }, [cityPieData]);
  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}>
            {cityProblem && <PieChart data={cityProblem}></PieChart>}
            <div className={styles.chartTitle}>
              <div>{eventData?.total}</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={eventData?.noHandle}
            valueStyle={{ margin: '0 10px' }}
            unit="件"
          ></DescriptionItem>
          <DescriptionItem
            direction="horizontal"
            name="结案率"
            value={doneRate}
            valueStyle={{ margin: '0 10px' }}
            unit="%"
          ></DescriptionItem>
          <DescriptionItem
            direction="horizontal"
            name="疑难案件"
            valueStyle={{ margin: '0 10px' }}
            value={eventData?.difficult}
            unit="件"
          ></DescriptionItem>
        </Flex>
      </div>
      <div className={styles.bottomCard}>
        <div className={styles.title}>重点关注</div>
        {importAreaData && importAreaData?.data?.length < 1 && <EmptySpace />}
        <Flex
          justify="space-between"
          style={{
            marginTop: 16,
          }}
        >
          {importAreaData?.data?.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.objectName}</div>
                <div className={styles.value}>{item.cqi}</div>
              </div>
            </Space>
          ))}
        </Flex>
      </div>
    </div>
  );
};

export default RightBox;
