<template>
  <div style="height: 100%;overflow-y: auto;">

    <h2 style="margin-bottom:20px;font-size:14px;color:#333333;">
      {{$lang('图片')}}
    </h2>

    <viewer :options="opts"
            :images="fileList.map(t => t.fileUrl)"
            class="viewer"
            @inited="inited"
            ref="viewer">
      <template slot-scope="scope">
        <div class="img-list"
             ref="imglist">
          <div v-for="(item,i) of fileList"
               :key="i"
               class="img-item">
            <a-avatar :size="90"
                      :src="item.fileUrl"
                      shape="square" />
            <div class="img-item-ops">
              <div>
                <a-icon type="eye"
                        @click="toView(i)" />
              </div>
            </div>
          </div>
        </div>
      </template>
    </viewer>

    <!-- <div class="img-list"
         ref="imglist">
      <div v-for="(item,i) of fileList"
           :key="i"
           class="img-item">
        <a-avatar :size="90"
                  :src="item.fileUrl"
                  shape="square" />
        <div class="img-item-ops">
          <div>
            <a-icon type="eye"
                    @click="toView(i)" />
            <a-icon type="printer" />
            <a-icon type="delete" />
          </div>
        </div>
      </div>
    </div> -->

  </div>
</template>

<script>
import 'viewerjs/dist/viewer.css'
import Viewer from "v-viewer"
//import Viewer from "v-viewer/src/component.vue"
import { queryList } from "./api";

export default {
  components: {
    viewer: Viewer
  },

  props: {
    uploadId: {
      type: String,
      default: ''
    },
  },

  data() {
    return {
      fileList: [],
      opts: {
        "inline": false, "button": true,
        "navbar": false, "title": false,
        "toolbar": true, "tooltip": false,
        "movable": false, "zoomable": true,
        "rotatable": false, "scalable": false,
        "transition": true, "fullscreen": true,
        "keyboard": false,
        // "url": "data-source"
      }
    };
  },

  created() {
    this.queryList();
  },

  methods: {

    queryList() {
      queryList({
        bizId: this.uploadId,
        bizType: 0,
        enterpriseid: this.$store.state.user.info.enterpriseId,
      }).then(res => {
        if (!res.success) {
          this.$message.error(res.message)
          return
        }
        this.fileList = res.data;
      });
    },

    inited(viewer) {
      this.$viewer = viewer
    },

    toView(i) {
      console.log(this.$viewer)
      this.$viewer.show();
    },

  },

}
</script>

<style scoped>
.img-list {
  display: flex;
  flex-wrap: wrap;
}
.img-item {
  position: relative;
  flex: 0 0 90px;
  border: 1px solid #dfdfdf;
  margin-right: 10px;
  margin-bottom: 10px;
}
.img-item:nth-child(5n) {
  margin-right: 0px;
}
.img-item-ops {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}
.img-item-ops > div {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 26px;
  line-height: 26px;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
}
.img-item-ops > div > i {
  margin: 0px 10px 0;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
}
.img-item:hover .img-item-ops {
  display: block;
}
</style>