<template>
  <view class="field-item">
    <view class="detail-title">
      <view class="required">
        <text v-show="item?.isMustfill === '1'">*</text>
      </view>
      <view class="label">{{ item?.taskFiledValue }}</view>
    </view>
    <view class="detail-cont">
      <div class="img-box">
        <view class="img-cont" v-for="(item, index) in imgList" :key="index">
          <view class="text">{{ item.type }}</view>
          <image
            :src="item.path"
            mode="aspectFill"
            class="img-item"
            @click="preImg(imgList, index)"
          />
        </view>
      </div>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

const props = defineProps({
  item: Object,
  detailInfo: Object
})

onMounted(() => {
  getImgList()
})
const imgList = ref()
const getImgList = () => {
  if (!props.item) return
  const imgStr = props?.detailInfo?.wmTaskContent[props.item.taskFiledKey]
  if (!imgStr) return
  const imgArr = imgStr.split(',')
  imgList.value = imgArr.map((item: string) => {
    const obj = {
      type: '',
      path: ''
    }
    if (item.includes(';1')) {
      obj.type = '当场拍照'
      item = item.replace(';1', '')
    }
    if (item.includes(';2')) {
      obj.type = '相册选取'
      item = item.replace(';2', '')
    }
    obj.path = import.meta.env.VITE_APP_URL + item
    return obj
  })
}

const preImg = (imgList: any[], index: number) => {
  const arr = imgList.map((item) => item.path)
  uni.previewImage({
    current: index,
    urls: arr
  })
}
</script>

<style lang="scss" scoped>
.field-item {
  padding: 20rpx;
  color: #000;
  background-color: #fff;
  font-size: 28rpx;
  line-height: 50rpx;
  box-sizing: border-box;

  .detail-title {
    display: flex;
    .required {
      margin-right: 6rpx;
      text {
        color: red;
        width: 10rpx;
      }
    }
    .label {
      flex: 1;
    }
  }
  .detail-cont {
    .img-box {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .img-cont {
        margin-top: 22rpx;
        margin-left: 22rpx;
        .text {
          color: #333;
          font-size: 20rpx;
          padding-left: 15rpx;
        }
      }
      .img-item {
        width: 150rpx;
        height: 150rpx;
        flex-shrink: 0;
      }
    }
  }
}
</style>
