import { getColorByIndex } 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 } from 'react';
import PopoverCard from '../PopoverCard';
import styles from './index.less';

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

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

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

  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}>
        {loading && (
          <Flex align="center" justify="center" style={{ height: '100%' }}>
            <Spin></Spin>
          </Flex>
        )}
        {result?.map((item, index) => {
          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.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: getColorByIndex(Number(item.cqi)),
                      }}
                    >
                      {Number(item.cqi)}
                    </div>
                    {item.status === 'up' ? (
                      <CaretUpOutlined style={{ color: 'rgb(9, 195, 92)' }} />
                    ) : (
                      <CaretDownOutlined
                        style={{ color: 'rgb(255, 71, 71)' }}
                      />
                    )}
                  </Space>
                </div>
              </div>
            </Popover>
          );
        })}
      </div>
    </div>
  );
};

export default DistrictList;
