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';

const WarningArea = () => {

  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: '510100', // 网格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%' }}
        >
          {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>
            );
          })}
        </Spin>
      </div>
    </Flex>
  )
}

export default WarningArea