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

interface PropsType {
  indexId: string; //指标
  riskNum?: number | undefined;
  value?: number | string;
  compareOneHour?: number;
}

const RealtimeIndex: React.FC<PropsType> = (props) => {
  let { indexId, riskNum, value } = props;
  const { indutryIndexData } = React.useContext(IndustryContext);
  //指标数据
  const indexData = useMemo(() => {
    return _.find(indutryIndexData, ['indexId', indexId]);
  }, [indutryIndexData]);
  const getStatus = (val: number | string | undefined) => {
    val = Number(val);
    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: '城市运行随时会出现问题',
      };
    }
  };
  value = value ?? indexData?.qualitySign;
  riskNum = riskNum ?? indexData?.warningNum ?? 0;
  return (
    <div className={styles.container}>
      <div style={{ color: getStatus(value)?.bg }} className={styles.value}>
        {value}
      </div>
      <div className={styles.desc}>{indexData?.statusDesc}</div>
      <Flex className={classNames(styles.desc)}>
        {indexData?.desc}
        {indexData?.status === 'up' ? (
          <CaretUpOutlined style={{ color: 'rgb(9, 195, 92)' }} />
        ) : (
          <CaretDownOutlined
            style={{ color: 'rgb(255, 71, 71)' }}
          ></CaretDownOutlined>
        )}
        <span
          style={{
            color:
              indexData?.status === 'up'
                ? 'rgb(9, 195, 92)'
                : 'rgb(255, 71, 71)',
          }}
        >
          {Number(indexData?.diffValue)?.toFixed(2)}
        </span>
      </Flex>
      <div className={styles.risk}>
        {riskNum > 0 && (
          <Space>
            <div className={styles.riskText}>风险预警</div>
            <div className={styles.riskNum}>{riskNum}</div>
          </Space>
        )}
      </div>
      {indexData && (
        <ReactECharts
          notMerge={true}
          lazyUpdate={true}
          style={{ height: 48, width: 190 }}
          option={lineOption(indexData?.cqiTrend)}
        />
      )}
    </div>
  );
};

export default RealtimeIndex;
