import { Divider, Space } from 'antd';
import styles from './index.less'
import EventPicList from '@/pages/Common/components/EventPicList'
import { eventList } from '@/mock/event'
import { useState } from 'react'
/**
 * 
 * @description 影响指标
 */

const InfluenceSign = () => {

  //事件列表
  const [listData, setListData] = useState<any>({
    items: eventList,
    loading: true,
    total: 0,
    page: 1,
    hasNext: false,
  });

  const data = {
    image: 'https://xct.cdhncy.cn/file/zgf/2024/10/10/e1d7cf31199b47528085fffd93af2bee_1728549037097.jpg',
    name: '过街天桥破损',
    fullName: '安全-道路桥梁安全-桥梁安全',
    percentage: '41',
    count: '16',
    deduction: '0.5',
    weight: '0.86'
  }

  return (
    <div className={styles.wrap}>
      <div
        className={styles.itemContainer}
      >
        <div className={styles.left}>
          <div
            className={styles.imgContent}
            style={{
              backgroundImage: `url(${data?.image})`,
              backgroundSize: '100% 100%',
            }}
          >
          </div>

          <div className={styles.titleContent}>
            <div className={styles.title}>{data?.name}</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>

      <EventPicList
        listData={listData}
        listHeight={600}
        setParams={(data) => {
          // setFetchParams({ ...fetchParams, page: data.page })
        }}
      />
    </div>
  )
}

export default InfluenceSign;