import Modal from '@/components/HncyModal';
import QualityModal from '@/pages/Common/Quality/Modal';
import SignModel from '@/pages/Common/Sign/SignModel';
import services from '@/services';
import { getCqiLineChartStyles, getCqiStatusStyle, getCqiStatusTexts } from '@/utils/ui';
import { QuestionCircleFilled } from '@ant-design/icons';
import { useModel } from '@umijs/max';
import { Flex } from 'antd';
import React, { useEffect, useState } from 'react';
import styles from './index.less';
import LineCharts from './LineCharts';
import { message } from '@/layouts/messageStore';

const CityRealTimeCQI: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const { areaId } = initialState;
  const [cqiData, setCqiData] = useState<any>({});
  const [signModalOpen, setSignModalOpen] = useState(false);
  const { setModalOpen, setModalOpt, setCurrentCqiData } = useModel(
    'qualityModal',
    (model) => ({
      setModalOpen: model.setModalOpen,
      setModalOpt: model.setModalOpt,
      setCurrentCqiData: model.setCurrentCqiData,
    }),
  );

  // 获取CQI数据
  const getCqiData = () => {
    const params = {
      physicalSignType: '1',
      indexType: '1',
      indexHierarchy: '1,2',
      objectId: areaId,
      indexId: '',
    };
    services.Physicalsign.getComparisonIndexInstance(params).then((res) => {
      if (res.code === 200) {
          console.log(res.data);
          let isAdjust = true;
          if (isAdjust && res.data.currentIndex?.indexs) {
              const indexs = res.data.currentIndex.indexs.map((item: any) =>
                  item.name === '美观' ? { ...item, value: '--', color: '#57EF58', background: 'rgba(39, 211, 134, 0.2)', } : {...item, ...getCqiStatusStyle(item?.value)}
              ).sort((a:any, b:any) => Number(a.id) - Number(b.id));
              const updatedData = { ...res.data, currentIndex: { ...res.data.currentIndex, indexs } };
              setCqiData(updatedData);
          } else {
              setCqiData(res.data);
          }
      }
    });
  };

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

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <span className={styles.title}>成都市实时CQI</span>
        <div className={styles.tip} onClick={() => setSignModalOpen(true)}>
          <QuestionCircleFilled className={styles.icon} />
          体征模型
        </div>
      </div>

      <div className={styles.content}>
        <Flex align="center" gap={27}>
          <div className={styles.scoreSection}>
            <Flex gap={10}>
              <div>
                <div
                  className={styles.num}
                  style={{
                    color: getCqiStatusStyle(cqiData?.currentIndex?.cqi)?.color,
                  }}
                >
                  {cqiData?.currentIndex?.cqi}
                </div>
                <div className={styles.desc}>
                  {getCqiStatusTexts(cqiData?.currentIndex?.cqi)?.desc}
                </div>
              </div>
              <span
                className={styles.tag}
                style={{ ...getCqiStatusStyle(cqiData?.currentIndex?.cqi) }}
              >
                {getCqiStatusTexts(cqiData?.currentIndex?.cqi)?.text}
              </span>
            </Flex>
          </div>

          {/* <div className={styles.chart}> */}
          <LineCharts 
            dataSource={cqiData?.indexDataList || []}
            lineStyles={getCqiLineChartStyles(cqiData?.currentIndex?.cqi)}
          />
          {/* </div> */}

          <Flex gap={16}>
            {cqiData?.currentIndex?.indexs?.map((item: any) => (
              <div
                key={item.id}
                className={styles.dimensionItem}
                style={{
                  background: item?.background ? item?.background : getCqiStatusStyle(item.value)?.background,
                }}
                onClick={() => {
                  if (item.name === '美观') {
                    message.warning('指标正在构建中')
                    return
                  }
                  setModalOpen(true);
                  setModalOpt([{ title: item.name, type: 'category' }]);
                  setCurrentCqiData({
                    ...item,
                    objectId: cqiData?.currentIndex?.objectId,
                  });
                }}
              >
                <div className={styles.name}>{item.name}</div>
                <div
                  className={styles.value}
                  style={{ color: item?.color ? item?.color : getCqiStatusStyle(item.value)?.color }}
                >
                  {item.value}
                </div>
              </div>
            ))}
          </Flex>
        </Flex>
      </div>

      <Modal
        open={signModalOpen}
        title={'体征模型'}
        onCancel={() => setSignModalOpen(false)}
        width={1470}
        height={846}
      >
        <SignModel />
      </Modal>

      <QualityModal />
    </div>
  );
};

export default CityRealTimeCQI;
