import LabelImgText from '@/components/LabelImgText';

import services from '@/services';
import { imageOptions } from '@/utils/comm';
import { useRequest } from '@umijs/max';
import { Carousel, Flex, Image } from 'antd';
import Casecirculation from './Casecirculation';
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 (
    <Flex className={styles.baseInfoWrap} gap={20}>
      <div className={styles.left}>
        <span className={styles.tag}>{data?.report_object}</span>
        <Carousel autoplay autoplaySpeed={5000}>
          {[1, 2, 3]?.map((item) => {
            return (
              <div className={styles.eventImgWrap}>
                <Image
                  width="100%"
                  height="100%"
                  key={item}
                  src={item}
                  {...imageOptions}
                  style={{ objectFit: 'cover' }}
                />
              </div>
            );
          })}
        </Carousel>
        <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}
          />
          {/* <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>
      <div className={styles.right}>
        <Casecirculation
          casecirculationRecordData={data?.recordList?.map((item) => ({
            ...item,
            remark: item?.remarks,
            operationType: item?.dealingStatus,
            circulationPersonName: item?.dealingPeople,
            circulationPersonId: item?.riskEventId,
            recordTime: item?.createTime,
            eventAttachmentInfos: item?.eventPhotos,
          }))}
        />
      </div>
    </Flex>
  );
};

export default BaseInfo;
