/*
 * @Descripttion:  <dxxImgViewer :src="imgitem" /><dxxImgViewer :srcList="imgitems" :multiple="true" />
 <dxxImgViewer :src-list="item.value" :multiple="true" selfclass="fileImgs">
            <template slot-scope="target">
              <div class="tc">
                <a :href="target.value.url" :download="target.value.name">下载</a>
              </div>
            </template>
          </dxxImgViewer>
 * @Version: 1.0
 * @Author: +C
 * @Date: 2022-03-03 10:05:02
 * @LastEditors: +C
 * @LastEditTime: 2022-04-18 14:11:31
 */
<template>
  <!-- 单图片模式 -->
  <vue-viewer :thumb="src.url" :full="src.url" v-if="!multiple">
    <slot :value="src"></slot>
  </vue-viewer>
  <!-- 多图片模式 -->
  <vue-viewer multiple :thumb="imglist" :full="imglist" :list-ul-class="selfclass?selfclass:'image-list'" v-else>

    <template slot-scope="target">
      <div class="tc" v-if="isDownload">
        <a :href="srcList[target.index].url" :download="srcList[target.index].name">下载</a>
      </div>

      <a-icon type="close-circle" theme="outlined" class="delita" v-if="isDelete" @click.stop="onRemove(target.index)" />
    </template>

  </vue-viewer>
</template>

<script>
import Vue from 'vue'
import ImageViewer from 'vue2-viewer';
Vue.use(ImageViewer);
export default {
  name: '',
  data() {
    return {};
  },
  //页面的构造方法
  created() { },
  //页面引用的组件
  components: {},
  //监控计算变量
  computed: {
    // 计算属性的 getter
    imglist: function () {

      let list = this.XEUtils.pluck(this.srcList, 'url') // [11, 33]
      console.log(list)
      return list
    }
  },
  //父页面传递参数
  props: {
    multiple: {
      type: Boolean,//类型 String Number Object Array Boolean
      required: false,//是否必填
      default: false // 默认值
    },
    src: {
      type: String,//类型 String Number Object Array Boolean
      required: false,//是否必填
      default: "" // 默认值
    },
    srcList: {
      type: Array,//类型 String Number Object Array Boolean
      required: false,//是否必填
      default: () => [] // 默认值
    },
    selfclass: {
      type: String,//类型 String Number Object Array Boolean
      required: false,//是否必填
      default: "" // 默认值
    },
    //是否要下载
    isDownload: {
      type: Boolean,//类型 String Number Object Array Boolean
      required: false,//是否必填
      default: false // 默认值
    },
    //是否要删除
    isDelete: {
      type: Boolean,//类型 String Number Object Array Boolean
      required: false,//是否必填
      default: false // 默认值
    }


  },
  //父页面定义方法给子页面inject调用
  providee() { return {} },
  //子组件调用注入到父页面providee
  inject: [],
  //监听
  watch: {},
  //dom加载完
  mounted() {
    console.log(this.srcList)
  },
  //页面的自定义方法
  methods: {

    //删除第几个
    onRemove(index) {
      this.$emit('remove', index)
    }
  },
};
</script>

<style scoped>
.image-list {
  margin: 0;
  padding: 0;
}
.image-list li {
  display: inline-block;
  margin: 0 10px;
  list-style: none;
  position: relative;
}
.image-list li img {
  box-shadow: 0 0 5px #333;
}
.delita {
  color: crimson;
  background: #fff;
  position: absolute;
  right: 2px;
  top: 2px;
  font-size: 20px;
  border-radius: 10px;
  cursor: pointer;
}
</style>