import EmptySpace from '@/components/EmptySpace';
import Modal from '@/components/HncyModal';
import InfluenceSign from '@/pages/GlobalModalServices/modals/InfluenceSign';
import services from '@/services';
import { useModel } from '@umijs/max';
import { Flex, Spin } from 'antd';
import { useEffect, useState } from 'react';
import styles from './index.less';

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;
