<!--
 * @Description: 不动产查询证明打印模板
 * @Autor: renchao
 * @LastEditTime: 2023-07-03 10:44:15
-->
<template>
  <div class="printView" style="width: 100%; padding: 20px">
    <h1 style="color: red; text-align: center; font-size: 38px">
      {{ form.djSqcxDO.ssqy }}不动产登记交易服务中心
    </h1>
    <p
      style="
        width: 100%;
        border-bottom: 1px solid red;
        margin-top: 20px;
        margin-bottom: 10px;
      "
    ></p>
    <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
      v-if="form.cxjgList.length > 0"
      style="
        text-indent: 2em;
        margin-top: 15px;
        line-height: 24px;
        font-size: 18px;
      "
    >
      根据《不动产登记暂行条例》和《不动产登记资料查询暂行办法》
      有关规定，经线上查询不动产登记信息系统，权利人：
      {{ form.cxjgList[0].qlrmc }} ，证件号：{{ form.cxjgList[0].zjhm }}，截止{{
        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; height: 36px"
          >
            不动产权证号
          </th>
          <th
            style="background-color: #f2f2f2; text-align: center; height: 36px"
          >
            权利人
          </th>
          <th
            style="background-color: #f2f2f2; text-align: center; height: 36px"
          >
            证号
          </th>
          <th
            style="background-color: #f2f2f2; text-align: center; height: 36px"
          >
            坐落
          </th>
          <th
            style="background-color: #f2f2f2; text-align: center; height: 36px"
          >
            面积
          </th>
          <th
            style="background-color: #f2f2f2; text-align: center; height: 36px"
          >
            是否抵押
          </th>
          <th
            style="background-color: #f2f2f2; text-align: center; height: 36px"
          >
            是否查封
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in form.cxjgList" :key="index">
          <td
            style="
              border: 1px solid #ccc;
              text-align: center;
              padding: 8px;
              text-align: left;
            "
          >
            {{ item.bdcqzh }}
          </td>
          <td
            style="
              border: 1px solid #ccc;
              text-align: center;
              padding: 8px;
              text-align: left;
            "
          >
            {{ item.qlrmc }}
          </td>
          <td
            style="
              border: 1px solid #ccc;
              text-align: center;
              padding: 8px;
              text-align: left;
            "
          >
            {{ item.zjhm }}
          </td>
          <td
            style="
              border: 1px solid #ccc;
              text-align: center;
              padding: 8px;
              text-align: left;
            "
          >
            {{ item.zl }}
          </td>
          <td
            style="
              border: 1px solid #ccc;
              text-align: center;
              padding: 8px;
              text-align: left;
            "
          >
            {{ item.fwmj }}
          </td>
          <td
            style="
              border: 1px solid #ccc;
              text-align: center;
              padding: 8px;
              text-align: left;
            "
          >
            {{ item.dyzt == "0" ? "否" : "是" }}
          </td>
          <td
            style="
              border: 1px solid #ccc;
              text-align: center;
              padding: 8px;
              text-align: left;
            "
          >
            {{ item.cfzt == "0" ? "否" : "是" }}
          </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: 36px; font-size: 18px">
      <li style="list-style: none">
        {{ form.djSqcxDO.ssqy }}不动产登记交易服务中心
      </li>
      <li style="list-style: none">{{ newDate }}</li>
    </ul>
    <ol style="margin-left: 20px; line-height: 36px">
      <p>说明：</p>
      <li>
        该查询结果仅显示权利人在当前查询时间点不动产（房产）登记有关情况（“/”表示未查询到不动产登记信息）；
      </li>
      <li>
        该查询结果包含权利人不动产预告登记信息。查询范围为本市中心城区及开发区内的不动产登记信息；
      </li>
      <li>
        本次查询由系统终端自动检索，因数据采集处理误差而造成查询结果于实际登记信息不相符的，以我中心登记簿记载信息为准；
      </li>
      <li>
        查询人应当妥善保管不动产登记查询结果，因操作不当，导致查询结果泄露，有关责任概由查询人承担。
      </li>
    </ol>
  </div>
</template>
<script>
import QRCode from "qrcode";
import { getDateToString } from "@/utils/util";
export default {
  props: {
    form: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      qrcodeImage: "",
      newDate: "",
      newDatez: "",
    };
  },
  watch: {
    "form.djSqcxDO.cxbh": {
      handler: function (val) {
        if (val) {
          QRCode.toDataURL(val)
            .then((url) => {
              this.qrcodeImage = url;
            })
            .catch((error) => {
              console.error(error);
            });
        }
      },
      immediate: true,
      deep: true,
    },
    form: {
      handler: function (val) {
        if (this.form.djSqcxDO.cxsj) {
          this.newDate = getDateToString(this.form.djSqcxDO.cxsj, 1);
          this.newDatez = getDateToString(this.form.djSqcxDO.cxsj, 2);
        }
      },
      deep: true
    }
  }
};
</script>