<template>
  <div style="height: 100%; overflow-y: auto">
    <h2 style="margin-bottom: 20px; font-size: 14px; color: #333333">
      {{ $lang("图片") }}
    </h2>
    <!-- <img v-for="item in fileList" :key="item.id" style="margin:5px" width="100px" height="100px" :src="item.loadPath" alt=""> -->

    <viewer :options="opts" :images="fileList.map((t) => t.path)" 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.path" shape="square" />
            <div class="img-item-ops">
              <div>
                <a-icon type="eye" @click="toView(i)" />
                <a-icon v-if="!isView" type="delete" @click="deleteView(i)" />
              </div>
            </div>
          </div>
        </div>
      </template>
    </viewer>
    <div>
      <h4 style="margin: 20px 0">PDF</h4>
      <a-tag closable @close="preventDefault(i)" v-for="(item, i) in Pdflist" :key="item.id">{{ item.name }}</a-tag>
    </div>

    <!-- <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 { component } from 'v-viewer'
import VueViewer from "v-viewer";
import Vue from "vue";
Vue.use(VueViewer);

import { queryList } from "./api";

export default {
  // components: {
  //   'p-viewer': VueViewer
  // },

  props: {
    urlList: {
      type: Array,
      default() {
        return [];
      },
    },
    uploadIdArray: {
      type: Array,
      default() {
        return [];
      },
    },
    isView: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      fileList: [],
      Pdflist: [],
      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"
      },
      idArrya: [],
    };
  },

  created() {
    this.queryList();
    // console.log(this.urlList,'urlListurlListurlListurlList')
  },
  watch: {
    urlList: {
      handler(newval) {
        if (newval.length > 0) {
          // console.log(newval,'newvalnewvalnewvalnewval')
          newval.forEach((item) => {
            if (!item) return;
            let newObj = {
              id: Math.random(),
              path: item,
            };
            // console.log(newval,'newvalnewvalnewval')
            this.fileList.push(newObj);
          });
        }
      },
      // deep: true,
      immediate: true,
    },
    uploadIdArray: {
      handler(newVal) {
        this.idArrya = newVal;
      },
      // deep: true,
      immediate: true,
    },
  },

  methods: {
    queryList(data) {
      let uploadList = [];
      if (data && data.length > 0) {
        this.idArrya = data;
        //  this.fileList = []
        //  this.Pdflist = []
      }
      this.idArrya.forEach((item) => {
        const params = { id: item };
        uploadList.push(queryList(params));
      });
      Promise.all(uploadList).then((res) => {
        res.forEach((item) => {
          if (item.data) {
            item.data.path = item.data.loadPath;
            if (item.data.type != "pdf") {
              this.fileList.push(item.data);
              console.log(this.fileList, "this.fileList");
            } else {
              this.Pdflist.push(item.data);
            }
          }
        });
      });

      // queryList({id:this.uploadId}).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);
      console.log(this.fileList);
      this.$viewer.show();
    },
    deleteView(i) {
      this.fileList.splice(i, 1);
      let data = this.fileList.concat(this.Pdflist);
      this.$emit("deleteEvet", data);
    },
    preventDefault(i) {
      this.Pdflist.splice(i, 1);
      let data = this.fileList.concat(this.Pdflist);
      this.$emit("deleteEvet", data);
    },
  },
};
</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>
