import { Divider, Space } from 'antd';
import { useModel } from '@umijs/max'
import styles from './index.less';
//import cardIcon2 from '@/assets/images/screenSign/cardIcon2.png';
const BgMap: Record<number, string> = {
  1: '#FCB129',
  2: '#588CF4',
  3: '#4BCF81',
};
export default ({
  data,
  level,
}: {
  data: PhysicalsignApi.ListTopNItems;
  level: number;
}) => {

  const defaultImg = 'https://xct.cdhncy.cn/file/zgf/2024/10/10/e1d7cf31199b47528085fffd93af2bee_1728549037097.jpg'

  const { modalOpt, setModalOpt } = useModel('qualityModal', (model) => ({
    modalOpt: model.modalOpt,
    setModalOpt: model.setModalOpt,
  }));


  return (
    <div 
      className={styles.itemContainer}
      onClick={() => {
        setModalOpt([...modalOpt, { title: '影响指标', type: 'influenceSign'}])
      }}
    >
      <div className={styles.left}>
        <div
          className={styles.imgContent}
          style={{
            backgroundImage: `url(${data?.image || defaultImg})`,
            backgroundSize: '100% 100%',
          }}
        >
          <div className={styles.tag} style={{ backgroundColor: BgMap[level] }}>
            TOP{level}
          </div>
        </div>

        <div className={styles.titleContent}>
          <div className={styles.title}>{data?.conditionName}</div>
          <div className={styles.address}>{data?.fullName}</div>
        </div>
      </div>
      <div className={styles.right}>
        <div className={styles.item}>
          <Space>
            <div className={styles.count} title={data?.percentage + '%'}>
              {data?.percentage}
            </div>
            <span>%</span>
          </Space>
          <div className={styles.name}>影响占比</div>
        </div>
        <Divider
          type="vertical"
          style={{ height: 24, border: ' 1px solid #CFDBE7', top: 25 }}
        />
        <div className={styles.item}>
          <Space>
            <div className={styles.count} title={data?.count + '件'}>
              {data?.count}
            </div>
            <span>件</span>
          </Space>
          <div className={styles.name}>问题数量</div>
        </div>
        <Divider
          type="vertical"
          style={{ height: 24, border: ' 1px solid #CFDBE7', top: 25 }}
        />
        <div className={styles.item}>
          <div
            className={styles.count}
            title={data?.deduction as unknown as string}
          >
            {' '}
            {data?.deduction}
          </div>
          <div className={styles.name}>体征扣分</div>
        </div>
        <Divider
          type="vertical"
          style={{ height: 24, border: ' 1px solid #CFDBE7', top: 25 }}
        />
        <div className={styles.item}>
          <div
            className={styles.count}
            title={data?.weight as unknown as string}
          >
            {data?.weight}
          </div>
          <div className={styles.name}>指标权重</div>
        </div>
      </div>
    </div>
  );
};
