<template>
  <div>
    <p-modal
      title="上传图片查看"
      :visible="visible"
      :dialogStyle="{ top: '40px' }"
      :draggable="true"
      :width="'70%'"
      :footer="null"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <div class="box-wrapper">
        <p-table-edit
          ref="mainlist"
          :rowKey="'rcvHeaderPicId'"
          :columns="nColumns"
          :autoLoad="false"
          :remoteUrl="{ url: url, method: 'post' }"
          :remoteData="remoteParams"
          :remoteParams="remoteParams"
          :data-source.sync="dataList"
          :hasRowSelectCheck="true"
          :pagination="false"
          :rowSelectType="false"
          :has-row-count="false"
          :scroll="{ y: 400 }"
        >
          <template v-slot:picFileurl="text">
            <a v-show="!!text" @click="readPdf(text)" class="btn" href="javascript:void(0);"> 预览 </a>
          </template>
        </p-table-edit>
      </div>
    </p-modal>
    <p-modal
      title="预览"
      :visible="iframeVisible"
      :dialogStyle="{ top: '40px' }"
      :draggable="true"
      :width="'70%'"
      :footer="null"
      @cancel="iframeVisible = false"
    >
      <div style="text-align: center">
        <img height="600px" :src="iframeURL" alt="" />
      </div>
      <!-- <iframe width="100%" height="700px" :src="iframeURL" frameborder="0"></iframe> -->
    </p-modal>
  </div>
</template>

<script>
import { getSupplierMst, cols } from "./config";
import { SERVICES_FILE_MANAGEMENT } from "@/config/serviceSettings";

export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    item: {
      type: Object,
      default: null,
    },
  },

  model: {
    prop: "visible",
    event: "change",
  },

  watch: {
    visible: {
      handler(visible) {
        if (!visible) return;
        this.$nextTick(() => {
          this.initLineData();
        });
      },
    },
  },

  data() {
    return {
      nColumns: cols,
      url: "",
      dataList: [],
      remoteParams: {},
      iframeURL: "",
      iframeVisible: false,
      imgUrl: "",
    };
  },

  methods: {
    initLineData() {
      // let itemId = this.item.itemId
      getSupplierMst({ /* itemId: itemId */ rcvLineId: this.item.rcvLineId }).then((res) => {
        if (!res.success) {
          this.$exception(res);
          return;
        }
        this.dataList = res.data.map((t) => {
          return { ...t, ...this.item, picFilename: t.picFilename || "" };
        });
      });
    },
    readPdf(url) {
      // 预览
      //   this.imgUrl = SERVICES_FILE_MANAGEMENT+'/file/view/'+url
      this.imgUrl = url;
      console.log(this.imgUrl, url, "4545");
      this.iframeVisible = true;
      this.iframeURL = this.imgUrl;
    },

    handleOk(e) {
      this.$emit("change", false);
    },

    handleCancel(e) {
      this.$emit("change", false);
    },
  },
};
</script>

<style scoped>
.box-wrapper {
  margin-bottom: 20px;
  background: #fff;
}
.btn {
  color: #2b80ff;
  margin-right: 10px;
  cursor: pointer;
}
.btn:hover {
  text-decoration: underline;
}
</style>
