<template>
  <view class="upload-img">
    <uv-form-item
      labelWidth="700rpx"
      :label="getLabel()"
      :borderBottom="false"
      labelPosition="top"
      :required="item?.isMustfill == '1'"
    >
      <view class="upload-box">
        <template v-if="imgList.length">
          <view class="img-box" v-for="(item, index) in imgList" :key="index">
            <view class="close" @click="delImg(index)"
              ><uv-icon name="close" color="#fff" size="16"
            /></view>
            <image
              class="img"
              mode="aspectFill"
              :src="getImgUrl(item.url)"
              @click.stop.self="previewImage(item.url)"
            />
          </view>
        </template>
        <view class="img-box">
          <uploadImgCom @uploadImgInfo="uploadImgInfo" />
        </view>
        <view class="img-box" v-show="imgList.length % 3 === 1"></view>
      </view>
    </uv-form-item>
  </view>
</template>

<script setup lang="ts">
import { ref, unref, onMounted, watch } from 'vue'
import uploadImgCom from '@/components/uploadImg/index.vue'

const emmits = defineEmits(['update:imgValue'])

interface imgType {
  path: string
  url: string
}

let props = defineProps({
  item: Object,
  index: Number,
  imgValue: String
})

const imgList = ref<imgType[]>([])

watch(
  () => props.imgValue,
  (newVal, oldVal) => {
    if (props?.imgValue) {
      let str = props?.imgValue.split(',')
      imgList.value = str.map((item) => {
        return {
          path: item,
          url: import.meta.env.VITE_APP_URL + item
        }
      })
    }
  }
)

const getLabel = () => {
  const item = unref(props.item)
  let str = item?.taskFiledValue
  if (item?.taskFiledAlert) {
    str += item.taskFiledAlert
  } else if (item?.taskTypeId === '1' && item.taskFiledKey === 'temp10') {
    str += '(至少上传会议宣讲PPT首页、中间页)'
  } else {
    str += `(至少上传${item?.taskFiledMinsize}张)`
  }
  return str
}

const uploadImgInfo = (data: imgType[]) => {
  imgList.value = [...imgList.value, ...data]
  updateInfo()
}
const delImg = (index: number) => {
  imgList.value.splice(index, 1)
  updateInfo()
}

const updateInfo = () => {
  let map = imgList.value.map((item) => item.path)
  let str = map.join(',')
  emmits('update:imgValue', str)
}
const getImgUrl = (path: string) => {
  if (path.includes(';1')) {
    path = path.replace(';1', '')
  }
  if (path.includes(';2')) {
    path = path.replace(';2', '')
  }
  return path
}

const previewImage = (path: string) => {
  if (path.includes(';1')) {
    path = path.replace(';1', '')
  }
  if (path.includes(';2')) {
    path = path.replace(';2', '')
  }
  uni.previewImage({
    count: path,
    urls: [path]
  })
}
</script>

<style lang="scss" scoped>
.upload-box {
  padding: 20rpx;
  background-color: #fff;
  min-height: 220rpx;
  width: 660rpx;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .img-box {
    position: relative;
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
    .img {
      width: 200rpx;
      height: 200rpx;
    }
    .close {
      position: absolute;
      right: 6rpx;
      top: 6rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 48rpx;
      width: 48rpx;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.5);
    }
  }
}
</style>
