import { useState, useEffect } from 'react';

import { Flex, Progress, Space, Spin } from 'antd';
import classNames from 'classnames';
import styles from './index.less'
import services from '@/services';
import { useModel } from '@umijs/max';
import EmptySpace from '@/components/EmptySpace';

const WarningArea = () => {
  const { initialState } = useModel('@@initialState');
  const { areaId } = initialState;
  const [tabKey, setTabKey] = useState('street')
  const [groupData, setGroupData] = useState<any>({})
  const [loading, setLoading] = useState(false)

  const tabs = [
    {
      key: 'street',
      name: '预警街道',
      value: 0
    },
    {
      key: 'road',
      name: '预警道路',
      value: 0
    },
  ]


  // 获取列表数据
  const getListData = () => {
    setLoading(true)
    const params = {
      physicalSignType: '1', // 1实况指数  3周期指数
      indexType: '1', // 指数体系类型 0:内评价 1:外评价
      indexId: '', // 指数id
      objectId: areaId, // 网格id
      indexHierarchy: '1', // 指数层级，从1开始，多个用,逗号隔开
      objectHierarchy: '2,4', // 对象层级，从1开始，多个用,逗号隔开
    }
    services.Physicalsign.getWarningDistrictIndexInstance(params).then((res) => {
      if (res.code === 200) {
        const result = res.data.reduce((pre, next) => {
          pre[next.objGroup] = next.objects
          return pre
        }, {})
        setGroupData(result)
        setLoading(false)
      }
    })
  }

  useEffect(() => {
    getListData()
  }, [])

  return (
    <Flex gap={20} className={styles.wrap}>
      <Space direction='vertical' size={20}>
        {
          tabs.map(item => (
            <div
              className={classNames(styles.tabItem, { [styles.tabActive]: item.key === tabKey })}
              key={item.name}
              onClick={() => setTabKey(item.key)}
            >
              <div className={styles.name}>{item.name}</div>
              <span className={styles.value}>{groupData[tabKey]?.length}</span>
            </div>
          ))
        }
      </Space>
      <div className={styles.listWrap}>
        <Spin
          spinning={loading}
          style={{ width: '100%', height: '100%' }}
          wrapperClassName={styles.spin}
        >
          {
            groupData[tabKey]?.length ? (
              <>
                {groupData[tabKey]?.map((item: any, index: number) => {
                  return (
                    <div
                      key={index}
                      className={styles.listItem}
                    >
                      <div className={styles.itemName}>{item.objectName}</div>
                      <div className={styles.progress}>
                        <Progress
                          showInfo={false}
                          percent={item.cqi}
                          status="active"
                          size={{ height: 14 }}
                          trailColor="rgba(144, 205, 229, 0.22)"
                          strokeColor={{
                            from: 'rgb(255, 180, 180)',
                            to: 'rgb(242, 79, 79)',
                          }}
                        />
                      </div>
                      <div>
                        <Space>
                          <div
                            className={styles.itemValue}
                          >
                            {item.cqi}
                          </div>
                        </Space>
                      </div>
                    </div>
                  );
                })}
              </>
            ) : <EmptySpace describe="暂无数据" style={{ padding: '10% 0' }} />
          }
        </Spin>
      </div>
    </Flex>
  )
}

export default WarningArea