import { message } from '@/layouts/messageStore';
import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import services from '@/services';
import {
  cqiDisplay,
  getCqiLineChartStyles,
  getCqiStatusStyle,
  getCqiStatusTexts,
} from '@/utils/ui';
import { QuestionCircleFilled } from '@ant-design/icons';
import { useModel } from '@umijs/max';
import { Flex } from 'antd';
import React, { memo, useEffect, useState } from 'react';
import styles from './index.less';
import LineCharts from './LineCharts';

const CityRealTimeCQI: React.FC = memo(() => {
  const { initialState } = useModel('@@initialState');
  const { areaId } = initialState;
  const [cqiData, setCqiData] = useState<any>({});

  const { dispatch } = useGlobalModalServices();

  // 获取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={() => dispatch.push('SignModel')}>
          <QuestionCircleFilled className={styles.icon} />
          体征模型
        </div>
      </div>

      <div className={styles.content}>
        <Flex
          align="center"
          gap={15}
          justify="space-between"
          style={{ width: '100%' }}
        >
          <div className={styles.scoreSection}>
            <Flex
              gap={10}
              style={{ cursor: 'pointer'}}
              onClick={() => {
                dispatch.push('Category', {
                  title: 'CQI',
                  props: {
                    item: {
                      id: cqiData?.currentIndex?.indexId,
                      value: cqiData?.currentIndex?.cqi,
                      name: cqiData?.currentIndex?.indexName,
                      objectId: cqiData?.currentIndex?.objectId,
                    },
                  },
                });
              }}
            >
              <div>
                <div
                  className={styles.num}
                  style={{
                    color: getCqiStatusStyle(cqiData?.currentIndex?.cqi)?.color,
                  }}
                >
                  {cqiDisplay(cqiData?.currentIndex?.cqi)}
                </div>
                <div className={styles.desc}>
                  {getCqiStatusTexts(cqiData?.currentIndex?.cqi)?.desc}
                </div>
              </div>
              <span
                className={styles.tag}
                style={{
                  backgroundColor: getCqiStatusStyle(cqiData?.currentIndex?.cqi)
                    .color,

                  color: '#fff',
                }}
              >
                {getCqiStatusTexts(cqiData?.currentIndex?.cqi)?.text}
              </span>
            </Flex>
          </div>

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

          <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;
                  }
                  dispatch.push('Category', {
                    title: item.name,
                    props: {
                      item: {
                        ...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,
                  }}
                >
                  {cqiDisplay(item.value)}
                </div>
              </div>
            ))}
          </Flex>
        </Flex>
      </div>
    </div>
  );
});

export default CityRealTimeCQI;
