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, { useEffect, useMemo, useState } from 'react';
import PieChart from '../PieChart';
import styles from './index.less';
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 Modal from '@/components/HncyModal';
import RiskEvents from '@/pages/Common/Event/RiskEvents';
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: statisticsData?.majorRiskTotal,
        icon: risk1,
        color: 'linear-gradient(180.00deg, rgb(255, 138, 138),rgb(208, 62, 62))'
      },
      {
        type: '橙色风险',
        label: '橙色风险',
        value: statisticsData?.significantRiskTotal,
        icon: risk2,
        color: 'linear-gradient(180.00deg, rgb(255, 176, 121),rgb(238, 126, 48))'
      },
      {
        type: '黄色风险',
        label: '黄色风险',
        value: statisticsData?.generalRiskTotal,
        icon: risk3,
        color: 'linear-gradient(180.00deg, rgb(255, 228, 155),rgb(231, 182, 55))'
      },
      {
        type: '一般风险',
        label: '一般风险',
        value: statisticsData?.ybfxRiskTotal,
        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}>{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;
