<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-08-10 14:01:09
-->
<template>
  <div class="from-clues loadingtext" v-Loading="loading" element-loading-text="拼命加载中..." style="height:720px;text-align: center;">
    <el-empty description="暂无数据" v-if="headTabBdcqz.length == 0 && noData"></el-empty>
    <canvas ref="zs" width="1000" height="700"></canvas>
  </div>
</template>

<script>
  import { getSlsqBdcqzList } from "@/api/bdcqz.js"
  export default {
    name: "zsyl",
    props: {
      formData: {
        type: Object,
        default: {}
      }
    },
    data () {
      return {
        noData: false,
        imgSrc: require('@/image/bdcqz/bdcqzs2.jpg'),
        loading: false,
      }
    },
    mounted () {
      this.getHeadTabBdcqz();
    },
    methods: {
      /**
       * @description: 获取受理申请下全部不动产权证
       * @author: renchao
       */
      getHeadTabBdcqz () {
        this.loading = true
        getSlsqBdcqzList({ bsmSlsq: this.formData.bsmSlsq }).then(res => {
          if (res.code == 200) {
            this.noData = true
            if (res.result && res.result.length > 0) {
              this.bdcqz = res.result[0]
              this.drawTextOnImage()
            }
          }
          this.loading = false
        })
      },
      /**
       * @description: 不动产证书
       * @author: renchao
       */
      drawTextOnImage () {
        const canvas = this.$refs.zs;
        const context = canvas.getContext('2d');
        const image = new Image();
        image.onload = () => {
          context.drawImage(image, 0, 0);
          context.font = '18px 楷体';
          context.fillStyle = '#000000';
          context.fillText(this.bdcqz.sjjc ? this.bdcqz.sjjc : '', 60, 56);
          context.fillText(this.bdcqz.djnd ? this.bdcqz.djnd : '', 113, 56);
          context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : '', 180, 56);
          context.fillText(this.bdcqz.sxh ? this.bdcqz.sxh : '', 370, 56);
          context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : '', 138, 97);
          context.fillText(this.bdcqz.gyqk ? this.bdcqz.gyqk : '', 138, 138);
          context.fillText(this.bdcqz.zl ? this.bdcqz.zl : '', 138, 180);
          context.fillText(this.bdcqz.bdcdyh ? this.bdcqz.bdcdyh : '', 138, 223);
          context.fillText(this.bdcqz.qllx ? this.bdcqz.qllx : '', 138, 263);
          context.fillText(this.bdcqz.qlxz ? this.bdcqz.qlxz : '', 138, 303);
          context.fillText(this.bdcqz.yt ? this.bdcqz.yt : '', 138, 346);
          context.fillText(this.bdcqz.mj ? this.bdcqz.mj : '', 138, 386);
          context.fillText(this.bdcqz.syqx ? this.bdcqz.syqx : '', 138, 429);
          // qlqtzk
          const maxWidth = 280; // 最大宽度限制
          let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split('\n') : [];
          lines.forEach((line, index) => {
            const y = 469 + (index * 37); // 每行文本的垂直位置
            let currentLine = '';
            let arr = [];
            for (let word of line) {
              const testLine = currentLine + word;
              const lineWidth = context.measureText(testLine).width;
              if (lineWidth <= maxWidth) {
                currentLine = testLine;
              } else {
                arr.push(currentLine);
                currentLine = word;
              }
            }
            arr.push(currentLine);
            arr.forEach((line, index) => {
              context.fillText(line, 138, y + (index * 20)); // 调整行高
            })
          })
          let lines1 = this.bdcqz.fj ? this.bdcqz.fj.split(' ') : [];
          lines1.forEach((line, index) => {
            const y = 100 + (index * 37); // 每行文本的垂直位置
            let currentLine = '';
            let arr = [];
            for (let word of line) {
              const testLine = currentLine + word;
              const lineWidth = context.measureText(testLine).width;
              if (lineWidth <= 395) {
                currentLine = testLine;
              } else {
                arr.push(currentLine);
                currentLine = word;
              }
            }
            arr.push(currentLine);
            arr.forEach((line, index) => {
              context.fillText(line, 580, y + (index * 20)); // 调整行高
            })
          })

        }
        image.src = this.imgSrc
      },
    }
  }
</script>