import Modal from '@/components/HncyModal';
import services from '@/services';
import { getCqiStatusStyle, getCqiStatusTexts } from '@/utils/ui';
import { CaretDownOutlined, CaretUpFilled } from '@ant-design/icons';
import { history, useModel } from '@umijs/max';
import { useRequest } from 'ahooks';
import { Flex, Space } from 'antd';
import React, { useEffect, useState } from 'react';
import ModalContent from '../SecurityServiceOverview/components/ModalContent';
import styles from './index.less';
import IndustryRisk from './IndustryRisk';
import LineCharts from './LineCharts';
import RiskLevelNum from './RiskLevelNum';
/** @module 城市安全态势 */

const UrbanSecuritySituation: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const { areaId } = initialState;
  const [cqiData, setCqiData] = useState<any>({});
  const { data: signData } = useRequest(() => {
    return services.Physicalsign.getComparisonIndexInstance({
      indexId: 2,
      physicalSignType: 1,
      indexType: 1,
      objectId: areaId,
    });
  });
  const { data: thirtyDayTrend } = useRequest(
    services.Physicalsign.TrendAnalysis,
    {
      defaultParams: [
        {
          objectId: areaId,
          indexId: '2',
          indexType: 1,
        },
      ],
    },
  );



  const [modalOpt, setModalOpt] = useState<{
    open: boolean;
    title?: string;
  }>({
    open: false,
    title: '安全指数溯源',
  });
  useEffect(() => {
    const params = {
      physicalSignTyp: 1,
      indexType: 1,
      indexHierarchy: '1,2',
      objectId: '',
      indexId: '',
    };
    services.Physicalsign.getIndexInstanceData(params).then((res) => {
      console.log(res);
      if (res.code === 200) {
        setCqiData(res.data);
      }
    });
  }, []);
  return (
    <Flex vertical className={styles.container}>
      <Flex justify="space-between" align="center" className={styles.top}>
        <span className={styles.title}>城市安全态势</span>
        <span
          className={styles.right}
          onClick={() => history.push('/securityServiceOverview')}
        >
          安全一张图
        </span>
      </Flex>
      <div className={styles.main}>
        <div className={styles.center}>
          <Flex gap={100}>
            <div
              className={styles.sign}
              onClick={() => setModalOpt({ open: true })}
            >
              <div className={styles.title}>今日城市安全综合指数</div>
              <Space size={10}>
                <span
                  className={styles.num}
                  style={{ color: getCqiStatusStyle(cqiData?.cqi)?.color }}
                >
                  {cqiData?.cqi}
                </span>
                <div>
                  <span className={styles.desc}>
                    {cqiData?.statusDesc ||
                      getCqiStatusTexts(cqiData?.cqi)?.desc}
                  </span>
                  {signData && signData?.data?.status !== 'normal' && (
                    <Flex style={{ marginTop: '4px' }}>
                      <span className={styles.rateName}>月同比</span>
                      {signData?.data?.status === 'up' ? (
                        <CaretUpFilled
                          style={{
                            color: '#09C35C',
                            fontSize: 26,
                            verticalAlign: '-5px',
                          }}
                        />
                      ) : (
                        <CaretDownOutlined
                          style={{
                            color: 'red',
                            fontSize: 26,
                            verticalAlign: '-5px',
                          }}
                        />
                      )}
                      <span
                        className={styles.rate}
                        style={{
                          color:
                            signData?.data?.status === 'up' ? '#09C35C' : 'red',
                          marginLeft: 5,
                        }}
                      >
                        {signData?.data?.diffValue}
                      </span>
                    </Flex>
                  )}
                </div>
              </Space>
            </div>
            <div className={styles.chartSection}>
              <Flex justify="space-between">
                <span className={styles.title}>近30天趋势</span>
              </Flex>
              <LineCharts
                data={
                  thirtyDayTrend?.data?.map((item) => ({
                    value: item?.indexScore,
                    name: item?.date,
                  })) || []
                }
              />
            </div>
          </Flex>
          <RiskLevelNum />
          <IndustryRisk />
        </div>
      </div>
      <Modal
        open={modalOpt?.open}
        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>
    </Flex>
  );
};

export default UrbanSecuritySituation;
