<template>
  <div>
    <p-spin :spinning="loadding">
      <p-card>
        <div slot="title" style="display: inline-block; align-items: center; cursor: pointer" @click="clickEvent">
          <p-icon type="arrow-left" style="color: #1990ff" />
          图片操作
        </div>
        <p-table
          :id="$route.meta.menuId + '_94412'"
          ref="logTable"
          style="margin-top: 10px"
          :columns="tableColumns"
          rowKey="id"
          :expandRowByClick="false"
          :rowSelectFixed="true"
          :rowSelectType="2"
          :hasRowSelectCheck="true"
          :dataSource.sync="dataSource"
          :loading="tabLoding"
          @selectChange="selectChange"
          dragle
          auto-width
          bordered
        >
          <div slot="action" href="javascript:;" slot-scope="text">
            <a slot="action" @click="bizDown(text)">下载</a>
            <a-divider type="vertical" />
            <a slot="action" @click="view(text)">预览</a>
          </div>
        </p-table>
        <div slot="extra">
          <imgsUpload v-model="isUpload" :isView="lookats" @completed="handleUploadImgs" :uploadIdlist="uploadIdlist"></imgsUpload>
          <!--  -->
          <p-button icon="cloud-upload" @click="imgUpload"> 上传 </p-button>
          <p-button icon="delete" style="margin-left: 5px" @click="del"> 删除 </p-button>
          <!-- <p-button icon="cloud-download" style="margin-left: 5px"> 下载 </p-button> -->

          <p-button type="primary" style="margin-left: 5px" @click="handlePrint"> 打印 </p-button>
          <p-button type="primary" style="margin-left: 5px" @click="close"> 关闭 </p-button>
        </div>
      </p-card>
    </p-spin>
    <div v-show="false">
      <img width="100%" height="700px" :src="imgUrl" alt="" />
    </div>

    <viewer ref="viewer" class="viewer" @inited="inited" :images="[decImg]" :options="opts">
      <img :src="decImg" style="width: 200px; height: 200px; display: none" />
    </viewer>
  </div>
</template>

