import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
import { Flex, Space } from 'antd';
import classNames from 'classnames';
import ReactECharts from 'echarts-for-react';
import React from 'react';
import { lineOption } from '../../option';
import styles from './index.less';

interface PropsType {
  riskNum: number;
  value: number;
  compareOneHour: number;
}

const RealtimeIndex: React.FC<PropsType> = (props) => {
  const { riskNum, value, compareOneHour } = props;

  const getStatus = (val: number) => {
    if (val > 95) {
      return {
        bg: 'rgb(87, 239, 88)',
        desc: '城市运行良好',
      };
    }
    if (val < 95 && val > 85) {
      return {
        bg: '#0680f4',
        desc: '城市运行基本正常',
      };
    }
    if (val < 85) {
      return {
        bg: '#ffa250',
        desc: '城市运行随时会出现问题',
      };
    }
  };

  return (
    <div className={styles.container}>
      <div style={{ color: getStatus(value)?.bg }} className={styles.value}>
        {value}
      </div>
      <div className={styles.desc}>{getStatus(value)?.desc}</div>
      <Flex className={classNames(styles.desc)}>
        较1小时前
        {compareOneHour > 0 ? (
          <CaretUpOutlined style={{ color: 'rgb(9, 195, 92)' }} />
        ) : (
          <CaretDownOutlined
            style={{ color: 'rgb(255, 71, 71)' }}
          ></CaretDownOutlined>
        )}
        <span
          style={{
            color: compareOneHour > 0 ? 'rgb(9, 195, 92)' : 'rgb(255, 71, 71)',
          }}
        >
          {compareOneHour}%
        </span>
      </Flex>
      <div className={styles.risk}>
        {riskNum > 0 && (
          <Space>
            <div className={styles.riskText}>风险预警</div>
            <div className={styles.riskNum}>{riskNum}</div>
          </Space>
        )}
      </div>
      <ReactECharts style={{ height: 48, width: 190 }} option={lineOption} />
    </div>
  );
};

export default RealtimeIndex;
