<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <view class="component-img-upload">
    <view
      v-show="!img"
      class="img-upload"
      @tap="uploadImg()"
    />
    <view
      v-show="img"
      class="spec-value-image"
    >
      <image
        :data-sss="util.checkFileUrl(img)"
        class="img"
        mode="aspectFill"
        :src="util.checkFileUrl(img)"
      />
      <view
        class="close-img"
        @tap="deleteImg"
      />
    </view>
  </view>
</template>

<script setup>
import { reactive, toRefs, watch } from 'vue'
import util from '../../utils/util'

const emit = defineEmits(['deleteImg', 'upLoadImg'])
const props = defineProps({
  pic: {
    default: '',
    type: String
  },
  imgId: {
    default: -1,
    type: Number
  }
})

const Data = reactive({
  img: '',
  elxImgboxVisible: false
})

const { img } = toRefs(Data)

watch(() => props.pic, val => {
  Data.img = val
}, { immediate: true })

// 删除图片
const deleteImg = () => {
  Data.img = ''
  emit('deleteImg', props.imgId)
}

// 上传图片
const uploadImg = () => {
  util.chooseImage({}).then(data => {
    emit('upLoadImg', { filePath: data[0].filePath, id: props.imgId })
  })
}
</script>

<style lang="scss" scoped>
.component-img-upload {
  .img-upload {
    width: 160rpx;
    height: 160rpx;
    background: #f6f8fa;
    border-radius: 10rpx;
    position: relative;

  }

  .img-upload::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 38rpx;
    transform: translate(-50%, -50%);
    border-top: 4rpx solid #c6c7c9;
    border-radius: 4rpx;
  }

  .img-upload::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    height: 38rpx;
    transform: translate(-50%, -50%);
    border-left: 4rpx solid #c6c7c9;
    border-radius: 4rpx;
  }

  .spec-value-image {
      position: relative;

      .img {
        width: 160rpx;
        height: 160rpx;
        display: block;
        border-radius: 10rpx;
      }

      .close-img {
        width: 36rpx;
        height: 36rpx;
        background: #000000;
        opacity: 0.3;
        border-radius: 0 10rpx 0 30rpx;
        position: absolute;
        bottom: 124rpx;
        left: 124rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .close-img::after {
        content: '';
        display: block;
        width: 14rpx;
        height: 14rpx;
        background: url(../../static/images/close.png) no-repeat;
        background-size: 14rpx 14rpx;
      }
    }

}
</style>
