<template>
  <dialogBox title="证书预览" :isReset='false' :isSave='false'   width="865px" 
     @closeDialog="closeDialog" v-model="value">
    <div class="from-clues">
      <!-- 表单部分 -->
      <div class="middle_padding" v-if="zslx">
        <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>____</span>
                    <span>(</span>
                    <span>)</span>
                    <span>____________</span>
                    <span>不动产权第</span>
                    <span>号</span>
                  </div>
                  <lb-table  :show-header="false"  :column="columns" border  :heightNum="390"  :pagination="false" heightNumSetting
                  :data="tableData">
                </lb-table>
             </div>
             <div class="zsyl-right">
              <div class="zsyl-title">附记</div>
              <div class="zsyl-text"></div>
             </div>
      </div>
      <div class="zsyl-button" v-if="zslx">
         <el-button class="operation_button dy-button" type="text" @click="printCertificate()">打印证书</el-button>
         <el-button class="operation_button gb-button" type="text" @click="closeDialog()">关闭</el-button>
      </div>
    </div>
  </dialogBox>
</template>

<script>
import { readYsxlh,certificate } from "@/api/fqsq.js"
export default {
  components: {
  },
  props: {
    value: { type: Boolean, default: false },
  },
  data () {
    const columns=[
      // {
      //   label: '',
      //   align: 'center',
      //   render: (h, scope) => {
      //     return   <el-radio label={scope.row.taskid} v-model={this.radioVal} >{''}</el-radio>
      //   }
      // },
      {
        prop: "activityName",
        label: "",
        width:'120px'
      },
      {
        prop: "assignee",
        label: "",
        align:'left'
      },
     
    ];
    return {
      ysxlh: [],
      zslx: '',
      columns,
      ruleForm: {
        bsmBdcqz: '',
        szmc: '不动产权证书',
        bdcqzlx: '',
        szzh: '',
        ysxlh: '',
      },
      rules: {
        ysxlh: [
          { required: true, message: '请选择印刷序列号', trigger: 'change' }
        ],
      },
      tableData:[{
        activityName:'权利人',
        assignee:'张三'
      },{
        activityName:'共有情况',
        assignee:'一人持有'
      },{
        activityName:'坐落',
        assignee:'陕西省西安市莲湖区'
      },{
        activityName:'不动产单元号',
        assignee:'3-1-3003'
      },{
        activityName:'权利类型',
        assignee:'非常大'
      },{
        activityName:'权利性质',
        assignee:'非常大'
      },{
        activityName:'用途',
        assignee:'非常大'
      },{
        activityName:'面积',
        assignee:'124平方米'
      },{
        activityName:'使用期限',
        assignee:'99年'
      },{
        activityName:'权利其他状况',
        assignee:'良好'
      }],
    }
  },
  mounted(){
  },
  methods: {
    //获取印刷序列号列表
    ysxlhList() {
       this.zslx = this.$parent.bdcqzlx
       readYsxlh({zslx:this.$parent.bdcqzlx}).then(res => {
            if (res.code === 200) {
               this.ysxlh = res.result 
            }
         })
      
    },
    closeDialog () {
      this.$emit("input", false);
    },
    //打印证书
    printCertificate() {
      this.ruleForm.bsmBdcqz = this.$parent.bdcqz.bsmBdcqz
      this.ruleForm.bdcqzlx = this.$parent.bdcqz.bdcqzlx
      this.ruleForm.szzh = this.$parent.bdcqz.bdcqzh
      certificate(this.ruleForm).then(res => {
          if (res.code === 200) {
            this.$message.success('打印成功');
            this.$emit("input", false);
            this.$parent.list();
          }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 span:nth-child(3){
      margin-left: 75px;
    }
    .zsyl-title span:nth-child(6){
      float: right;
    }
  }
  .zsyl-right{
    width: 330px;
    .zsyl-title{
      letter-spacing: 50px;
    text-align: center;
    text-indent: 50px;
    }
    .zsyl-text{
      border: 1px solid #E4EBF4;
      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);
  }
}
</style>