<template>
  <div class="from-clues">
      <!-- 表单部分 -->
      <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="middle_padding" v-if="isToPrint">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
          <el-form-item label="印刷序列号：" prop="ysxlh">
            <el-select v-model="ruleForm.ysxlh" placeholder="请选择">
              <el-option
              v-for="item in ysxlh"
              :key="item.ysxlh"
              :label="item.ysxlh"
              :value="item.ysxlh">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="zsyl-box">
        <div class="zsyl-left">
          <div class="zsyl-title">
              <span v-if="bdcqz.bdcqzh">{{bdcqz.bdcqzh}}</span>
              <span v-else>____(  )________不动产权第      号</span>
          </div>
          <table class="table-column">
            <tr v-for="(item, colindex) in columns" :key="colindex">
              <td>
                <span>{{ item.label }}</span>
              </td>
              <td>
                <span>
                  {{ getRowValue(item.prop) }}
                </span>
              </td>
            </tr>
          </table>
        </div>
        <div class="zsyl-right">
        <div class="zsyl-title">附记</div>
        <div class="zsyl-text"></div>
        </div>
      </div>
    </div>
</template>

<script>
import { datas } from "../javascript/zsyl.js";
import { readYsxlh,certificate,getSlsqBdcqzList} from "@/api/fqsq.js"
export default {
  components: {
  },
  props: {
    formData: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {
      //印刷序列号集合
      ysxlh: [],
      //列名称对象
      columns: [],
      //选择的不动产权证文件
      bdcqz: '',
      //证书打开类型 是否需要展示打印按钮
      isToPrint: false,
      //tab切换栏数组
      headTabBdcqz: [],
      //tab选择绑定值
      activeName: '',
      ruleForm: {
        bsmBdcqz: '',
        szmc: '不动产权证书',
        bdcqzlx: '',
        szzh: '',
        ysxlh: '',
      },
      rules: {
        ysxlh: [
          { required: true, message: '请选择印刷序列号', trigger: 'change' }
        ],
      },
    }
  },
  mounted(){
  },
  created() {
    this.columns = datas.columns();
    if(this.formData.bdcqz){
       //从缮证进入
      this.bdcqz = this.formData.bdcqz
      if(this.formData.entryType == 2){
         this.ysxlhList();
      }
    }else{
      //从按钮进入
      this.getHeadTabBdcqz();
    }
  },
  methods: {
    //获取印刷序列号列表
    ysxlhList() {
       this.isToPrint = true;
       readYsxlh({zslx:this.bdcqz.bdcqzlx}).then(res => {
            if (res.code === 200) {
               this.ysxlh = res.result 
            }
         })
    },
    //获取证书内容
    getRowValue(code){
      var value = this.bdcqz[code]
      if(code == 'gyqk'){
        switch(value){
          case '1':
            return '单独所有';
          case '2':
            return '共同共有';
          case '3':
            return '按份所有';    
        }
      }
      return value;
    },
    //获取受理申请下全部不动产权证
    getHeadTabBdcqz(){
      getSlsqBdcqzList({bsmSlsq: this.formData.bsmSlsq}).then(res => {
          if(res.code == 200){
            if(res.result){
              this.activeName = res.result[0].bsmBdcqz
              this.bdcqz = res.result[0]
            }
            this.headTabBdcqz = res.result
          }
          
      })
    },
    //tab表头切换方法
    handleClick(e){
      this.bdcqz = this.headTabBdcqz[e.index - 0]
      this.activeName = this.headTabBdcqz.bsmBdcqz
    },
    //打印证书
    printCertificate() {
      this.ruleForm.bsmBdcqz = this.bdcqz.bsmBdcqz
      this.ruleForm.bdcqzlx = this.bdcqz.bdcqzlx
      this.ruleForm.szzh = this.bdcqz.bdcqzh
      certificate(this.ruleForm).then(res => {
          if (res.code === 200) {
            this.$message.success('打印成功');
          }else{
            this.$message.error(res.message);
          }
      })
    }, 
  }
}
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
.zsyl-box{
  display: flex;
  justify-content: space-between;
  padding: 20px;
  background: #FAFBE5;
  .zsyl-left{
    width: 330px;
    .zsyl-title{
      font-size: 18px;
      text-align: center;
    }
  }
  .zsyl-right{
    width: 330px;
    .zsyl-title{
      letter-spacing: 50px;
      text-align: center;
      text-indent: 50px;
    }
    .zsyl-text{
      border: 1px solid #ccc;
      height: 90%;
    }
  }
  .zsyl-title{
    margin-bottom: 12px;
  }
  /deep/.el-table__row{
    background: #FAFBE5!important;
  }
}
.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);
  } 
}
</style>