import { useState, useEffect } from 'react';
import { Flex, Spin } from 'antd'
import styles from './index.less'
import Modal from '@/components/HncyModal';
import InfluenceSign from '@/pages/Common/Sign/InfluenceSign'
import services from '@/services';

const InfluenceIndex = () => {

  const [modalOpen, setModalOpen] = useState(false)

  const [questionData, setQuestionData] = useState<any>([])

  const [loading, setLoading] = useState(false)

  const ranks = [
    {
      fullName: '公共广场私搭乱建',
      conditionName: '安全',
      weight: 41,
    },
    {
      fullName: '建筑物外立面不洁',
      conditionName: '整洁',
      weight: 21,
    },
    {
      fullName: '人行道（含盲道）破损',
      conditionName: '安全',
      weight: 41,
    }
  ]

  const getListData = () => {
    setLoading(true)
    const params = {
      objectId: '1', // 对象id
      indexId: '1',
      n: '3', // 默认5
      indexType: '1', // 内评价0，外评价1，默认外评价
    }
    services.Physicalsign.getPhysicalsignindexquestioninstanceListTop(params).then((res) => {
      if (res.code === 200) {
        setQuestionData(res.data)
        setLoading(false)
      }
    })
  }

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

  return (
    <div className={styles.wrap}>
      <Spin
        spinning={loading}
        style={{ width: '100%', height: '100%' }}
      >
        {
          questionData.map((item, index: number) => (
            <Flex
              key={item.conditionId}
              className={styles.listCard}
              justify='space-between'
              align='center'
              onClick={() => setModalOpen(true)}
            >
              <Flex gap={25} align='center'>
                <div className={styles.rankTag}>TOP{index + 1}</div>
                <div className={styles.desc}>
                  <div className={styles.textEllipsis}>{item.conditionName}</div>
                  <div className={styles.name} >{item.fullName}</div>
                </div>
              </Flex>
              <div className={styles.infRate}>
                <span>影响占比</span>
                <span>{item.weight}</span>
                <span>%</span>
              </div>
            </Flex>
          ))
        }
      </Spin>

      <Modal
        open={modalOpen}
        title={'影响指标'}
        onCancel={() => setModalOpen(false)}
        width={1470}
        height={846}
      >
        <InfluenceSign />
      </Modal>
    </div>
  )
}

export default InfluenceIndex