import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import services from '@/services';
import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
import { useToggle } from 'ahooks';
import { Flex, Progress, Space } from 'antd';
import classNames from 'classnames';
import { cloneDeep } from 'lodash';
import React, { useEffect, useMemo, useState } from 'react';
import styles from './index.less';
const List = [
  {
    name: '温江区',
    value: 98.6,
    problemNum: 235,
    compare: 1.3,
    id: 1,
  },
  {
    name: '都江堰市',
    value: 88.6,
    problemNum: 200,
    compare: -1.3,
    id: 2,
  },
  {
    name: '天府新区',
    value: 82.6,
    problemNum: 150,
    compare: 1.3,
    id: 3,
  },
];

/** @name 地区列表 */
const DistrictCQI: React.FC = () => {
  const [state, { setLeft, setRight }] = useToggle('low', 'hight');
  const { dispatch } = useGlobalModalServices();

  const [dataSource, setDataSource] = useState<DistrictAPI.RealtimeIndexDTO[]>(
    [],
  );

  const result = useMemo(() => {
    if (state === 'low') {
      return cloneDeep(dataSource);
    } else {
      return cloneDeep(dataSource).reverse();
    }
  }, [state, dataSource]);


  useEffect(() => {
    services.districtController.getDistrictIndexList().then((res) => {
      setDataSource(res.data);
    });
  }, []);

  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}>
      <Flex justify="center" align="center" className={styles.header}>
        <div className={styles.btnGroup}>
          <div
            onClick={setLeft}
            className={classNames(
              styles.btn,
              state === 'low' ? styles.btnSelected : undefined,
            )}
          >
            由高到低
          </div>
          <div
            onClick={setRight}
            className={classNames(
              styles.btn,
              state === 'hight' ? styles.btnSelected : undefined,
            )}
          >
            由低到高
          </div>
        </div>
      </Flex>
      <div className={styles.listWrap}>
        {result?.map((item, index) => {
          return (
            <div
              key={item.objectId}
              className={classNames(styles.listItem)}
              onClick={() => {
                dispatch.push('districtIndex', {
                  title: item.objectName + '运行情况',
                  props: {
                    data: item,
                  },
                });
              }}
            >
              <div className={styles.index}>
                {index < 9 ? '0' + (index + 1) : index}
              </div>

              <div className={styles.itemName}>{item.objectName}</div>
              <div className={styles.progress}>
                <Progress
                  showInfo={false}
                  percent={Number(item.cqi)}
                  status="active"
                  size={{ height: 10 }}
                  trailColor="rgb(144, 205, 229)"
                  strokeColor={{
                    from: 'rgb(121, 255, 209)',
                    to: 'rgb(0, 185, 255)',
                  }}
                />
              </div>
              <div>
                <Space>
                  <div
                    className={styles.itemValue}
                    style={{
                      color: getStatus(Number(item.cqi))?.bg,
                    }}
                  >
                    {Number(item.cqi)?.toFixed(2)}
                  </div>
                  {item.status === 'up' ? (
                    <CaretUpOutlined style={{ color: 'rgb(9, 195, 92)' }} />
                  ) : (
                    <CaretDownOutlined style={{ color: 'rgb(255, 71, 71)' }} />
                  )}
                </Space>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default DistrictCQI;
