<template>
  <div class="custom-component">
      <div class="content">
        <span>原始文档:</span>
        <el-link type="primary" @click="previewFile(originalFile)">{{ fileName }}</el-link>
        <span>
          <el-button type="text" size="mini" icon="el-icon-search" @click="previewFile(originalFile)">预览</el-button>
          <el-button type="text" size="mini" icon="el-icon-download" @click="downloadFile(originalFile)">下载</el-button>
        </span>
        <span><el-button type="danger" size="small" @click="uploadOriginalFile">上传原始文档</el-button></span>
      </div>
      <div class="content">
        <span>签章文档:</span>
        <span v-if="hasSigned">
          <el-link type="danger" @click="previewFile(originalFile)">{{ signFileName }}</el-link>
        <span v-if="hasSigned">
          <el-button type="text" size="mini" icon="el-icon-search" @click="previewFile(signedFile)">预览</el-button>
          <el-button type="text" size="mini" icon="el-icon-download" @click="downloadFile(signedFile)">下载</el-button>
        </span>
        </span>

        <span><el-button  type="primary" size="small" @click="uploadSignedFile">上传签章文档</el-button></span>
      </div>

  </div>
</template>

<script>
export default {
  name: 'custom-width-height',
  props: {
    originalFile: {
      type: Object,
      default: null
    },
    signedFile:{
      type:Object,
      default:null
    },
    hasSigned:{
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      fileName: this.originalFile && this.originalFile.original,
      signFileName: this.signedFile && this.signedFile.original
    }
  },
  mounted() {},


  methods: {
    previewFile(file){
      if(file){
        this.$emit('previewFile',file)
      }else{
        this.$alert('无法预览')
      }

    },
    downloadFile(file){
      if(file){
        this.$emit('downloadFile',file)
      }else{
        this.$alert('无法下载')
      }
    },
    uploadOriginalFile(){
      this.$emit('uploadOriginalFile')
    },
    uploadSignedFile(){
      this.$emit('uploadSignedFile')
    }

  }
}
</script>

<style lang="scss">
.custom-component{
  height: auto;

  span{
    +span{
      margin-left: 10px;
    }
  }
}

.custom-component .showImg{
  position: absolute;
    right: 50px;
    z-index: 100;
}
</style>
