import Modal from '@/components/HncyModal';
import QualityModal from '@/pages/Common/Quality/Modal';
import SignModel from '@/pages/GlobalModalServices/modals/SignModel';
import services from '@/services';
import {
  cqiDisplay,
  getCqiLineChartStyles,
  getCqiStatusStyle,
  getCqiStatusTexts,
} from '@/utils/ui';
import {
  CaretDownOutlined,
  CaretUpFilled,
  QuestionCircleFilled,
} from '@ant-design/icons';
import { useModel } from '@umijs/max';
import { Flex, message, Space } from 'antd';
import classNames from 'classnames';
import { ReactNode, useEffect, useMemo, useState } from 'react';
import DistrictCQI from './DistrictCQI';
import styles from './index.less';
import InfluenceIndex from './InfluenceIndex';
import LineCharts from './LineCharts';
import WarningArea from './WarningArea';

/**
 *
 * @description 城市cqi
 */

const Quality = () => {
  const { initialState } = useModel('@@initialState');
  const { areaId } = initialState;
  const { setModalOpen, setModalOpt, setCurrentCqiData } = useModel(
    'qualityModal',
    (model) => ({
      setModalOpen: model.setModalOpen,
      setModalOpt: model.setModalOpt,
      setCurrentCqiData: model.setCurrentCqiData,
    }),
  );

  const [signModalOpen, setSignModalOpen] = useState(false);

  const [cqiData, setCqiData] = useState<any>({});

  const [tabActive, setTabActive] = useState('1');

  const tabs = [
    {
      key: '1',
      label: '影响指标TOP3',
    },
    {
      key: '2',
      label: '区(市)县CQI',
    },
    {
      key: '3',
      label: '预警区域',
    },
  ];

  const cards = useMemo(() => {
    return [
      {
        name: '安全',
        value:
          cqiData?.currentIndex?.indexs?.find(
            (item: any) => item.name === '安全',
          )?.value ?? 0,
        id: cqiData?.currentIndex?.indexs?.find(
          (item: any) => item.name === '安全',
        )?.id,
        ...getCqiStatusStyle(
          cqiData?.currentIndex?.indexs?.find(
            (item: any) => item.name === '安全',
          )?.value,
        ),
      },
      {
        name: '整洁',
        value:
          cqiData?.currentIndex?.indexs?.find(
            (item: any) => item.name === '整洁',
          )?.value ?? 0,
        id: cqiData?.currentIndex?.indexs?.find(
          (item: any) => item.name === '整洁',
        )?.id,
        ...getCqiStatusStyle(
          cqiData?.currentIndex?.indexs?.find(
            (item: any) => item.name === '整洁',
          )?.value,
        ),
      },
      {
        name: '有序',
        value:
          cqiData?.currentIndex?.indexs?.find(
            (item: any) => item.name === '有序',
          )?.value ?? 0,
        id: cqiData?.currentIndex?.indexs?.find(
          (item: any) => item.name === '有序',
        )?.id,
        ...getCqiStatusStyle(
          cqiData?.currentIndex?.indexs?.find(
            (item: any) => item.name === '有序',
          )?.value,
        ),
      },
      {
        name: '便民',
        value:
          cqiData?.currentIndex?.indexs?.find(
            (item: any) => item.name === '便民',
          )?.value ?? 0,
        id: cqiData?.currentIndex?.indexs?.find(
          (item: any) => item.name === '便民',
        )?.id,
        ...getCqiStatusStyle(
          cqiData?.currentIndex?.indexs?.find(
            (item: any) => item.name === '便民',
          )?.value,
        ),
      },
      {
        name: '美观',
        value: '--',
        id: cqiData?.currentIndex?.indexs?.find(
          (item: any) => item.name === '美观',
        )?.id,
        color: '#57EF58',
        background: 'rgba(39, 211, 134, 0.2)',
        // value: cqiData?.currentIndex?.indexs?.find((item: any) => item.name === '美观')?.value ?? 0,
        // ...getCqiStatusStyle(cqiData?.currentIndex?.indexs?.find((item: any) => item.name === '美观')?.value)
      },
    ];
  }, [cqiData]);

  // tabs内容
  const renderTabComp: ReactNode = useMemo(() => {
    let comp: any = {
      '1': <InfluenceIndex />,
      '2': <DistrictCQI />,
      '3': <WarningArea />,
    };
    return comp[tabActive];
  }, [tabActive]);

  // 获取CQI数据
  const getCqiData = () => {
    const params = {
      physicalSignType: '1', // 1实况指数  3周期指数
      indexType: '1', // 指数体系类型 0:内评价 1:外评价
      indexHierarchy: '1,2', // 指数层级，从1开始，多个用,逗号隔开
      objectId: areaId, // 区域网格id
      indexId: '', // 指数id
    };
    services.Physicalsign.getComparisonIndexInstance(params).then((res) => {
      if (res.code === 200) {
        setCqiData(res.data);
      }
    });
  };

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

  return (
    <Flex vertical className={styles.wrap}>
      <Flex justify="space-between" align="center" className={styles.header}>
        <span className={styles.title}>成都市实时CQI</span>
        <span className={styles.right} onClick={() => setSignModalOpen(true)}>
          <QuestionCircleFilled style={{ marginRight: 10 }} />
          <span>体征模型</span>
        </span>
      </Flex>
      <div className={styles.chartSection}>
        <Flex justify="space-between">
          <div>
            <Flex align="flex-start" gap={13}>
              <span
                className={styles.num}
                style={{
                  color: getCqiStatusStyle(cqiData?.currentIndex?.cqi)?.color,
                }}
              >
                {cqiData?.currentIndex?.cqi}
              </span>
              <span
                className={styles.tag}
                style={{
                  ...getCqiStatusStyle(cqiData?.currentIndex?.cqi),
                  color: '#fff',
                }}
              >
                {getCqiStatusTexts(cqiData?.currentIndex?.cqi)?.text}
              </span>
            </Flex>
            <span className={styles.title}>
              {getCqiStatusTexts(cqiData?.currentIndex?.cqi)?.desc}
            </span>
          </div>
          <div>
            <Flex justify="flex-end" className={styles.compare}>
              <Space size={10} style={{ height: 15 }}>
                {cqiData?.status !== 'normal' && (
                  <>
                    <span className={styles.tips}>{cqiData.desc}</span>
                    {cqiData?.status === 'up' && (
                      <CaretUpFilled style={{ color: '#57ef58' }} />
                    )}
                    {cqiData?.status === 'down' && (
                      <CaretDownOutlined style={{ color: '#FF5858' }} />
                    )}
                    <span
                      style={{
                        color:
                          cqiData?.status === 'down' ? '#FF5858' : '#57ef58',
                      }}
                    >
                      {cqiData?.diffValue}
                    </span>
                  </>
                )}
              </Space>
            </Flex>
            <LineCharts
              dataSource={cqiData?.indexDataList || []}
              lineStyles={getCqiLineChartStyles(cqiData?.currentIndex?.cqi)}
            />
          </div>
        </Flex>
      </div>
      <div className={styles.cardSection}>
        <Flex justify="space-between">
          {cards?.map((item: any) => (
            <Flex
              vertical
              justify="center"
              align="center"
              gap={10}
              key={item.name}
              className={styles.card}
              style={{ background: item.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 }}>
                {cqiDisplay(item.value)}
              </div>
            </Flex>
          ))}
        </Flex>
      </div>
      <div className={styles.listSection}>
        <Flex gap={20}>
          {tabs.map((item) => (
            <div
              key={item.key}
              className={classNames(styles.tab, {
                [styles.tabActive]: item.key === tabActive,
              })}
              onClick={() => setTabActive(item.key)}
            >
              {item.label}
            </div>
          ))}
        </Flex>
        {renderTabComp}
      </div>

      <QualityModal />

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

export default Quality;
