import EventPicList from '@/pages/Common/components/EventPicList';
import services from '@/services';
import { useModel } from '@umijs/max';
import { Divider, Space } from 'antd';
import { useEffect, useRef, useState } from 'react';
import { ChildrenModalMethods } from '../../type';
import styles from './index.less';

/**
 *
 * @description 影响指标
 */

const InfluenceSign = (props: {
  data: any;
  objectId: string;
  modalDispatch: ChildrenModalMethods;
}) => {
  const { initialState } = useModel('@@initialState');
  const { areaId } = initialState;
  const { data, modalDispatch, objectId } = props;
  console.log('InfluenceSign', data, objectId);

  const params = {
    page: 1,
    count: 10,
    objectId: objectId,
    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 () => {
    console.log('getListData', params);
    const res = await services.Physicalsign.getPhysicalsignindexPageCaseInfoVO(
      fetchParams.current,
    );
    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.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>

      <EventPicList
        listData={listData}
        listHeight={600}
        setParams={(page) => {
          fetchParams.current.page = page;
          getListData();
        }}
        handleDetail={(details) => {
          modalDispatch.push(
            'EventDetail',
            {
              w: 'fit-content',
              props: {
                eventId: details.eventId,
              },
            },
            1,
          );
        }}
      />
    </div>
  );
};

export default InfluenceSign;
