import LabelImgText from '@/components/LabelImgText';
import { imageOptions, joinPictureHttp } from '@/utils/comm';
import { Carousel, Flex, Image } from 'antd';
import classNames from 'classnames';
import styles from './index.less';
type propsType = {
  eventInfo: API.EventDetailDto;
  reportShow?: boolean;
  imgHeight?: number; //图片高度
  setModal?: (flag: boolean) => void;
};
const EventLeftInfo: React.FC<propsType> = (props) => {
  const { reportShow = true, eventInfo, imgHeight = 560 } = props;
  let eventBaseInfo = eventInfo?.eventBase; //事件基本信息
  let eventAttachment = eventInfo?.eventAttachment; //事件图片
  const valueStyle = {
    color: 'rgb(255, 255, 255)',
    fontSize: 16,
  };
  return (
    <div className={classNames(styles.leftWrap)}>
      <div className={styles.eventPicWrap}>
        <span className={styles.sourceLabel}>
          {eventBaseInfo?.eventCollectionModeName}-
          {eventBaseInfo?.informantName}({eventBaseInfo?.timeDescription})
        </span>
        <div className={styles.picList}>
          <div>
            <span className={styles.imgTag}>处置前</span>
            {eventAttachment?.preHandleAttachmentInfos?.length > 0 ? (
              <Carousel autoplay autoplaySpeed={5000}>
                {eventAttachment?.preHandleAttachmentInfos?.map((item) => {
                  return (
                    <div
                      className={styles.eventImgWrap}
                      key={item.attachmentId}
                    >
                      <Image
                        width="100%"
                        height="100%"
                        key={item.attachmentPath}
                        src={joinPictureHttp(item.attachmentPath)}
                        {...imageOptions}
                        style={{ objectFit: 'cover' }}
                      />
                    </div>
                  );
                })}
              </Carousel>
            ) : (
              <Image
                width="100%"
                height="100%"
                src={'#'}
                {...imageOptions}
                style={{ objectFit: 'cover' }}
              />
            )}
          </div>

          {eventAttachment?.handledAttachmentInfos?.length > 0 && (
            <div>
              <span className={styles.imgTag}>处置后</span>
              <Carousel autoplay autoplaySpeed={5000}>
                {eventAttachment?.handledAttachmentInfos?.map((item) => {
                  return (
                    <div
                      className={styles.eventImgWrap}
                      key={item.attachmentId}
                    >
                      <Image
                        width="100%"
                        height="100%"
                        key={item.attachmentPath}
                        src={joinPictureHttp(item.attachmentPath)}
                        {...imageOptions}
                        style={{ objectFit: 'cover' }}
                      />
                    </div>
                  );
                })}
              </Carousel>
            </div>
          )}
        </div>
      </div>
      <div className={styles.eventInfo}>
        <Flex>
          <div
            className={styles.title}
            title={eventBaseInfo?.standardEventTitle}
          >
            {eventBaseInfo?.standardEventTitle}
          </div>
          {String(eventBaseInfo?.eventType) == '3' && (
            <Flex className={styles.cgtfTag} align="center">
              <img src={require('@/assets/images/fly.png')} />
              <span>诚管24</span>
            </Flex>
          )}
        </Flex>
        {reportShow && (
          <div style={{ marginTop: '10px' }}>
            <LabelImgText
              label={'案件编号：'}
              value={eventBaseInfo?.standardEventNumber}
              valueStyle={valueStyle}
              labelStyle={{
                fontSize: 16,
                color: 'rgb(203, 237, 255)',
              }}
            />
            <LabelImgText
              label={'上报时间：'}
              valueStyle={valueStyle}
              value={eventBaseInfo?.reportTime}
              labelStyle={{
                fontSize: 16,
                color: 'rgb(203, 237, 255)',
              }}
            />
            <LabelImgText
              label={'事件分类：'}
              valueStyle={valueStyle}
              value={eventBaseInfo?.extendClass}
              labelStyle={{
                fontSize: 16,
                color: 'rgb(203, 237, 255)',
              }}
            />
            <LabelImgText
              label={'事件地址：'}
              valueStyle={valueStyle}
              value={eventBaseInfo?.address}
              labelStyle={{
                fontSize: 16,
                color: 'rgb(203, 237, 255)',
              }}
            />
          </div>
        )}
      </div>
    </div>
  );
};

export default EventLeftInfo;
