<template>
  <div class="body1">
    <p class="title">开户申请书与承诺书</p>
    <img v-if="contentDatas.asset_certificate.type==0" :src="contentDatas.asset_certificate.url"  class="file_img">
    <p  class="upload_span" v-else>
      <a class="table_right_item_a" :href="contentDatas.asset_certificate.url" target="_blank" rel="nofollow">点击下载</a>
    </p>
    <div class="img_span">
      <span @click="onPreview([contentDatas.asset_certificate.url])" v-if="contentDatas.asset_certificate.type==0">查看原图</span>
      <el-upload
        class="upload-demo"
        :action="action"
        :on-change="fileChange"
        :show-file-list="false"
        :on-error="handleAvatarError"
        list-type="picture"
        :on-success="(res,file)=>{handleAvatarSuccess(res,file,0)}"
        >
        <span class="upload_span">重新上传</span>
      </el-upload>
    </div>
    <el-image-viewer
      v-if="showViewer"
      :on-close="closeViewer"
      :url-list="img_url"
      :z-index="9999"
    />
  </div>
</template>
<script>
import bus from '../../bus'
export default {
  props:{
    contentDatas:{
      require: true
    }
  },
  components: {
    ElImageViewer: () => import('element-ui/packages/image/src/image-viewer')
  },
  data() {
    return{
      host:'http://rccqapi.szcaee.cn ',
      action:'http://rccqapi.szcaee.cn /api/Index/uploadFile',
      showViewer:false,
      img_url:[]
    }
  },
  methods:{
    onPreview(img) {
      this.img_url = img
      this.showViewer = true
    },
    // 关闭查看器
    closeViewer() {
      this.showViewer = false
    },
    handleAvatarError(){
      this.$message.error('文件上传失败！');
    },
    handleAvatarSuccess(res,file,type){
      console.info(res)
      if(res.code==1){
        const typeArr1 = ['application/pdf'];
        const isJPG1 = typeArr1.indexOf(file.raw.type) !== -1;
        let file_type;
        if (isJPG1) {
          file_type=1
        }else{
          file_type=0
        }
        let upDate={
          url:{url:this.host+res.data.img_url,type:file_type},
          key:'asset_certificate'
        }
        bus.$emit('img', upDate);
        this.$message.success('文件上传成功！');
      }
    },
    fileChange(file){
      const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg','application/pdf'];
      const isJPG = typeArr.indexOf(file.raw.type) !== -1;
      const isLt3M = file.size / 1024 / 1024 < 10;
      if (!isJPG) {
          this.$message.error('只能上传图片和PDF文件!');
          this.$refs.upload.clearFiles();
          return;
      }
      if (!isLt3M) {
          this.$message.error('上传图片大小不能超过 10MB!');
          this.$refs.upload.clearFiles();
          // this.$set(this.query, 'goods_img', '');
          return;
      }
    },
  }
}
</script>
<style scoped>
  @import url('../../../../assets/css/sidebar.css');
</style>
