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 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?.warning_time}
            valueStyle={valueStyle}
            labelStyle={labelStyle}
          />
          <LabelImgText
            label={'持续时长'}
            value={data?.position}
            valueStyle={valueStyle}
            labelStyle={labelStyle}
          />
          <LabelImgText
            label={'预警内容：'}
            value={data?.warning_context}
            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 />
      <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;
