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';
import { useModel } from '@umijs/max';
import EmptySpace from '@/components/EmptySpace';

const InfluenceIndex = () => {
  const { initialState } = useModel('@@initialState');
  const { areaId } = initialState;
  const [modalOpt, setModalOpt] = useState<{
    open: boolean;
    title: string;
    data: any;
  }>({
    open: false,
    title: '',
    data: {}
  })

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

  const [loading, setLoading] = useState(false)

  const getListData = () => {
    setLoading(true)
    const params = {
      objectId: areaId, // 对象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 (
    <>
      <Spin
        spinning={loading}
        style={{ width: '100%', height: 'calc(100% - 60px)' }}
        wrapperClassName={styles.spin}
      >
        {
          questionData?.length ? (
            <>
              {
                questionData.map((item: any, index: number) => (
                  <Flex
                    key={item.conditionId}
                    className={styles.listCard}
                    justify='space-between'
                    align='center'
                    onClick={() => setModalOpt({ open: true, title: '影响指标', data: item })}
                  >
                    <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.percentage}</span>
                      <span>%</span>
                    </div>
                  </Flex>
                ))
              }
            </>
          ) : <EmptySpace describe="暂无数据" style={{ padding: '10% 0' }} />
        }
      </Spin>

      <Modal
        open={modalOpt?.open}
        title={'影响指标'}
        onCancel={() => setModalOpt({ open: false, title: '', data: {} })}
        width={1470}
        height={846}
      >
        <InfluenceSign data={modalOpt?.data} />
      </Modal>
    </>
  )
}

export default InfluenceIndex