<template>
  <el-dialog ref="diaFrom" v-dialogDrag title="查看详情" :close-on-click-modal="false" :visible.sync="daStatus"
             width="80%"
             top="10px" :before-close="cancel">
    <div class="fileBox">
      <el-card style="width:30%" :body-style="{ padding: '6px' }">
        <el-table @row-click="previewImg" :data="fileList" border tooltip-effect="dark" max-height="300" size="mini">
          <el-table-column align="center" show-overflow-tooltip label="文件名称" prop="file_name"></el-table-column>
        </el-table>
        <div style="padding-top:20px">
          <el-table :data="lookList" border size="mini" max-height="480px">
            <el-table-column align="center" prop="columnChnName" label="字段名"></el-table-column>
            <el-table-column align="center" prop="value" label="值">
              <template slot-scope="scope">
                <span v-if="scope.row.columnName === 'fonds_no'">
                  {{ (fondsList.filter(f => f.fondscode === scope.row.value)[0] || {}).codeName }}
                </span>
                <span v-if="scope.row.columnName !== 'fonds_no'">{{ scope.row.value }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
      <el-card style="width:69%" :body-style="{ padding: '6px' }">
        <div class="demo-image__lazy">
          <iframe style="text-alin:center" v-if="imgType==='pdf'" noresize align=center width="100%" height="750px"
                  :src="picUrl" frameborder="0" scrolling="no"></iframe>
          <template
            v-if="imgType==='ofd'"
          >
            <iframe
              :key="ofdUrl"
              style="text-align: center"
              noresize
              align="center"
              width="100%"
              height="750px"
              :src="`./yhofd/yhofd.html?name=${rowTable.file_name_server}&url=${ofdUrl}`"
              frameborder="0"
              scrolling="auto"
            ></iframe>
          </template>
          <viewer v-else-if="imgType==='tif' " :images="canvasList">
            <img v-for="(item,index) in canvasList" :src="item" :key="`${index}_tif`"
                 :class="tif_length>1 ? '':'tif_img'" height="300" title="请点击查看">
            <!-- <div style='padding: 0px 15px'>{{rowTable.file_name}}</div> -->
          </viewer>
          <el-image v-else class="imgs" :src="picUrl" fit="cover">
            <div slot="error"></div>
          </el-image>
        </div>
      </el-card>
    </div>
  </el-dialog>
</template>
<script>
import localStronge from "@/api/localData";

export default {
  props: {
    daStatus: {
      type: Boolean,
      default: () => false,
    },
    fileList: {
      type: Array,
      default: () => [],
    },
    lookList: {
      type: Array,
      default: () => [],
    },
    fondsList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      imgType: "",
      rowTable: [],
      picUrl: "  ",
      canvasList: [],
      tif_length: 0,
      ofdUrl:"",
    }
  },
  methods: {
    cancel() {
      this.$emit("cancel")
    },
    async previewImg(row) {
      this.rowTable = row;
      let file_type = (row.file_type).toLowerCase();
      this.picUrl =
        process.env.NODE_ENV === 'development' ?
          "http://" +
          localStronge.getServiceip().ip +
          ":" +
          localStronge.getServiceip().host +
          "/point-strategy/v/archiveFile/showImg?fileName=" +
          row.file_name_server +
          "&path=" + encodeURI(encodeURI(row.file_des)) + '&data' + new Date() :
          'http://' + window.location.host + "/point-strategy/v/archiveFile/showImg?fileName=" + row.file_name_server +
          "&path=" + encodeURI(encodeURI(row.file_des)) + '&data' + new Date() + '&userId=' + sessionStorage.getItem("userid");
      if (file_type === "pdf") {
        this.imgType = 'pdf';
        return;
      } else if (file_type === "ofd") {
        this.imgType = 'ofd';
        this.ofdUrl = `${row.file_des}/${row.file_name_server}`;
      }else if (file_type == "tif") {
        this.imgType = 'tif';
        this.canvasList = [];
        const response = await fetch(this.picUrl);
        const buffer = await response.arrayBuffer();
        const Tiff = require("tiff.js");
        const tiff = new Tiff({
          buffer,
        });
        this.tif_length = tiff.countDirectory();
        for (let i = 0, len = tiff.countDirectory(); i < len; ++i) {
          tiff.setDirectory(i);
          var imgs = tiff.toDataURL(); // 转化成base64
          if (imgs) {
            this.canvasList.push(imgs);
          }
        }
      } else {
        this.imgType = 'img';
      }
    }
  }
}

</script>
<style lang="scss" scoped>
::v-deep .el-drawer__header {
  margin-bottom: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  font-size: 17px;
}


.fileBox {
  display: flex;
  justify-content: space-around;

  .caseBox {
    border: 1px rgb(211, 211, 211) solid;
    display: flex;
    justify-content: space-around;
  }
}

.demo-image__lazy {
  background: rgb(245, 245, 245);
  padding: 5px 15px;
  text-align: center;

  .imgs {
    max-width: 58%
  }

  .tif_img {
    width: 100%;
    height: auto;
  }
}

</style>