<script>
import { detailColumns } from "./js/config";
import { bizFileAdd, bizFilePage, bizFileDel, bizFileDown } from "./api/index";
import ImgsUpload from "@/views/kzyWMS/components/ImgsUpload";
import storage from "store";
import { ACCESS_TOKEN } from "@/store/mutation-types";
import "viewerjs/dist/viewer.css";
// import { component } from 'v-viewer'
import VueViewer from "v-viewer";
import Vue from "vue";
Vue.use(VueViewer);
export default {
  components: {
    imgsUpload: ImgsUpload,
  },
  props: {
    imgData: {
      type: Array,
      default: () => [],
    },
    resData: {
      type: Object,
      default: {},
    },
  },
  watch: {
    resData(newVal) {
      console.log(newVal, "newVal====");
      this.getList();
      //   this.dataSource = this.imgData;
    },
  },
  data() {
    return {
      loadding: false,
      opts: {
        disabled: "display:none",
        inline: false,
        button: true,
        navbar: false,
        title: false,
        toolbar: false,
        tooltip: false,
        movable: false,
        zoomable: true,
        rotatable: false,
        scalable: false,
        transition: true,
        fullscreen: true,
        keyboard: false,
        // "url": "data-source"
      },
      decImg: "",
      tableColumns: detailColumns(this),
      dataSource: [],
      tabLoding: false,

      isUpload: false,
      lookats: false,
      uploadIdlist: [],
      selectedRows: [],
      remoteUrl: {
        url: "",
        method: "get",
        // headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        // params:{fileName:'123'}
      },
      fileName: "",
      imgUrl: [],
    };
  },
  created() {
    // this.dataSource = this.imgData
    // console.log( this.dataSource,' this.dataSource');
    this.getList();
    console.log(this.resData);
  },
  methods: {
    inited(viewer) {
      this.$viewer = viewer;
    },
    view(data) {
      console.log(data);

      this.decImg = data.fileUrl;
      this.$nextTick(() => {
        this.$viewer.show();
      });
    },
    getList() {
      this.loadding = true;
      var params = {};
      params.bizId = this.resData.bizId;
      params.bizType = this.resData.bizType;
      params.pageNum = 1;
      params.pageSize = 10;
      bizFilePage(params).then((res) => {
        this.loadding = false;
        if (!res.success) {
          this.$exception(res);
          return false;
        }
        this.dataSource = res.data.list;
      });
    },
    //返回上一级
    clickEvent(event) {
      this.$emit("clickEven", event, false);
    },
    //上传
    handleUploadImgs(list) {
      var data = {};
      data.bizId = this.resData.bizId;
      data.bizType = this.resData.bizType;
      data.dataType = 0;
      data.fileName = list[0].name;
      data.relativePath = list[0].path;
      data.fileType = list[0].type;
      data.name = list[0].name;
      data.fileUrl = list[0].path;
      data.fileFolderId = list[0].id;
      let s = list.map((i) => {
        return {
          bizId: this.resData.bizId,
          bizType: this.resData.bizType,
          dataType: 0,
          fileName: i.name,
          relativePath: i.path,
          fileType: i.type,
          name: i.name,
          fileUrl: i.path,
          fileFolderId: i.id,
        };
      });
      bizFileAdd([...s]).then((res) => {
        if (!res.success) {
          this.$exception(res);
          return false;
        }
        this.getList();
      });
    },
    // 上传逻辑
    showUploadImgs(record) {
      this.isUpload = true;
    },
    imgUpload() {
      this.showUploadImgs(this.resData);
    },
    //下载
    bizDown(text) {
      // 从 localstorage 获取 token
      const token = storage.get(ACCESS_TOKEN);
      bizFileDown({
        // directoryId: text.id,
        id: text.fileFolderId,
        access_token: token,
      }).then((res) => {
        let blob = new Blob([res]);
        let downloadElement = document.createElement("a");
        let href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.href = href;
        downloadElement.download = text.fileName; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
        this.iconLoading = false;
      });
    },
    // 批量删除
    del() {
      if (this.selectedRows.length < 1) {
        this.$message.warning("请先选择数据");
        return;
      }
      this.$confirm({
        content: this.$lang("是否确定删除?"),
        onOk: () => {
          return this.delete(this.selectedRows);
        },
      });
    },
    delete(data) {
      var params = [];
      var includeIds = {};
      var aa = {};
      data.forEach((res) => {
        includeIds = res.id;
        params.push(includeIds);
      });
      aa.includeIds = params;
      var b = { ...aa };
      bizFileDel(b).then((res) => {
        if (!res.success) {
          this.$exception(res);
          return false;
        }
        this.$message.success(this.$lang("删除成功"));
        this.getList();
      });
    },
    selectChange(selectedRowKeys, selectedRows) {
      this.selectedRows = selectedRows;
    },
    //关闭
    close(event) {
      this.$emit("clickEven", event, false);
    },
    //根据勾选明细图片打印
    handlePrint() {
      if (this.selectedRows.length < 1) {
        this.$message.warning("请先选择数据");
        return;
      }
      let imgUrl1 = [];
      console.log(this.selectedRows, "selectedRowsselectedRows");
      this.selectedRows.forEach((t) => {
        console.log(t.fileUrl, "t.fileUrlt.fileUrl");
        imgUrl1.push(t.fileUrl);
      });
      let $app = document.getElementById("app");
      let $div = document.createElement("div");
      $div.classList.add("print-img");
      let html = "";
      imgUrl1.forEach((item, index) => {
        html += `<img src="${item}"/>`;
      });
      $div.innerHTML = html;
      document.body.appendChild($div);
      $app.style.display = "none";
      window.onafterprint = function (event) {
        $app.style.display = "block";
        $div.remove();
      };
      setTimeout(() => {
        window.print();
      }, 1000);
    },
  },
};
</script>
<style lang="less" scoped>
@media print {
  .print-img {
    // background-color: red;
    height: 100%;
    width: 100%;
    // font-size: 20px;
    // color: green;
  }
}
</style>
