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

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

const Quality = () => {
  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: '预警区域'
    }
  ]

  // 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: '510100', // 区域网格id
      indexId: '', // 指数id
    }
    services.Physicalsign.getComparisonIndexInstance(params).then((res) => {
      if (res.code === 200) {
        setCqiData(res.data)
      }
    })
  }

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

  return (
    <div 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>
      </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) }}>
                {cqiData?.currentIndex?.status || getCqiStatusTexts(cqiData?.currentIndex?.cqi)?.text}
              </span>
            </Flex>
            <span className={styles.title}>
              {cqiData?.currentIndex?.statusDesc || getCqiStatusTexts(cqiData?.currentIndex?.cqi)?.desc}
            </span>
          </div>
          <div>
            <Flex justify="flex-end" className={styles.compare}>
              <Space size={10}>
                <span className={styles.tips}>{cqiData.desc}</span>
                {
                  cqiData.status === 'up' && (<CaretUpFilled style={{ color: '#57ef58' }} />)
                }
                {
                  cqiData.status === 'down' && (<CaretDownOutlined style={{ color: '#FF5858' }} />)
                }
                <span
                  className={styles.compareNum}
                  style={{ color: cqiData.status === 'down' ? '#FF5858' : '' }}
                >{cqiData.diffValue}</span>
              </Space>
            </Flex>
            <LineCharts dataSource={cqiData?.indexDataList || []} />
          </div>
        </Flex>
      </div>
      <div className={styles.cardSection}>
        <Flex justify='space-between'>
          {
            cqiData?.currentIndex?.indexs?.map((item: any) => (
              <Flex
                vertical
                justify='center'
                align='center'
                gap={10}
                key={item.id}
                className={styles.card}
                style={{ background: getCqiStatusStyle(item.value)?.background }}
                onClick={() => {
                  setModalOpen(true)
                  setModalOpt([{ title: item.name, type: 'category' }])
                  setCurrentCqiData(item)
                }}
              >
                <div className={styles.name}>{item.name}</div>
                <div className={styles.value} style={{ color: getCqiStatusStyle(item.value)?.color }}>{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>
    </div>
  );
};

export default Quality;
