import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
import { Divider, Space } from 'antd';
import styles from './index.less';

const BgMap: Record<number, string> = {
  1: '#FCB129',
  2: '#588CF4',
  3: '#4BCF81',
};
export default ({
  data,
  level,
  objectId
}: {
  data: PhysicalsignApi.ListTopNItems;
  level: number;
  objectId: string
}) => {
  const { dispatch } = useGlobalModalServices();
  return (
    <div
      className={styles.itemContainer}
      onClick={() => {
        dispatch.push('InfluenceSign', {
          props: {
            data: data,
            objectId
          },
        });
      }}
    >
      <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} title={data?.conditionName}>
            {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>
  );
};
