<template>
  <el-drawer
  show-close
    size="100%"
    append-to-body
    title="查看pdf文件"
    :visible="drawerVisible"
  
    :before-close="handleClose">
     <div style="height: 100%;">
      <!-- 保存按钮 -->
      <div style="position: absolute; top: 20px; right: 60px; z-index: 100;">
        <el-button 
        v-if="isSave"
        :loading="saveExcelJsonLoadPdf"
          type="primary" 
          icon="el-icon-save" 
          @click="savePdf"
          size="mini"
        >
          保存表格
        </el-button>
      </div>
      
      <viewPdf :pdfUrl="pdfUrl" v-if="drawerVisible"/>
    </div>
  </el-drawer>
</template>

<script>
import viewPdf from './viePdf.vue'

export default {
  components: { viewPdf },
  props: {
    saveExcelJsonLoadPdf: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    saveExcelJsonLoadPdf(newVal) {
     this.saveExcelJsonLoadPdf = newVal
    }
  },
  data() {
    return {
      drawerVisible: false,
      pdfUrl: '',
      isSave:false
    }
  },
  methods: {
    // 暴露给父组件调用的方法
    show(url,val) {
      console.log(url,'url');
      
      this.pdfUrl = url
      this.drawerVisible = true
      this.isSave = val
    },
    handleClose(done) {
      this.drawerVisible = false
      done()
    },
    savePdf() {
      this.$emit('save-pdf')
    }
  }
}
</script>