<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' }">
        <!-- 利用方式查看 -->
        <template>
          <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>
        </template>
        <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-alin: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";
export default {
  props: {
    daStatus: {
      type: Boolean,
      default: () => false,
    },
    lookObj: {
      type: Object,
      default: () => {},
    },
    fileList: {
      type: Array,
      default: () => [],
    },
    lookList: {
      type: Array,
      default: () => [],
    },
    fondsList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      imgType: "",
      rowTable: [],
      picUrl: "",
    };
  },
  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";
      }
    },
  },
};
</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%;
  }
}
</style>
