<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="'id'"
          :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:certificateFile="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"
    >
      <iframe width="100%" height="700px" :src="iframeURL" frameborder="0"></iframe>
    </p-modal>
  </div>
</template>

<script>
import { getSupplierMst, cols } from './config'

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,
    }
  },

  methods: {
    initLineData() {
      let itemId = this.item.itemId
      getSupplierMst({ itemId: itemId }).then((res) => {
        if (!res.success) {
          this.$exception(res)
          return
        }
        this.dataList = res.data.map((t) => {
          return { ...t, ...this.item }
        })
      })
    },
    readPdf(url) {
      // 预览
      this.iframeVisible = true
      this.iframeURL = url
    },

    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>
