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, Spin } from 'antd';
import classNames from 'classnames';
import { cloneDeep } from 'lodash';
import React, { useEffect, useMemo, useState } from 'react';
import styles from './index.less';
import { useModel } from '@umijs/max';
import EmptySpace from '@/components/EmptySpace';
import { cqiDisplay, getCqiStatusStyle } from '@/utils/ui';


/** @name 地区列表 */
const DistrictCQI: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const { areaId } = initialState;

  const [state, { setLeft, setRight }] = useToggle('low', 'hight');
  const { dispatch } = useGlobalModalServices();

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

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

  const getData = async () => {
    setLoading(true);
    let parmas = {
      physicalSignType: '1',
      indexType: '1',
      indexId: '',
      objectId: areaId,
      indexHierarchy: '1',
      objectHierarchy: '1'
    };
    const resPonse = await services.districtController.getListIndexInstance(parmas);
    setDataSource(resPonse.data.sort((a: any, b: any) => Number(a?.qualitySign) - Number(b?.qualitySign)));
    setLoading(false);
  }

  useEffect(() => {
    getData()
  }, []);

  return (
    <Flex vertical gap={20} 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>
      <Spin
        spinning={loading}
        style={{ width: '100%', height: '100%' }}
        wrapperClassName={styles.spin}
      >
        {
          result?.length ? (
            <>
              {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.qualitySign)}
                        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: getCqiStatusStyle(Number(item.qualitySign))?.color,
                          }}
                        >
                          {cqiDisplay(item.qualitySign)}
                        </div>
                        {item?.status === 'up' && (
                          <CaretUpOutlined style={{ color: '#57ef58' }} />
                        )}
                        {item?.status === 'down' && (
                          <CaretDownOutlined style={{ color: '#FF5858' }} />
                        )}
                      </Space>
                    </div>
                  </div>
                );
              })}
            </>
          ) : <EmptySpace describe="暂无数据" style={{ padding: '10% 0' }} />
        }
      </Spin>
    </Flex>
  );
};

export default DistrictCQI;
