<template>
  <!-- 图片上传数量等于1显示 -->
  <view class="oa-upload" v-if="uploadCount == 1">
    <view v-if="uploadImage" class="uploadView" :style="uploadStyle">
      <view class="uploadUimage">
        <u-image width="100%" height="100%" :src="uploadImage" @click="handlePreviewImage(uploadImage)"></u-image>
      </view>

      <view v-if="!uploadCloseStatus" class="uploadViewClose" @click="uploadViewClose()">
        <u-icon name="close" color="#ffffff" size="12"></u-icon>
      </view>
    </view>
    <view v-if="!uploadImage" :class="uploadCloseStatus ? 'uploadView upload-buttom uploadDisabled' : 'uploadView upload-buttom'" :style="uploadStyle" @click="uploadClick()">
      <u-icon style="margin: auto" name="plus" color="#909399" :size="uploadIconSize"></u-icon>
    </view>
  </view>

  <!-- 图片上传数量大于1显示 -->
  <view class="oa-upload" v-if="uploadCount > 1">
    <view class="uploadView" :style="uploadStyle" v-for="(up, index) in uploadList" :key="index">
      <view class="uploadUimage">
        <u-image width="100%" height="100%" :src="up[uploadListSrc]" @click="handlePreviewImage(up[uploadListSrc])"></u-image>
      </view>

      <view v-if="!uploadCloseStatus" class="uploadViewClose" @click="uploadViewClose(index)">
        <u-icon name="close" color="#ffffff" size="12"></u-icon>
      </view>
    </view>
    <view v-if="uploadCount > uploadList.length" :class="uploadCloseStatus ? 'uploadView upload-buttom uploadDisabled' : 'uploadView upload-buttom'" :style="uploadStyle" @click="uploadClick()">
      <u-icon style="margin: auto" name="plus" color="#909399" :size="uploadIconSize"></u-icon>
    </view>
  </view>
</template>

<script setup>
import { uploadAvatar } from "@/api/system/user.js";
import { ref, toRefs } from "vue";

const emit = defineEmits(["uploadSuccessChange", "uploadDeleteChange"]);

const props = defineProps({
  //图片路径（uploadCount为1时使用）
  uploadImage: {
    type: String,
    default: "",
  },
  //图片集合（uploadCount大于1时使用）
  uploadList: {
    type: Object,
    default: [],
  },
  //图片集合src（uploadCount大于1时使用）
  uploadListSrc: {
    type: String,
    default: "url",
  },
  //样式
  uploadStyle: {
    type: Object,
    default: {
      width: "80px",
      height: "80px",
    },
  },
  //icon大小
  uploadIconSize: {
    type: String,
    default: "20px",
  },
  //是否禁用
  uploadCloseStatus: {
    type: Boolean,
    default: false,
  },
  //上传图片数量
  uploadCount: {
    type: Number,
    default: 1,
  },
});

const { uploadImage, uploadList, uploadListSrc, uploadStyle, uploadIconSize, uploadCloseStatus, uploadCount } = toRefs(props);

/**
 * @查看图片
 * @点击事件
 */
function handlePreviewImage(url) {
  uni.previewImage({
    urls: [url],
    current: url,
  });
}

/**
 * @upload图片上传
 * @点击事件
 */
function uploadClick() {
  uni.chooseImage({
    count: uploadCount.value, //默认9
    sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ["album", "camera"], //从相册选择、摄像头
    success: function (res) {
      res.tempFilePaths.forEach((url) => {
        if (uploadCount.value >= uploadList.value.length) {
          uploadApi(url);
        }
      });
    },
  });
}

/**
 * @upload图片上传
 * @api接口请求
 */
function uploadApi(url) {
  let data = { name: "file", filePath: url };
  uploadAvatar(data).then((response) => {
    emit("uploadSuccessChange", response.data);
  });
}

/**
 * @upload图片上传
 * @点击事件
 * @删除事件
 */
function uploadViewClose(index) {
  if (uploadCount.value > 1) {
    uploadList.value.splice(index, 1);
    emit("uploadDeleteChange", uploadList.value);
  } else {
    emit("uploadDeleteChange", "");
  }
}
</script>

<style scoped>
.oa-upload {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.uploadView {
  position: relative;
  overflow: hidden;
  width: calc(33% - 10px);
  height: 110px;
  margin: 0 10px 10px 0;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
}

.uploadView .uploadUimage {
  height: 100%;
}

.uploadView .uploadUimage > uni-view {
  height: 100%;
}

.uploadView .uploadViewClose {
  position: absolute;
  background-color: #409eff;
  transform: rotate(45deg);
  width: 40px;
  height: 24px;
  text-align: center;
  right: -15px;
  top: -6px;
  cursor: pointer;
}

.uploadView .uploadViewClose .u-icon {
  font-size: 12px;
  margin-top: 4px;
  margin-left: 10px;
  transform: rotate(-45deg);
  color: #ffffff;
}

.uploadView img {
  width: 100%;
}

.upload-buttom {
  display: flex;
  font-size: 28px;
  color: #909399;
  border: 1px dashed #d9d9d9;
  background-color: #fafafa;
}

.upload-buttom:hover {
  border: 1px dashed #409eff;
}

:deep(.uploadDisabled) {
  display: none !important;
}
</style>
