import LabelImgText from '@/components/LabelImgText';

import services from '@/services';
import { imageOptions } from '@/utils/comm';
import { useRequest } from '@umijs/max';
import { Carousel, Image } from 'antd';
import Casecirculation from './Casecirculation';
import DetMap from './DetMap';
import styles from './index.less';
const BaseInfo: React.FC<{
  eventId: string;
  detail: any;
  onChangeOpt: (val: any) => void;
}> = ({ eventId, detail, onChangeOpt }) => {
  // const { data } = useRequest(
  //   () => {
  //     if (eventId) {
  //       return services.CityRiskApi.getInfo({
  //         // riskId: '24555845',
  //         riskId: eventId,
  //       });
  //     }
  //   },
  //   {
  //     refreshDeps: [eventId],
  //     onSuccess: (res) => {
  //       onChangeOpt(res);
  //     },
  //   },
  // );
  const { data:data } = useRequest(
    () =>
      services.DataBase.getSjdzInfoData({
        typeCode: 'zzcc-aq-yjxx',
        data: {
          // regionCode: selectAreaId,
          riskid:eventId,
          type:detail?.type,

        },
      }),
    {
      onSuccess: (res) => {
        onChangeOpt(res?.data?.records?.[0]);
      },
    },
  );
  //console.log(detailData);
  
  const valueStyle = {
    color: '#fff',
    fontSize: 16,
  };
  const labelStyle = {
    color: '#CBEDFF',
    fontSize: 16,
  };
  return (
    <div className={styles.baseInfoWrap}>
      <div className={styles.left}>
        {/* <div className={styles.lineWarp}>
          <div className={styles.titleWarp}>感知源上报-东侧位移监测设备</div>
          <LineCharts></LineCharts>
        </div> */}
        <div className={styles.imgWarp}>
          <span className={styles.tag}>{data?.report_object}</span>
          <Carousel autoplay autoplaySpeed={5000}>
            {[data?.photosZWW]?.map((item) => {
              return (
                <div className={styles.eventImgWrap}>
                  <Image
                    width="100%"
                    height="100%"
                    key={item}
                    src={item}
                    {...imageOptions}
                    style={{ objectFit: 'cover' }}
                  />
                </div>
              );
            })}
          </Carousel>
        </div>
        <div className={styles.info}>
        <LabelImgText
            label={'状态：'}
            value={data?.data?.records?.[0]?.status}
            valueStyle={valueStyle}
            labelStyle={labelStyle}
          />
            <LabelImgText
            label={'区域：'}
            value={data?.data?.records?.[0]?.region_name}
            valueStyle={valueStyle}
            labelStyle={labelStyle}
          />
          <LabelImgText
            label={'预警时间：'}
            value={data?.data?.records?.[0]?.risktime}
            valueStyle={valueStyle}
            labelStyle={labelStyle}
          />
          {/* <LabelImgText
            label={'持续时长'}
            value={data?.position}
            valueStyle={valueStyle}
            labelStyle={labelStyle}
          /> */}
          <LabelImgText
            label={'预警内容：'}
            value={data?.data?.records?.[0]?.riskdescription}
            valueStyle={valueStyle}
            labelStyle={labelStyle}
          />
           <LabelImgText
            label={'管理单位：'}
            value={data?.data?.records?.[0]?.descgldw}
            valueStyle={valueStyle}
            labelStyle={labelStyle}
          />
           
          {/* <LabelImgText
            label={'研判分析'}
            value={data?.warning_context}
            valueStyle={valueStyle}
            labelStyle={labelStyle}
          /> */}
          {/* <h4>位移量（CM）</h4>
          <Flex className={styles.monitorWrap} gap={15} align="center">
            <div>
              <p className={styles.label}>预警监测值</p>
              <b>-120</b>
            </div>
            <div>
              <p className={styles.label}>当前监测值</p>
              <b className={styles.currentNum}>-5</b>
              <span className={styles.time}>4分钟前更新</span>
            </div>
          </Flex> */}
        </div>
      </div>
      
      <DetMap data={data?.data?.records?.[0]}/>
    
     
      <div className={styles.right}>
        <Casecirculation
          casecirculationRecordData={data?.recordList?.map((item: any) => ({
            ...item,
            remark: item?.remarks,
            operationType: item?.dealingStatus,
            circulationPersonName: item?.dealingPeople,
            circulationPersonId: item?.riskEventId,
            recordTime: item?.createTime,
            // eventAttachmentInfos: item?.eventPhotos,
          }))}
        />
      </div>
    </div>
  );
};

export default BaseInfo;
