<template>
  <div class="base-updata">
    <div class="img-sort">
      <ul class="el-upload-list el-upload-list--picture-card">
        <draggable
          v-model="imgList"
          :animation="1000"
          :sort="true"
          v-if="showDraggable"
        >
          <li
            class="el-upload-list__item is-success animated"
            v-for="(item, index) in imgList"
            :key="index"
            style="margin-right: 10px"
          >
            <img
              :src="item.url"
              alt=""
              class="el-upload-list__item is-success"
            />
            <!--   <i class="el-icon-close"></i> -->
            <span class="el-upload-list__item-actions">
              <!-- 预览 -->
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(item)"
              >
                <i class="el-icon-zoom-in"></i>
              </span>
              <!-- 删除 -->
              <span
                class="el-upload-list__item-delete"
                @click="handleRemove(index)"
                v-if="!disabled"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </li>
        </draggable>
        <template v-else>
          <li
            class="el-upload-list__item is-success animated"
            v-for="(item, index) in imgList"
            :key="index"
            style="margin-right: 10px"
          >
            <img
              :src="item.url"
              alt=""
              class="el-upload-list__item is-success"
            />
            <i class="el-icon-close"></i>
            <span class="el-upload-list__item-actions">
              <!-- 预览 -->
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(item)"
              >
                <i class="el-icon-zoom-in"></i>
              </span>
              <!-- 删除 -->
              <span
                class="el-upload-list__item-delete"
                @click="handleRemove(index)"
                v-if="!disabled"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </li>
        </template>
      </ul>
      <el-upload
        style="display: inline-block"
        ref="uploadFilemain"
        :show-file-list="false"
        :file-list="imgList"
        list-type="picture-card"
        :before-upload="beforeUpload"
        :http-request="(file, fileList) => requestImgHttps(file)"
        :on-preview="handlePictureCardPreview"
        :limit="limit"
        :disabled="disabled"
        :class="imgList.length == limit ? 'mf' : ''"
      >
        <!--            :disabled="optType == 'detail'" -->
        <i class="el-icon-plus"></i>
      </el-upload>
      <span style="position: relative; top: 116px; left: 10px"
        >{{ imgList.length }}
        <span v-if="limit != 100">{{ "/" + limit }}</span>
        <span v-if="showDraggable">（拖拽排序）</span></span
      >
    </div>
    <!-- 图片预览 -->
    <el-dialog v-model:visible="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import draggable from "vuedraggable";

export default {
  name: "base-updata",
  components: { draggable },
  props: {
    //图片列表
    imgList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    //是否显示拖拽
    showDraggable: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    //上传图片署名
    imgTypeName: {
      type: String,
      Request: true,
    },
    //上传图片下标
    imgTypeIdex: {
      type: Number,
      Request: true,
    },
    //图片限制
    limit: {
      type: Number,
      default: () => {
        return 100;
      },
    },
    //图片禁止
    disabled: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
  },
  data() {
    return {
      dialogVisible: false, //图片预览
    };
  },
  created() {},
  mounted() {},
  methods: {
    //图片上传验证
    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        this.changeLimt(file).then((res) => {
          file.isFlag = res;
          if (file.isFlag) {
            return resolve(true);
          } else {
            return reject(false);
          }
        });
      });
    },
    changeLimt(file) {
      const _this = this;
      const isSize = new Promise(function (resolve, reject) {
        const _URL = window.URL || window.webkitURL;
        const img = new Image();
        img.src = _URL.createObjectURL(file);
        img.onload = function () {
          let e_width = img.width >= 600 && img.width <= 1200;
          let e_height = img.height >= 600 && img.height <= 1200;
          if (
            file.type == "image/png" ||
            file.type == "image/jpg" ||
            file.type == "image/jpeg"
          ) {
            const valid = e_width && e_height;
            if (valid) {
              return resolve();
            } else {
              return reject();
            }
          } else {
            return reject();
          }
        };
      }).then(
        () => {
          return true;
        },
        () => {
          _this.$message.warning({
            message:
              "图片规格为jpg或png，建议形状正方形，尺寸建议800*800像素，最大支持1200*1200像素",
            btn: false,
          });
          return false;
        }
      );

      return isSize;
    },
    //预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //删除
    handleRemove(index) {
      this.$emit("handleRemove", this.imgTypeName, index);
    },
    /**
     * 上传图片 请求
     * @param {string} file 图片文件
     * @param {string} imgTypeName 图片署名
     * @param {string} imgTypeIdex 图片位置下标
     * @return {Function} 抛出函数requestImgHttps
     */
    requestImgHttps(file) {
      this.$emit("requestImgHttps", file, this.imgTypeName, this.imgTypeIdex);
    },
  },
};
</script>
<style lang='scss' scoped>
.img-sort {
  display: flex;
  flex-wrap: wrap;
}
.mf {
  ::v-deep .el-upload--picture-card {
    display: none !important;
  }
}
</style>



