import LabelImgText from '@/components/LabelImgText';
import Casecirculation from '@/pages/Common/Event/EventDetail/Casecirculation';
import { imageOptions } from '@/utils/comm';
import { Carousel, Flex, Image } from 'antd';
import styles from './index.less';
const BaseInfo: React.FC = () => {
  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}>感知源上报- 东侧位移监测设备</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={'2024-05-28 10:20:20'}
            valueStyle={valueStyle}
            labelStyle={labelStyle}
          />
          <LabelImgText
            label={'预警地址：'}
            value={'锦江区牛市口街道办事...'}
            valueStyle={valueStyle}
            labelStyle={labelStyle}
          />
          <LabelImgText
            label={'预警内容：'}
            value={
              '根据智能传感监测，梁板出现严重位移失稳、下挠变形，恐发生坍...'
            }
            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 eventId={'453b066c1b225fb73b7f6fecdd949fd3'} />
      </div>
    </Flex>
  );
};

export default BaseInfo;
