import { Flex, Space } from 'antd';
import React, { useEffect, useState } from 'react';
import { history } from '@umijs/max';
import styles from './index.less';
import { CaretUpFilled } from '@ant-design/icons';
import LineCharts from './LineCharts';
import SignCard from './SignCard';
import services from '@/services';
import { getCqiStatusStyle, getCqiStatusTexts } from '@/utils/ui'

/** @module 城市安全态势 */


const UrbanSecuritySituation: React.FC = () => {

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

  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}>
        <Flex vertical align='center' className={styles.center}>
          <div className={styles.sign}>
            <div className={styles.title}>今日城市安全综合指数</div>
            <Space direction='vertical' size={10}>
              <span className={styles.num} style={{ color: getCqiStatusStyle(cqiData?.cqi)?.color }}>{cqiData?.cqi}</span>
              <span className={styles.desc}>{cqiData?.statusDesc || getCqiStatusTexts(cqiData?.cqi)?.desc}</span>
            </Space>
          </div>
          <div className={styles.chartSection}>
            <Flex justify='space-between'>
              <span className={styles.title}>近30天安全态势</span>
              <span>
                <span className={styles.rateName}>月同比</span>
                <CaretUpFilled style={{ color: '#09C35C', fontSize: 26, verticalAlign: '-5px' }} />
                <span className={styles.rate} style={{ color: '#09C35C' }}>1.3%</span>
              </span>
            </Flex>
            <LineCharts />
          </div>
          <SignCard />
        </Flex>
      </div>
    </Flex>
  );
};

export default UrbanSecuritySituation;
