import Modal from '@/components/HncyModal';
import services from '@/services';
import {
  getColorByIndex,
  getCqiStatusStyle,
  getCqiStatusTexts,
} from '@/utils/ui';
import { useModel, useRequest } from '@umijs/max';
import { useState } from 'react';
import ModalContent from '../../components/ModalContent';
import CircleCharts from './CircleCharts';
import styles from './index.less';
import LineCharts from './LineCharts';
const SecurityCqi = () => {
  const { areaId } = useModel('areaGrid');
  const [modalOpt, setModalOpt] = useState<{
    open: boolean;
    title: string;
  }>({
    open: false,
    title: '安全指数溯源',
  });
  const { data: statisticalEvent } = useRequest(
    services.CityRiskApi.getstatisticalEvent,
  );

  const { data: signData } = useRequest(() => {
    return services.Physicalsign.getComparisonIndexInstance({
      indexId: 2,
      physicalSignType: 1,
      indexType: 1,
      objectId: areaId,
    });
  });
  return (
    <div className={styles.container}>
      <div className={styles.cqi}>
        <div className={styles.tag}>安全态势</div>
        <div className={styles.warp}>
          <div className={styles.textWarp}>整体安全指数</div>
          <div
            className={styles.cqiWarp}
            onClick={() => {
              setModalOpt({ open: true, title: '安全指数溯源' });
            }}
          >
            <div
              className={styles.count}
              style={{
                color: getColorByIndex(Number(signData?.currentIndex?.cqi)),
              }}
            >
              {signData?.currentIndex?.cqi}
            </div>
            <div className={styles.status}>
              {getCqiStatusTexts(Number(signData?.currentIndex?.cqi))?.desc}
            </div>
          </div>
        </div>
      </div>

      <div className={styles.lineChartsWarp}>
        <LineCharts
          lineColor={getColorByIndex(Number(signData?.currentIndex?.cqi))}
          colorStops={[
            {
              offset: 0,
              color: 'rgba(240, 248, 255, 0.064)', // 0% 处的颜色
            },
            {
              offset: 1,
              color: getCqiStatusStyle(Number(signData?.currentIndex?.cqi))
                ?.background, // 100% 处的颜色
            },
          ]}
          data={
            signData?.currentIndex?.indexDataList?.map((item: any) => ({
              name: item.time,
              value: item.qualitySign,
            })) || []
          }
          style={{
            width: 410,
            height: 160,
          }}
        />
      </div>

      <div className={styles.progress}>
        <CircleCharts
          style={{ width: 150, height: 150 }}
          data={
            (Number(statisticalEvent?.yxcEventTotal) /
              Number(statisticalEvent?.monthEventTotal)) *
            100
          }
        />
      </div>
      <div className={styles.warningWarp}>
        <div className={styles.warnItem}>
          <div className={styles.count}>
            {statisticalEvent?.monthEventTotal}
          </div>
          <div className={styles.label}>监测预警</div>
        </div>
        <div className={styles.warnItem}>
          <div className={styles.count}>{statisticalEvent?.zgzEventTotal}</div>
          <div className={styles.label}>处置中</div>
        </div>
        <div className={styles.warnItem}>
          <div className={styles.count} style={{ color: 'rgb(35, 194, 255)' }}>
            {statisticalEvent?.yxcEventTotal}
          </div>
          <div className={styles.label}>已处置</div>
        </div>
      </div>
      {/**安全指数溯源 */}
      <Modal
        open={modalOpt?.open}
        title={modalOpt?.title}
        onCancel={() => setModalOpt({ open: false, title: '' })}
        width={2233}
        height={846}
      >
        <ModalContent
          item={{
            indexId: signData?.currentIndex?.indexId,

            statusDescription: '理想态',
          }}
          lineData={
            signData?.currentIndex?.indexDataList?.map((item: any) => ({
              name: item.time,
              value: item.qualitySign,
            })) || []
          }
        />
      </Modal>
    </div>
  );
};
export default SecurityCqi;
