<template>
<!-- 打印查看详情 -->
  <el-dialog ref="diaFrom" v-dialogDrag title="查看详情" :close-on-click-modal="false" :visible.sync="printType" width="80%"
    top="10px" :before-close="cancel">
    <div class="fileBox">
      <el-card style="width:30%" :body-style="{ padding: '6px' }">
        <el-button type="primary" size="small" :disabled="!multipleSelection.length" @click="download">原文下载</el-button>
        <el-table @selection-change="handleSelectionChange" @row-click="previewImg" :data="fileList" border
          tooltip-effect="dark" max-height="300" size="mini">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column align="center" show-overflow-tooltip label="文件名称" prop="file_name"></el-table-column>
          <!-- <el-table-column align="center" label="操作" width="80">
            <template slot-scope="scope">
              <i class="el-icon-bottom" @click="download(scope.row)"></i>
            </template>
          </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">
          <el-image v-show="imgType &&imgType != 'pdf'  " class="imgs" :src="picUrl" fit="cover"></el-image>
          <iframe style="text-align:center" v-show="imgType==='pdf'" noresize align=center width="100%" height="750px"
            :src="picUrl" frameborder="0" scrolling="no"></iframe>
        </div>
      </el-card>
    </div>
  </el-dialog>
</template>
<script>
import localStronge from "@/api/localData";
import { downlaodzip } from "@/utils/common";
import { URL_PREFIX } from "@/utils/url-prefix";
import { batchDownloadWatermarking } from "@/api/preFiling/file-management/description";
import { batchDownload } from "@/api/archiveUtilize/archivesRetrieval/authorizedElectronicRecords";
export default {
  props: {
    printType: {
      type: Boolean,
      default: () => false,
    },
    lookObj: {
      type: Object,
      default: () => {},
    },
    fileList: {
      type: Array,
      default: () => [],
    },
    lookList: {
      type: Array,
      default: () => [],
    },
    fondsList: {
      type: Array,
      default: () => [],
    },
    tableName: {
      type: String,
      default: () => "",
    },
    archive_no: {
      type: String,
      default: () => "",
    },
  },
  data() {
    return {
      imgType: "",
      rowTable: [],
      picUrl: "",
      multipleSelection: [],
    };
  },
  methods: {
    cancel() {
      this.$emit("cancel");
    },
    previewImg(row) {
      this.rowTable = row;
      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=" +
            row.file_des +
            "&data=" +
            new Date()+'&userId='+sessionStorage.getItem("userid")
          : "http://" +
            window.location.host +
            "/point-strategy/v/archiveFile/showImg?fileName=" +
            row.file_name_server +
            "&path=" +
            row.file_des +
            "&data=" +
            new Date()+'&userId='+sessionStorage.getItem("userid");
      if (row.file_type === "pdf") {
        this.imgType = "pdf";
        return;
      } else {
        this.imgType = "img";
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    download(row) {
      console.log(this.archive_no);
      let ids = this.multipleSelection.map((item) => item.id);
      let data = {
        tableName: this.tableName,
        ids: ids.join(","),
        archiveNo: this.archive_no,
        userId: sessionStorage.getItem("userid"),
        type: 1,
      };
      console.log(data);
      batchDownloadWatermarking(data).then((res) => {
        downlaodzip(res, "原文下载");
      });
    },
  },
};
</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 {
    width: 58%;
  }
}
::v-deep.el-icon-bottom {
  cursor: pointer;
  font-size: 16px;
  color: #409eff;
}
</style>
