import { cqiDisplay, getColorByIndex, getCqiStatusStyle } from '@/utils/ui';
import {
  CaretDownOutlined,
  CaretUpOutlined,
  LeftOutlined,
} from '@ant-design/icons';
import { useModel } from '@umijs/max';
import { useToggle } from 'ahooks';
import { Flex, Popover, Progress, Space, Spin } from 'antd';
import classNames from 'classnames';
import { cloneDeep } from 'lodash';
import React, { useEffect, useMemo, useState } from 'react';
import PopoverCard from '../PopoverCard';
import styles from './index.less';
import services from '@/services';
import EmptySpace from '@/components/EmptySpace';

/** @name 地区列表 */
const DistrictList: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const { areaId } = initialState;
  const [state, { setLeft, setRight }] = useToggle('low', 'hight');
  /** @description store */
  const {
    getAreaListDto,
    selectDistrict,
    setSelectDistrict,
  } = useModel('regionalIndex');

  const [list, setList] = useState<any>([])
  const [listLoading, setListLoading] = useState(false)

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

  // 获取区市县列表
  const getAreaList = async () => {
    setListLoading(true)
    let parmas = {
      physicalSignType: '1',
      indexType: '1',
      indexId: '',
      objectId: areaId,
      indexHierarchy: '1',
      objectHierarchy: '1'
    };
    const resPonse = await services.districtController.getListIndexInstance(parmas);
    if (resPonse.code === 200) {
      setList(resPonse.data.sort((a:any, b:any) => Number(a?.qualitySign) - Number(b?.qualitySign)))
      setListLoading(false)
    }
  }

  useEffect(() => {
    getAreaListDto({ objectId: areaId });
    getAreaList()
  }, []);

  return (
    <div className={styles.container}>
      <Flex justify="space-between" align="center" className={styles.header}>
        {selectDistrict ? (
          <Space
            onClick={() => setSelectDistrict?.(undefined)}
            style={{ cursor: 'pointer' }}
          >
            <LeftOutlined></LeftOutlined>
            <div>返回全市视角</div>
          </Space>
        ) : (
          <div>CQI实时排名</div>
        )}

        <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}>
        {listLoading && (
          <Flex align="center" justify="center" style={{ height: '100%' }}>
            <Spin></Spin>
          </Flex>
        )}
        {
          resultList?.length ? (
            <>
              {resultList?.map((item:any, index:number) => {
                return (
                  <Popover
                    placement="right"
                    arrow={false}
                    overlayInnerStyle={{
                      padding: 0,
                      borderRadius: '0px 30px 30px 0px',
                    }}
                    mouseEnterDelay={1}
                    color="transparent"
                    key={index}
                    content={<PopoverCard data={item}></PopoverCard>}
                  >
                    <div
                      className={classNames(
                        styles.listItem,
                        item.objectId === selectDistrict?.objectId
                          ? styles.active
                          : undefined,
                      )}
                      onClick={() => setSelectDistrict?.(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: 'rgb(9, 195, 92)' }} />
                          ) : (
                            <>
                              {
                                item.status === 'down'
                                  ? (
                                    <CaretDownOutlined
                                      style={{ color: 'rgb(255, 71, 71)' }}
                                    />
                                  ) : <></>
                              }
                            </>)}
                        </Space>
                      </div>
                    </div>
                  </Popover>
                )
              })}
            </>
          ) : <EmptySpace describe="暂无数据" style={{ padding: '10% 0' }} />
        }
      </div>
    </div>
  );
};

export default DistrictList;
