<template>
    <div>
    <div class="upload-list" v-for="(item, index) in uploadList" :key="index">
        <template>
            <img :src="item"/>
            <div class="upload-list-cover">
                  <i class="el-icon-picture-outline" @click="handleView(item)"></i>
                  <i class="el-icon-remove" @click="handleRemove(item)"></i>
            </div>
        </template>
    </div>
    <el-upload
            class="avatar-uploader"
            :action="uploadUrl"
            :accept="'image/*,video/*'"
            :show-file-list="false"
            :on-success="uploadEditorSuccess"
            :on-error="uploadEditorError"
            :before-upload="beforeEditorUpload">
            <div style="width: 58px;height:58px;line-height: 58px;display: inline-block;font-size:50px;">
              <i class="el-icon-circle-plus-outline"></i>
            </div>
        </el-upload>
    <!-- <Modal title="查看图片" v-model="visible">
        <img :src="imgName" v-if="visible" style="width: 100%"/>
    </Modal> -->
    <el-dialog title="查看图片" :visible.sync="visible" append-to-body>
      <img :src="imgUrl" v-if="visible" style="width: 100%"/>
    </el-dialog>
</div>
</template>

<script>
import Cookies from 'js-cookie'
  
export default {
  data(){
    return {
      uploadList:[],
      visible:false,
      imgUrl:"",
      uploadUrl:`${window.SITE_CONFIG['apiURL']}/sys/oss/upload?token=${Cookies.get('token')}`
    }
  },
  methods:{
     //上传图片之前async
     beforeEditorUpload(res, file){
        console.log(res);
        console.log(file);
        const check = this.uploadList.length < 5;
            if (!check) {
                this.$message.error('最多只能上传 5 张图片')
            }
            return check;
      },
      // 上传图片成功
      uploadEditorSuccess(res, file) {
        console.log("上传成功")
        // this.$emit('upload',res, file)
        console.log(res, file);
        //拼接出上传的图片在服务器的完整地址
        let imgUrl=res.data.src;
        let type=imgUrl.substring(imgUrl.lastIndexOf(".")+1);
        console.log(type);
        file.imgUrl = imgUrl;
        this.uploadList.push(imgUrl);
      },
      // 上传(文件)图片失败
      uploadEditorError(res, file) {
        console.log(res);
        console.log(file);
        //页面提示
        this.$message.error('上传图片失败')
        //取消上传动画
        this.quillUpdateImg = false;
      },
      //上传组件返回的结果
      uploadResult:function (res){
        this.uploadUrlPath=res;
      },
      handleView(url) {
            this.imgUrl = url;
            this.visible = true;
      },
      handleRemove(file) {
            // 从 upload 实例删除数据
            const fileList = this.uploadList;
            this.uploadList.splice(fileList.indexOf(file), 1);
      },
  },
  created () {

  },
  //只执行一次，加载执行
  mounted () {
    console.log("开始加载")
    // 初始给编辑器设置title
  },


}
</script>

<style>
    .upload-list {
            display: inline-block;
            width: 60px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            border: 1px solid transparent;
            border-radius: 4px;
            overflow: hidden;
            background: #fff;
            position: relative;
            box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
            margin-right: 4px;
        }

        .upload-list img {
            width: 100%;
            height: 100%;
        }

        .upload-list-cover {
            display: none;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, .6);
        }

        .upload-list:hover .upload-list-cover {
            display: block;
        }

        .upload-list-cover i {
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            margin: 0 2px;
        }

        .avatar-uploader{
          display: inline-block;
        }
</style>
  