import { Divider, Space } from 'antd';
import styles from './index.less'
import EventPicList from '@/pages/Common/components/EventPicList'
import { eventList } from '@/mock/event'
import { useEffect, useRef, useState } from 'react'
import services from '@/services';
import { useModel } from '@umijs/max';
import Modal from '@/components/HncyModal';
import EventDetail from '@/pages/Common/Event/EventDetail';
/**
 * 
 * @description 影响指标
 */

const InfluenceSign = (props: { data: any }) => {
  const { initialState } = useModel('@@initialState');
  const { areaId } = initialState;
  const { data } = props

  // 事件详情弹窗
  const [detailModalOpt, setDetailModalOpt] = useState<{
    open: boolean;
    title: string;
    eventId: string;
  }>({
    open: false,
    title: '',
    eventId: '',
  });

  const params = {
    page: 1,
    count: 10,
    objectId: areaId,
    conditionId: data?.conditionId,
    finished: false,
  }

  const fetchParams = useRef<any>(params)

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

  const getListData = async () => {
    const res = await services.Physicalsign.getPhysicalsignindexPageCaseInfoVO(params)
    if (res.code === 200) {
      let items = res.data.items.map((item: any) => (
        {
          ...item,
          standardEventTitle: item?.conditionName,
          caseStatusText: item?.eventStatusText,
          collectionModeName: item?.sourceText,
          address: item?.eventAddress,
          reportTime: item?.eventCreateTime,
          disposePicPath: item?.eventImageUrl,
        }
      ))
      let result = {
        ...res.data,
        items:
          fetchParams.current.page === 1 ? items : [...listData.items, ...items],
      };
      setListData(result);
    }
  }

  useEffect(() => {
    getListData()
  }, [])

  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?.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>

      <EventPicList
        listData={listData}
        listHeight={600}
        setParams={(page) => {
          fetchParams.current.page = page
          getListData()
        }}
        handleDetail={(details) => {
          setDetailModalOpt({
            open: true,
            title: '事件详情',
            eventId: details.eventId,
          });
        }}
      />

      <Modal
        open={detailModalOpt?.open}
        title={detailModalOpt?.title}
        onCancel={() =>
          setDetailModalOpt({ open: false, title: '', eventId: '' })
        }
        width={'fit-content'}
        height={950}
      >
        <EventDetail eventId={detailModalOpt?.eventId} />
      </Modal>
    </div>
  )
}

export default InfluenceSign;