import Modal from '@/components/HncyModal';
import services from '@/services';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { useModel, useRequest } from '@umijs/max';
import { ConfigProvider, Popover } from 'antd';
import { useState } from 'react';
import ModalContent from '../../components/ModalContent';
import styles from './index.less';
const StatusMap = {
  红色风险: {
    // bg: require('@/assets/images/SecurityServiceOverview/topStateBg.png'),
    bg: 'linear-gradient(to right, rgb(241, 71, 73, 0.5), rgba(241, 71, 74, 0.183))',
    icon: require('@/assets/images/SecurityServiceOverview/right/redIcon.png'),
    name: '红色风险',
    color: 'rgb(241, 71, 73)',
  },
  橙色风险: {
    // bg: require('@/assets/images/SecurityServiceOverview/topStateBg.png'),
    icon: require('@/assets/images/SecurityServiceOverview/right/orangeIcon.png'),
    name: '橙色风险',
    color: 'rgb(255, 103, 36)',
    bg: ' linear-gradient(to right, rgba(255, 102, 36, 0.542), rgba(255, 102, 36, 0.171));',
  },
  黄色风险: {
    // bg: require('@/assets/images/SecurityServiceOverview/topStateBg.png'),
    icon: require('@/assets/images/SecurityServiceOverview/right/yellowIcon.png'),
    name: '黄色风险',
    color: 'rgb(255, 175, 74)',
    bg: 'linear-gradient(to right, rgba(255, 174, 74, 0.526), rgba(255, 174, 74, 0.201)',
  },
  一般风险: {
    // bg: require('@/assets/images/SecurityServiceOverview/topStateBg.png'),
    icon: require('@/assets/images/SecurityServiceOverview/right/blueIcon.png'),
    name: '一般风险',
    color: 'rgb(70, 178, 255)',
    bg: 'linear-gradient(to right, rgba(70, 178, 255, 0.526), rgba(70, 178, 255, 0.178))',
  },
  正常: {
    //   bg: require('@/assets/images/SecurityServiceOverview/topStateBg.png'),
    icon: require('@/assets/images/SecurityServiceOverview/right/blueIcon.png'),
    name: '正常',
    color: 'rgb(70, 255, 210)',
    bg: 'linear-gradient(to right, rgba(70, 255, 209, 0.555), rgba(70, 255, 209, 0.195))',
  },
};
const SecurityCqi = ({ warnLevel }: { warnLevel: number }) => {
  const { initialState } = useModel('@@initialState');
  const { areaId } = initialState;
  const { selectAreaId } = useModel('safetyAreaId');
  const [modalOpt, setModalOpt] = useState<{
    open: boolean;
    title: string;
  }>({
    open: false,
    title: '安全指数溯源',
  });
  const { data: statisticalEvent } = useRequest(
    services.CityRiskApi.getstatisticalEvent,
  );
  const { data } = useRequest(
    () =>
      services.DataBase.getSjdzInfoData({
        typeCode: 'zzcc-aq-yjtj',
        data: {
          regionCode: selectAreaId,
          // industryCode: '0401',
        },
      }),
    {
      refreshDeps: [selectAreaId],
    },
  );
console.log(data);


  const { data: signData } = useRequest(() => {
    return services.Physicalsign.getComparisonIndexInstance({
      indexId: 2,
      physicalSignType: 1,
      indexType: 1,
      objectId: areaId,
    });
  });

  const getState = (num: number) => {
    switch (num) {
      case 1:
        return '一般风险';
      case 2:
        return '黄色风险';
      case 3:
        return '橙色风险';
      case 4:
        return '红色风险';
      default:
        return '正常';
    }
  };

  return (
    <div className={styles.container}>
      <div
        className={styles.topLeft}
        style={{
          background: StatusMap[getState(warnLevel)]?.bg,
        }}
      >
        <div className={styles.titleWarp}>
          <div className={styles.title}>城市安全态势</div>
          <div className={styles.tips}>取决于各个行业最高风险等级</div>
        </div>
        <div className={styles.statusWarp}>
          <div className={styles.labelWarp}>
            {warnLevel != 0 && (
              <img
                src={StatusMap[getState(warnLevel)]?.icon}
                alt=""
                className={styles.icon}
              />
            )}
            <div
              className={styles.label}
              style={{ color: StatusMap[getState(warnLevel)]?.color }}
            >
              {StatusMap[getState(warnLevel)]?.name}
            </div>
          </div>
          <div className={styles.tipsWarp}>
            {[
              { label: '正常', color: 'rgb(70, 255, 210)' },
              { label: '一般', color: 'rgb(70, 178, 255)' },
              { label: '黄色', color: 'rgb(255, 175, 74)' },
              { label: '橙色', color: 'rgb(255, 103, 36)' },
              { label: '红色', color: 'rgb(241, 71, 73)' },
            ]?.map((item, index) => {
              return (
                <div key={index} className={styles.statuslab}>
                  <div
                    className={styles.dot}
                    style={{ backgroundColor: item.color }}
                  ></div>
                  <span>{item.label}</span>
                </div>
              );
            })}
            <div>
              <ConfigProvider
                theme={{
                  token: {
                    colorBgElevated: '#163050',
                  },
                }}
              >
                <Popover
                  placement="bottom"
                  content={
                    <div className={styles.popWarp}>
                      {[
                        {
                          label: '红色风险',
                          color: 'rgb(241, 71, 73)',
                          desc: '12小时内降雨量将达50毫米以上，或已达50毫米以上，可能或已经造成影响且降雨可能持续。北方级别设置可能不同。',
                        },
                        {
                          label: '橙色风险',
                          color: 'rgb(255, 103, 36)',
                          desc: '12小时内降雨量将达50毫米以上，或已达50毫米以上，可能或已经造成影响且降雨可能持续。北方级别设置可能不同。',
                        },
                        {
                          label: '黄色风险',
                          color: 'rgb(255, 175, 74)',
                          desc: '12小时内降雨量将达50毫米以上，或已达50毫米以上，可能或已经造成影响且降雨可能持续。北方级别设置可能不同。',
                        },
                        {
                          label: '一般风险',
                          color: 'rgb(70, 178, 255)',
                          desc: '12小时内降雨量将达50毫米以上，或已达50毫米以上，可能或已经造成影响且降雨可能持续。北方级别设置可能不同。',
                        },
                        {
                          label: '正常',
                          color: 'rgb(70, 255, 210)',
                          desc: '12小时内降雨量将达50毫米以上，或已达50毫米以上，可能或已经造成影响且降雨可能持续。北方级别设置可能不同。',
                        },
                      ]?.map((item, index) => {
                        return (
                          <div key={index} className={styles.items}>
                            <div className={styles.statuslab}>
                              <div
                                className={styles.dot}
                                style={{ backgroundColor: item.color }}
                              ></div>
                              <span>{item.label}</span>
                            </div>
                            <div className={styles.desc}>{item?.desc}</div>
                          </div>
                        );
                      })}
                    </div>
                  }
                >
                  <QuestionCircleOutlined
                    style={{ color: 'rgba(255, 255, 255, 0.373)' }}
                  />
                </Popover>
              </ConfigProvider>
            </div>
          </div>
        </div>
      </div>

      <div className={styles.warningWarp}>
        <div className={styles.warnItem}>
          <div className={styles.count}>
            { data?.data?.records?.[0]?.yjqktj?.find(
                (item) => item?.status == '未处理',
              )?.num+data?.data?.records?.[0]?.yjqktj?.find(
                (item) => item?.status == '已解除',
              )?.num}
          </div>
          <div className={styles.label}>监测预警</div>
        </div>
        <div className={styles.warnItem}>
          <div className={styles.count}>
            {
              data?.data?.records?.[0]?.yjqktj?.find(
                (item) => item?.status == '未处理',
              )?.num
            }
          </div>
          <div className={styles.label}>处置中</div>
        </div>
        <div className={styles.warnItem}>
          <div className={styles.count} style={{ color: 'rgb(35, 194, 255)' }}>
            {
              data?.data?.records?.[0]?.yjqktj?.find(
                (item) => item?.status == '已解除',
              )?.num
            }
          </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;
