<!--
    查看单个文档

    import lookDocumentDialog from '@/components/lookDocumentDialog/lookDocumentDialog.vue'

    components: {
      lookDocumentDialog
    },

    <lookDocumentDialog v-if="lookDocumentType" :propsLookDocumentData="propsLookDocumentData"></lookDocumentDialog>

    //查看单个文档
    lookDocumentButton(type){
      if(type==1){
        this.$set(this,'propsLookDocumentData',{
          title:"整改报告",
          url:this.addForm.data7[0].url
        });
        this.$set(this,'lookDocumentType',true);
      }else{
        this.$set(this,'lookDocumentType',false);
      }
    },
-->
<template>
  <el-dialog class="lookDocumentDialog" :title="lookDocumentTitle"
             :visible.sync="lookDocumentType" v-if="lookDocumentType"
             @close="outLook"
             width="1300px" height="700" append-to-body>
    <div class="lookDocumentDialog-page">
      <iframe
        v-if="lookDocumentSrc"
        class="iframe"
        :src="lookDocumentSrc" scrolling="auto" frameborder="0">
      </iframe>
      <p class="positionButton" @click="goPage">全屏</p>
    </div>
    <div slot="footer" class="dialog-footer dialog-footer-box" style="display: flex">
      <p class="dialog-footer-button-null"></p>
      <p class="dialog-footer-button-info" @click="outLook">取消</p>
      <p class="dialog-footer-button-primary" @click="downloadButton">下载</p>
      <p class="dialog-footer-button-null"></p>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: 'lookDocumentDialog',
    props:{
      propsLookDocumentData:{},
    },
    data(){
      return{
        lookDocumentType:true,
        lookDocumentTitle:"",
        lookDocumentSrc:"",
      }
    },
    created(){
      this.$set(this,'lookDocumentTitle',this.propsLookDocumentData.title);
      this.$set(this,'lookDocumentSrc',this.urlJudge(this.propsLookDocumentData.url));
    },
    mounted(){

    },
    methods:{
      // 返回按钮
      outLook(){
        this.$parent.lookDocumentButton(2)
      },
      // 下载按钮
      downloadButton(){
        this.download(this.propsLookDocumentData.url, {}, this.propsLookDocumentData.name)
      },
      //打开新窗口
      goPage(){
        window.open(this.lookDocumentSrc)
      },
    }
  }
</script>

<style scoped lang="scss">
  .lookDocumentDialog{
    .lookDocumentDialog-page{
      display: flex;
      flex:1;
      height:645px;
      overflow: hidden;
      padding:0 50px;
      position: relative;
      .positionButton{
        position: absolute;
        top:15px;
        right: 225px;
        border:1px solid #0183fa;
        border-radius:4px;
        line-height:30px;
        width:60px;
        text-align: center;
        cursor: pointer;
        color:#0183fa;
        background-color: #fff;
      }
      .iframe{
        flex:1;
      }
    }
  }
</style>
