<template>
  <view
    class="upload_content"
    :style="{
      borderTop: props.borderTop ? '1rpx solid #eee' : ''
    }"
  >
    <view class="upload_title">
      {{ props?.title || '上传' }}<text v-if="props?.required"> * </text>
    </view>
    <view class="subTitle"> 最多上传{{ props?.count || 1 }}张照片，支持jpg、png格式 </view>
    <view class="upload_body">
      <view v-for="(i, index) in list" :key="index" class="upload_item" :style="props?.styles">
        <view v-if="i?.type?.includes('video')">
          <up-icon name="play-circle-fill" size="30"></up-icon>
        </view>
        <image
          v-else
          :src="i?.url"
          mode="aspectFill"
          lazy-load="false"
          @click="onPreviewMedia(i?.url)"
        />
        <view class="upload_item_delete" @click="onDelete(index)">
          <uni-icons type="clear" color="#f00" size="25"></uni-icons>
        </view>
        <view
          v-if="index === 0 && props?.hasCover"
          class="upload_item_cover"
          @click="onDelete(index)"
        >
          <view class="cover_font"> 封 </view>
        </view>
      </view>
      <view
        class="upload_item"
        v-if="!props?.display && list?.length < (props?.count || 1)"
        @click="handleUpload"
        :style="props?.styles"
      >
        <up-icon
          :name="props?.iconName"
          :label="props.labelTitle || ''"
          color="#333"
          :size="props?.iconSize || 50"
          v-if="props?.iconName"
        ></up-icon>
        <up-icon
          :name="props?.iconName || 'plus'"
          :label="props.labelTitle || ''"
          labelPos="bottom"
          labelSize="20rpx"
          lableColor="#666"
          color="#333"
          size="20"
          space="6px"
          v-else
        ></up-icon>
      </view>
      <view class="no_data" v-if="props?.display && !list?.length"> 无媒体文件 </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import watermark from '@/common/libraries/watermark'
import { upload } from '@/common/libraries/upload'
import { onMounted, ref, watch, defineProps, defineEmits } from 'vue'
const props = defineProps([
  'valueModel',
  'size',
  'display',
  'length',
  'borderTop',
  'mediaType',
  'labelTitle',
  'count',
  'styles',
  'hasCover',
  'iconName',
  'iconSize',
  'required',
  'title'
])
const emit = defineEmits(['update:valueModel'])
const list = ref<{ url?: string; type?: string }[]>([])
const handleUpload = async () => {
  const res: any = await upload(props.count || 1, props?.size, props?.mediaType || ['image'])
  console.log(res, 'res')
  list.value = [...list.value, ...res]
  emit('update:valueModel', list.value)
}

const onDelete = (idx: number) => {
  if (props?.display) {
    return false
  }
  list.value.splice(idx, 1)
}

watch(
  () => props?.valueModel,
  () => {
    if (props.valueModel) {
      list.value = props.valueModel || []
    }
  }
)

const onPreviewMedia = (url?: string) => {
  console.log(url, 'url1')
  if (url) {
    uni.showLoading({
      title: '获取图片中...',
      mask: true
    })
    console.log(url, 'url2')
    uni.downloadFile({
      url: url,
      success: res => {
        const imagePath = res.tempFilePath // 下载成功的图片路径
        console.log(imagePath, 'imagePath')
        uni.hideLoading()
        uni.previewMedia({
          sources: [
            {
              url: imagePath,
              type: 'image'
            }
          ],
          current: 0
        })
        // watermark.addWatermark(imagePath, '仅用于内部查看，请勿外传')
      },
      fail: err => {
        uni.showToast({
          title: '获取失败',
          duration: 1000
        })
        console.error('下载图片失败:', err)
      }
    })
  }
}

onMounted(() => {
  if (props.valueModel) {
    list.value = props.valueModel || []
  }
})
</script>
<style lang="scss" scoped>
.upload_content {
  padding: 0 0 10rpx 0;
  .upload_title {
    font-size: 29rpx;
    padding: 30rpx 0 5rpx 0;
    color: #333;
    text {
      color: #f00;
    }
  }
  .subTitle {
    color: #ccc;
    font-size: 23rpx;
  }
}
.upload_body {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
  padding: 20rpx 0; // 可选，增加内边距以便更好地显示滚动条

  .no_data {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 120rpx;
    font-size: 25rpx;
    color: #666;
    background-color: #f8f8f8;
    border-radius: 6rpx;
  }
}
.upload_item {
  position: relative;
  flex-shrink: 0; // 防止子元素缩小
  display: flex;
  align-items: center;
  justify-content: center;
  width: 155rpx;
  height: 155rpx;
  background-color: #f3f3f3;
  border: 1px solid #f3f3f3;
  border-radius: 10rpx;
  image {
    width: 100%;
    height: 100%;
    border-radius: 10rpx;
  }
  .upload_item_delete {
    position: absolute;
    top: -20rpx;
    right: -5rpx;
    width: 40rpx;
    height: 40rpx;
    z-index: 10;
  }
  .upload_item_cover {
    position: absolute;
    top: -18rpx;
    left: -43rpx;
    width: 116rpx;
    height: 64rpx;
    background: #e37318;
    font-size: 24rpx;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    transform: rotate(-45deg);

    .cover_font {
      transform: rotate(45deg);
    }
  }
}
</style>
