import risk1 from '@/assets/images/urbanSituation/risk1.svg';
import risk2 from '@/assets/images/urbanSituation/risk2.svg';
import risk3 from '@/assets/images/urbanSituation/risk3.svg';
import risk4 from '@/assets/images/urbanSituation/risk4.svg';
import DescriptionItem from '@/components/DescriptionItem';
import EmptySpace from '@/components/EmptySpace';
import Modal from '@/components/HncyModal';
import RiskEvents from '@/pages/Common/Event/RiskEvents';
import services from '@/services';
import { cqiDisplay } from '@/utils/ui';
import { useRequest } from 'ahooks';
import { Flex, Space } from 'antd';
import React, { useEffect, useMemo, useState } 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: '',
      }),
    {
      refreshDeps: [objectId],
    },
  );
  //查询重点关注
  const { data: importAreaData } = useRequest(
    () =>
      services.Physicalsign.getImportantDistrictIndexInstance({
        physicalSignType: '1',
        indexType: '1',
        indexId: '1',
        objectId,
        indexHierarchy: '1',
        objectHierarchy: '19',
      }),
    {
      refreshDeps: [objectId],
    },
  );
  //城市问题饼图
  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]);

  const [modalOpt, setModalOpt] = useState<{
    open: boolean;
    title: string;
    type: string; // 弹窗类型：todayNum 今日事件数，disposalNum 待处理事件数
  }>({
    open: false,
    title: '',
    type: '',
  });

  const [statisticsData, setStatisticsData] = useState<any>({});

  const riskData = useMemo(() => {
    return [
      {
        type: '红色风险',
        label: '红色风险',
        value: '--',
        icon: risk1,
        color:
          'linear-gradient(180.00deg, rgb(255, 138, 138),rgb(208, 62, 62))',
      },
      {
        type: '橙色风险',
        label: '橙色风险',
        value: '--',
        icon: risk2,
        color:
          'linear-gradient(180.00deg, rgb(255, 176, 121),rgb(238, 126, 48))',
      },
      {
        type: '黄色风险',
        label: '黄色风险',
        value: '--',
        icon: risk3,
        color:
          'linear-gradient(180.00deg, rgb(255, 228, 155),rgb(231, 182, 55))',
      },
      {
        type: '一般风险',
        label: '一般风险',
        value: '--',
        icon: risk4,
        color:
          'linear-gradient(180.00deg, rgb(122, 177, 255),rgb(37, 128, 255))',
      },
    ];
  }, [statisticsData]);

  const getStatisticsData = () => {
    services.CityRiskApi.queryStatisticalRiskLevel().then((res) => {
      if (res.code === 200) {
        setStatisticsData(res.data);
      }
    });
  };

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

  return (
    <div className={styles.container}>
      <div className={styles.topCard}>
        <div className={styles.title}>城市风险</div>
        <Flex justify="space-between" className={styles.risk}>
          {riskData.map((item) => (
            <div
              key={item.label}
              className={styles.riskItem}
              onClick={() =>
                setModalOpt({
                  open: true,
                  type: item.type,
                  title: '安全风险',
                })
              }
            >
              <Space size={10}>
                <img src={item.icon} style={{ width: 40, height: 40 }} alt="" />
                <Space direction="vertical" size={5}>
                  <div style={{ lineHeight: 1 }}>
                    <span
                      className={styles.riskNum}
                      style={{ background: item.color, backgroundClip: 'text' }}
                    >
                      {item.value}
                    </span>
                    <span>个</span>
                  </div>
                  <div className={styles.label}>{item.label}</div>
                </Space>
              </Space>
            </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,
          }}
          gap={20}
        >
          {importAreaData?.data?.slice(0, 3)?.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}>{cqiDisplay(item.cqi)}</div>
              </div>
            </Space>
          ))}
        </Flex>
      </div>
      <Modal
        open={modalOpt?.open}
        title={modalOpt?.title}
        onCancel={() => setModalOpt({ open: false, title: '', type: '' })}
        width={1772}
        height={846}
      >
        <RiskEvents
          statisticsData={statisticsData}
          defaultCategory={modalOpt?.type}
        />
      </Modal>
    </div>
  );
};

export default RightBox;
