<template>
  <el-upload
    ref="upload"
    name="file"
    class="avatar-uploader"
    :action="doUpload"
    :show-file-list="false"
    :http-request="doUploadAvatar"
    :before-upload="beforeAvatarUpload"
    :auto-upload="true"
    :accept="accept"
  >
    <!-- 多张图片 -->
    <div v-loading="listLoading" v-if="imgType == 'more'" n class="flex">
      <span v-for="(item, index) in imageList" :key="index" class="img-item">
        <img :src="item" class="avatar" />
        <span
          class="el-icon-error del-icon"
          @click="delImg($event, index)"
        ></span>
      </span>
      <div v-if="imageList.length < imgNum" class="upload-img">
        <i class="el-icon-picture avatar-uploader-icon"></i>
        <span>上传</span>
      </div>
    </div>
    <!-- 单张 -->
    <div v-loading="listLoading" v-else>
      <img v-if="value && showImg" :src="value" class="avatar" />
      <video v-if="value && !showImg" :src="value" class="avatar"></video>
      <div v-if="!value" class="upload-img">
        <i class="el-icon-picture avatar-uploader-icon"></i>
        <span>上传</span>
      </div>
    </div>
  </el-upload>
</template>

<script>
import { pictureLocal } from "@/api/user";
export default {
  data() {
    return {
      doUpload: "",
      value: "",
      showImg: true,
      listLoading: false,
    };
  },
  props: {
    image: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "",
    },
    index: {
      type: Number,
      default: -1,
    },
    accept: {
      type: String,
      default: "image/png,image/gif,image/jpg,image/jpeg",
    },
    imgOrVideo: {
      type: String,
      default: "img",
    },
    // more:多张  '':单张
    imgType: {
      type: String,
      default: "",
    },
    // 张数
    imgNum: {
      type: Number,
      default: 1,
    },
    imageList: {
      type: Array,
      default: () => [],
    },
  },
  created() {
    if (this.image) {
      this.value = this.image;
    }
  },
  watch: {
    image(n) {
      this.value = this.image;
    },
    value(n) {
      if (n) {
        if (n.indexOf("mp") > -1) {
          this.showImg = false;
        } else {
          this.showImg = true;
        }
      }
    },
  },
  methods: {
    doUploadAvatar(obj) {
      this.listLoading = true;
      var avatar = new FormData();
      avatar.append("file", obj.file);
      pictureLocal(avatar).then((res) => {
        this.value = res.data;
        this.listLoading = false;
        this.$emit("getImg", res.data, this.index, this.type);
      });
    },
    delImg(e, index) {
      this.$emit("delImg", index, this.type);
      e.stopPropagation(); // 阻止事件冒泡
    },
    // 图片上传前
    beforeAvatarUpload(file) {
      if (this.imgOrVideo === "img") {
        if (
          !(
            file.type === "image/png" ||
            file.type === "image/gif" ||
            file.type === "image/jpg" ||
            file.type === "image/jpeg"
          )
        ) {
          this.$notify.warning({
            title: "警告",
            message:
              "请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片",
          });
          return;
        }
      } else if (this.imgOrVideo === "video") {
        if (!(file.type === "video/mp4" || file.type === "video/mp3")) {
          this.$notify.warning({
            title: "警告",
            message: "请上传格式为video/mp4, video/mp3的视频",
          });
          return;
        }
      } else {
        if (
          !(
            file.type === "image/png" ||
            file.type === "image/gif" ||
            file.type === "image/jpg" ||
            file.type === "image/jpeg" ||
            file.type === "video/mp4" ||
            file.type === "video/mp3"
          )
        ) {
          this.$notify.warning({
            title: "警告",
            message:
              "请上传格式为image/png, image/gif, image/jpg, image/jpeg, video/mp4, video/mp3的照片视频",
          });
          return;
        }
      }
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isLt2M) {
        this.$notify.warning({
          title: "警告",
          message: "不得超过5M",
        });
        return;
      }
    },
  },
};
</script>
<style scoped lang="scss">
.upload-img {
  height: 92px;
  width: 92px;
  background: #f7f8fc;
  color: #c8cedf;
  display: flex;
  flex-direction: column;
  padding-top: 30px;
}
.avatar {
  height: 92px;
  width: 92px;
}
.flex {
  display: flex;
  justify-content: left;
}
.img-item {
  margin-right: 15px;
  position: relative;
}
.del-icon {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 19px;
  color: #606266;
}
</style>


