<template>
  <div class="from-clues" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)" style="height:720px">
    <!-- 表单部分 -->
    <el-tabs v-model="activeName" @tab-click="handleClick" v-if="headTabBdcqz.length > 1">
      <el-tab-pane :label="item.qlr + '(' + item.bdcqzh + ')'" :name="item.bsmBdcqz"
        v-for="(item, index) in headTabBdcqz" :key="index"></el-tab-pane>
    </el-tabs>
    <div class="no-data" v-if="headTabBdcqz.length == 0">暂无数据</div>
    <img :src="previewImage" class="imgClass">
  </div>
</template>

<script>
import { datas } from "../javascript/zsyl.js";
import { getSlsqBdcqzList, bdcqzPreview } from "@/api/bdcqz.js"
export default {
  name: "zsyl",
  components: {
  },
  props: {
    formData: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {
      loading: false,
      //印刷序列号集合
      ysxlh: [],
      //列名称对象
      columns: [],
      //选择的不动产权证文件
      bdcqz: '',
      //证书打开类型 是否需要展示打印按钮
      isToPrint: false,
      //tab切换栏数组
      headTabBdcqz: [],
      //tab选择绑定值
      activeName: '',
      //证书图片预览
      previewImage: '',
      ruleForm: {
        bsmBdcqz: '',
        szmc: '不动产权证书',
        bdcqzlx: '',
        szzh: '',
        ysxlh: '',
      },
    }
  },
  mounted () {
    this.columns = datas.columns();
    if (this.formData.bdcqz) {
      //从缮证进入
      this.bdcqz = this.formData.bdcqz
    } else {
      //从按钮进入
      this.getHeadTabBdcqz();
    }
  },
  methods: {
    //获取证书内容
    getRowValue (code) {
      var value = this.bdcqz[code];
      return value;
    },
    //获取受理申请下全部不动产权证
    getHeadTabBdcqz () {
      this.loading = true
      getSlsqBdcqzList({ bsmSlsq: this.formData.bsmSlsq }).then(res => {
        if (res.code == 200) {
          if (res.result && res.result.length > 0) {
            this.activeName = res.result[0].bsmBdcqz
            this.bdcqz = res.result[0]
            this.headTabBdcqz = res.result
            this.getBdcqzPreview();
          }else{
            this.loading = false
          }
        }

      })
    },
    //tab表头切换方法
    handleClick (e) {
      this.bdcqz = this.headTabBdcqz[e.index - 0]
      this.activeName = this.headTabBdcqz.bsmBdcqz
      this.getBdcqzPreview();
    },
    getBdcqzPreview () {
      bdcqzPreview(this.bdcqz).then(res => {
        this.loading = false
        let blob = new Blob([res]);
        let url = window.URL.createObjectURL(blob);
        this.previewImage = url;
      })
    },
  }
}
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";

.imgClass {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

.middle_padding {
  padding-bottom: 10px;
}

.zsyl-button {
  text-align: center;
  margin-top: 20px;

  .operation_button {
    width: 100px;
    border: 1px solid rgb(0, 121, 254);
  }

  .dy-button {
    color: white;
    background-color: rgb(0, 121, 254);
  }
}

.table-column {
  border-spacing: 1px;
  width: 100%;

  tr td {
    border: 1px solid #ccc;
    text-align: center;
    height: 40px;
    padding: 4px;
    font-size: 13px;
    background: rgb(251, 249, 229);
  }
}

.zsyl-title {
  background: #FAFBE5;
  text-align: center;
  padding: 5px 0px;
  font-size: 20px;
}

.no-data {
  font-size: 18px;
  display: flex;
  text-align: center;
  justify-content: center;
}
</style>