<template>
  <div class="component-upload-image img-accessory-1">
    <div class="img-box-1">

      <ul class="el-upload-list el-upload-list--picture-card">
        <li v-for="(item, index) in previewList" class="el-upload-list__item is-ready" style="float: left;">
          <auth-img v-if="!isPublic" :auth-src="item.thumbUrl" image-width="80px" image-height="78px"></auth-img>
          <el-image v-if="isPublic" :src="item.thumbUrl" style="width: 80px;height: 78px;border-radius: 4px;"></el-image>
          <label class="el-upload-list__item-status-label"><i class="el-icon-upload-success el-icon-check"></i></label>
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-preview"><i class="el-icon-zoom-in" @click="handlePreview(item)"></i></span>
          </span>
        </li>
      </ul>
    </div>
    <div v-if="dialogVisible">
    <el-dialog :visible.sync="dialogVisible" title="预览" width="800" append-to-body>
      <div style="display: block; max-width: 100%; margin: 0 auto;text-align: center;max-height: 435px;overflow: auto;">
        <auth-img v-if="!isPublic" :auth-src="dialogImageUrl" image-width="435px" ></auth-img>
        <img v-if="isPublic" :src="dialogImageUrl" style="display: block; max-width: 100%; margin: 0 auto" />
      </div>
    </el-dialog>
    </div>
  </div>
</template>

<script>
  import {
    getToken,
    getSign
  } from "@/utils/auth";
  import {
    randomStr20
  } from '@/utils/util'
  import {
    privateFileSaveUrl,
    publicFileSaveUrl,
    publicFileSaveAPI,
    privateFileSaveAPI,
    publicFileGetUrl,
    privateFileGetUrl
  } from '@/api/common'

  import AuthImg from "@/components/AuthImg/index.vue"

  export default {
    components: {
      AuthImg
    },
    props: {
      // 已经上传的文件url列表
      value: [String, Object, Array],
      // 文件类型, 例如['png', 'jpg', 'jpeg']
      fileType: {
        type: Array,
        default: () => ["png", "jpg", "jpeg"],
      },
      // 是否显示提示
      isShowTip: {
        type: Boolean,
        default: true
      },
      // 是否显示提示
      isPublic: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        dialogImageUrl: "",
        dialogVisible: false,
        hideUpload: false,
        baseUrl: process.env.VUE_APP_BASE_API,
        uploadImgUrl: this.isPublic ? publicFileSaveUrl : privateFileSaveUrl, // 上传的图片服务器地址
        fileSaveUrl: '',
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        fileList: [],
        previewList: [],
        reqData: {}
      };
    },
    watch: {
      value(val) {
        if (val) {
          this.initHandle()
        }
      }
    },
    computed: {
      // 是否显示提示
      showTip() {
        return this.isShowTip && (this.fileType || this.fileSize);
      }
    },
    created() {
      this.initHandle()
    },
    methods: {

      initHandle() {
        if (this.value) {
          // 首先将值转为数组
          const list = Array.isArray(this.value) ? this.value : this.value.split(',')
           // console.log("initHandle == list == " + JSON.stringify(list))
          // 然后将数组转为对象数组
          this.previewList = []
          this.fileList = list.map(item => {
            var pitem = {
              name: item.fileName,
              url:  (this.isPublic ? publicFileGetUrl : (this.baseUrl + privateFileGetUrl)) + item.fileName,
              thumbUrl: (this.isPublic ? publicFileGetUrl : (this.baseUrl + privateFileGetUrl)) + item.fileName + "?imageView2/2/w/375",
            };
            this.previewList.push(pitem)
            return item;
          });
          // console.log(this.previewList);
        } else {
          this.previewList = []
          this.fileList = []
        }
      },


      handlePreview(item){
        // console.log("handlePreview item = "+JSON.stringify(item));
        this.dialogVisible = true;
        this.dialogImageUrl = item.url
        // console.log("handlePreview this.dialogImageUrl ====="+this.dialogImageUrl)

      },

      // 预览
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      // 对象转成指定字符串分隔
      listToString(list, separator) {
        let strs = "";
        separator = separator || ",";
        for (let i in list) {
          strs += list[i].url.replace(this.baseUrl, "") + separator;
        }
        return strs != '' ? strs.substr(0, strs.length - 1) : '';
      }
    }
  };
</script>
<style scoped lang="scss">
  // .el-upload--picture-card 控制加号部分
  ::v-deep.hide .el-upload--picture-card {
    display: none;
  }

  // 去掉动画效果
  ::v-deep .el-list-enter-active,
  ::v-deep .el-list-leave-active {
    transition: all 0s;
  }

  ::v-deep .el-list-enter,
  .el-list-leave-active {
    opacity: 0;
    transform: translateY(0);
  }


  .img-accessory-1 {
    padding: 0 1px;
    font-size: 12px;

    img {
      width: 16px;
      vertical-align: middle;
    }

    .img-box-1 ::v-deep .el-upload {
      width: 80px;
      height: 80px;
      line-height: 90px;
    }

    .img-box-1 ::v-deep .el-upload-list {
      .el-upload-list__item {
        width: 80px;
        height: 80px;
      }
    }

    .img-box-1 {
      position: relative;
      margin-top: 0px;

      .add-img {
        position: absolute;
        left: 0;
        top: -30px;
        height: 20px;
        line-height: 20px;
        margin-bottom: 10px;
        color: #2362FB;
      }
    }

    .add-accessory-1 {
      margin-top: 25px;
      margin-bottom: 20px;
      color: #2362FB;

      .wukong-file {
        font-size: 13px;
      }
    }
  }

  .el-upload-litem-actions{
        position: absolute;
        width: 80px;
        height: 78px;
        left: 0;
        top: 0;
        cursor: default;
        text-align: center;
        color: #fff;
        opacity: 0;
        font-size: 20px;
        background-color: rgba(0,0,0,.5);
        -webkit-transition: opacity .3s;
        transition: opacity .3s;
        border-radius: 4px;
  }

  .el-upload-item-actions span {
      display: none;
      cursor: pointer;
  }

  [class^=el-icon-], [class*=" el-icon-"] {
      font-family: "element-icons" !important;
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      vertical-align: baseline;
      display: inline-block;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
  }

  .el-upload-litem-actions .el-upload-item-delete {
      position: static;
      font-size: inherit;
      color: inherit;
  }

  .el-upload-litem-actions .el-upload-item-preview {
      position: static;
      font-size: inherit;
      color: inherit;
  }


  .el-upload-litem-actions:hover {
      opacity: 1;
  }

  .el-icon-zoom-in:before {
      content: "\E777";
  }

  .el-icon-delete:before {
      content: "\E6D7";
  }



  .el-upload-item-actions:hover span {
      display: inline-block;
  }

  .el-upload-item-actions:hover .el-upload-item-preview {
      position: absolute!important;
      left: 10px!important;
      top: 0!important;
      color: #666;
      display: block;
  }

  .el-upload-item-actions:hover .el-upload-item-delete {
      position: absolute!important;
      right: 10px!important;
      top: 0!important;
      color: #666;
      display: block;
  }
</style>
