<template>
  <view class="photoList">
    <view class="itemBox photoBox" v-for="(img, index) in localValue" :key="index">
      <view class="closeBtn" @click="deleteImg(index)">
        <image class="img" src="../../../static/images/iconCloseGray.svg" mode="scaleToFill"></image>
      </view>
      <image class="img" :src="img" mode="aspectFit" @click="showScreenImg(index)"></image>
    </view>
    <view class="itemBox chooseBtn" @click="chooseImg">
      <view class="inner">
        <image class="img" src="../../../static/images/upload-pic-icon.svg" mode="scaleToFill"></image>
        <text class="desc">添加照片</text>
      </view>
    </view>
  </view>
</template>

<script  lang="ts">

import {session} from "@/store/modules/session";
import {url} from "@/utils/url";

export default {
  name:"ljChooseImg",
  props: {
    imgList: {
      type: Array,
      default () {
        return []
      }
    },
  },
  data(){
    return{
      localValue:this.imgList
    }
  },
  methods:{
    deleteImg(index : any){
      this.localValue.splice(index, 1);
    },
    chooseImg(){
      uni.chooseImage({
        count: 9,
        sourceType: ['album', 'camera'],
        success: (res) => {
          let tempFilePaths: any = res.tempFilePaths;
          tempFilePaths.map((item) => {
            uni.uploadFile({
              url: "http://192.168.202.34:30000/prod-api/file/upload",
              // url: "/dev-api/file/upload",
              fileType: 'image',
              filePath: item,
              header: {
                Authorization: 'Bearer ' + session.user?.access_token,
              },
              name: 'file',
              success: (res) => {
                uni.hideLoading();
                if (!res.data) {
                  return;
                }
                let data = JSON.parse(res.data);
                this.localValue = [...this.localValue, data.data.url];
                uni.hideLoading();
              },
              fail: (err) => {
                console.log(err);
                uni.showToast({
                  title:"图片上传失败！",
                  icon:"none"
                })
                uni.hideLoading();
              },
            });
          });
        },
      });
    },
    showScreenImg(index : any){
      uni.previewImage({
        current: index,
        urls: this.localValue,
        loop: true
      });
    }

  },
  watch: {
    localValue(newVal) {
      this.$emit('update:imgList', newVal);
    }
  }

}


</script>

<style scoped lang="scss">

.photoList {
  display: flex;
  flex-wrap: wrap;
  padding-top: 12rpx;

  .chooseBtn {
    width: 202rpx;
    height: 202rpx;
    background: #fafafa;
    border-radius: 12rpx;
    border: 2rpx dashed #e2e2e2;
    display: flex;
    justify-content: center;
    align-items: center;

    .inner {
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .desc {
      font-size: 28rpx;
      font-weight: 400;
      color: #24252a;
      line-height: 40rpx;
    }

    .img {
      width: 50rpx;
      height: 50rpx;
      margin-bottom: 6rpx;
    }
  }

  .photoBox {
    width: 202rpx;
    height: 202rpx;
    background: #fafafa;
    border-radius: 12rpx;
    position: relative;

    .closeBtn {
      position: absolute;
      top: -12rpx;
      right: -12rpx;
      z-index: 2;
      width: 36rpx;
      height: 36rpx;

      .img {
        width: 36rpx;
        height: 36rpx;
      }
    }

    .img {
      width: 202rpx;
      height: 202rpx;
      border-radius: 12rpx;
    }
  }

  .itemBox {
    flex: 0 0 202rpx;
    margin-right: 10rpx;

    &:last-child {
      margin-right: 0;
    }
  }
}
</style>