<!--
 * @Description: 不动产查询证明打印模板
 * @Autor: renchao
 * @LastEditTime: 2023-06-28 14:45:07
-->
<template>
  <div class="printView" style="width:100%;padding:20px">
    <h1 style="color: red;
      text-align: center;
      font-size: 38px;">城固县不动产登记交易服务中心</h1>
    <hr style=" margin-top: 20px;
      margin-bottom: 10px;
      height: 1px;
      width:100%;
      border: none;
      background-color: red;">
    <h2 style="font-size: 36px;
      text-align: center;">不动产登记信息查询证明</h2>
    <h5 style=" text-align: center;
      margin-top: 20px;
      font-size: 18px;">查询证明编号: {{form.djSqcxDO.cxbh}}</h5>
    <p style="text-indent: 2em;
      margin-top: 15px;
      line-height: 24px;
      font-size: 18px;">根据《不动产登记暂行条例》和《不动产登记资料查询暂行办法》
      有关规定，经线上查询不动产登记信息系统，权利人： 杜林
      ，证件号：612322197805120010，截止{{newDatez}}
      ，名下不动产登记信息查询结果如下：</p>
    <table style=" border-collapse: collapse;
      width: 100%;
      margin-top: 20px;margin-left:20px">
      <thead>
        <tr>
          <th style="background-color: #f2f2f2;
      text-align: center;">权利人</th>
          <th style="background-color: #f2f2f2;
      text-align: center;">证号</th>
          <th style="background-color: #f2f2f2;
      text-align: center;">坐落</th>
          <th style="background-color: #f2f2f2;
      text-align: center;">面积</th>
          <th style="background-color: #f2f2f2;
      text-align: center;">共有人</th>
          <th style="background-color: #f2f2f2;
      text-align: center;">状态</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in tableData" :key="item.id">
          <td style="border: 1px solid #ccc;
      text-align: center;
      padding: 8px;
      text-align: left;">{{ item.id }}</td>
          <td style="border: 1px solid #ccc;
      text-align: center;
      padding: 8px;
      text-align: left;">{{ item.name }}</td>
        </tr>
      </tbody>
    </table>
    <h6 style="font-size: 28px;
      margin-top: 20px;
      font-weight: 100;">特此证明。</h6>
    <div>
      <img :src="qrcodeImage" alt="QR Code">
    </div>
    <ul style="text-align: right;
      line-height: 26px;
      font-size: 18px;">
      <li style="list-style: none;">城固县不动产登记交易服务中心</li>
      <li style="list-style: none;">{{newDate}}</li>
    </ul>
    <ol style="margin-left: 20px;
      line-height: 26px;">
      <p>说明：</p>
      <li>该查询结果仅显示权利人在当前查询时间点不动产（房产）登记有关情况（“/”表示未查询到不动产登记信息）；</li>
      <li>该查询结果包含权利人不动产预告登记信息。查询范围为本市中心城区及开发区内的不动产登记信息；</li>
      <li>本次查询由系统终端自动检索，因数据采集处理误差而造成查询结果于实际登记信息不相符的，以我中心登记簿记载信息为准；</li>
      <li>查询人应当妥善保管不动产登记查询结果，因操作不当，导致查询结果泄露，有关责任概由查询人承担。</li>
    </ol>
  </div>
</template>
<script>
  import QRCode from 'qrcode';
  import { getNewDate } from '@/utils/util'
  export default {
    props: {
      form: {
        type: Object,
        default: () => ({})
      }
    },
    data () {
      return {
        qrcodeImage: '',
        tableData: [
        ],
        newDate: getNewDate(),
        newDatez: getNewDate(2)
      }
    },
    watch: {
      "form.djSqcxDO.cxbh": {
        handler: function (val) {
          if (val) {
            QRCode.toDataURL(val)
              .then(url => {
                this.qrcodeImage = url
              })
              .catch(error => {
                console.error(error);
              })
          }
        },
        immediate: true
      }
    }
  }
</script>