<!--
 * @Description: 
 * @Autor: renchao
 * @LastEditTime: 2023-07-05 16:57:08
-->
<template>
  <div class="from-clues loadingtext" v-Loading="loading" element-loading-text="拼命加载中..." style="height:720px;text-align: center;">
    <!-- 表单部分 -->
    <el-tabs v-model="activeName" @tab-click="handleClick" v-if="headTabBdcqz.length >1">
      <el-tab-pane :label="item.qlr + (item.bdcqzh !== null ? '(' + item.bdcqzh + ')' : '')" :name="item.bsmBdcqz"
        v-for="(item, index) in headTabBdcqz" :key="index">
      </el-tab-pane>
    </el-tabs>
    <div class="no-data" v-if="headTabBdcqz.length == 0">暂无数据</div>
    <canvas ref="zs" width="1000" v-show="headTabBdcqz[0]&&headTabBdcqz[0].bdcqzlx==1" height="700"></canvas>
    <canvas ref="zm" width="1180" v-show="headTabBdcqz[0]&&headTabBdcqz[0].bdcqzlx!=1" height="780"></canvas>
  </div>
</template>

<script>
  import { datas } from "../../javascript/zsyl.js";
  import { getSlsqBdcqzList } from "@/api/bdcqz.js"
  export default {
    name: "zsyl",
    props: {
      formData: {
        type: Object,
        default: {}
      }
    },
    data () {
      return {
        imgSrc: require('@/image/bdcqz/bdcqzs2.jpg'),
        bdczmSrc: require('@/image/bdcqz/bdczm.jpg'),
        loading: false,
        //印刷序列号集合
        ysxlh: [],
        //列名称对象
        columns: [],
        //选择的不动产权证文件
        bdcqz: '',
        //证书打开类型 是否需要展示打印按钮
        isToPrint: false,
        //tab切换栏数组
        headTabBdcqz: [],
        //tab选择绑定值
        activeName: '',
        //证书图片预览
        previewImage: '',
        ruleForm: {
          bsmBdcqz: '',
          szmc: '不动产权证书',
          bsmBdcqz: '',
          szzh: '',
          ysxlh: '',
        },
      }
    },
    mounted () {
      this.columns = datas.columns();
      if (this.formData.bdcqz) {
        //从缮证进入
        this.bdcqz = this.formData.bdcqz
      } else {
        //从按钮进入
        this.getHeadTabBdcqz();
      }
    },
    methods: {
      //获取证书内容
      getRowValue (code) {
        var value = this.bdcqz[code];
        return value;
      },
      //获取受理申请下全部不动产权证
      getHeadTabBdcqz () {
        this.loading = true
        getSlsqBdcqzList({ bsmSlsq: this.formData.bsmSlsq }).then(res => {
          if (res.code == 200) {
            if (res.result && res.result.length > 0) {
              this.activeName = res.result[0].bsmBdcqz
              this.bdcqz = res.result[0]
              this.headTabBdcqz = res.result
              if (res.result[0].bdcqzlx == 1) {
                this.drawTextOnImage()
              } else {
                this.drawTextzmImage()
              }
            }
          }
          this.loading = false
        })
      },
      //tab表头切换方法
      handleClick (e) {
        this.bdcqz = this.headTabBdcqz[e.index - 0]
        this.activeName = this.headTabBdcqz.bsmBdcqz
        if (this.activeName == '1') {
          this.drawTextOnImage()
        } else {
          this.drawTextzmImage()
        }
      },
      // 不动产证书
      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)); // 调整行高
            })
          })
          context.fillText(this.bdcqz.fj ? this.bdcqz.fj : '', 580, 100);
        }
        image.src = this.imgSrc
      },
      // 不动产证明
      drawTextzmImage () {
        const canvas = this.$refs.zm;
        const context = canvas.getContext('2d');
        const image = new Image();
        image.onload = () => {
          context.drawImage(image, 0, 0);
          context.font = '18px 楷体';
          context.fillStyle = '#000000';
          // ysxlh
          context.fillText(this.bdcqz.ysxlh ? this.bdcqz.ysxlh : '', 280, 712);
          // djsj
          if (this.bdcqz.djsj) {
            let djsjList = this.bdcqz.djsj.split(' ')[0].split('/')
            context.fillText(djsjList[0] ? djsjList[0] : '', 327, 580);
            context.fillText(djsjList[1] ? djsjList[1] : '', 393, 580);
            context.fillText(djsjList[2] ? djsjList[2] : '', 443, 580);
          }
          context.fillText(this.bdcqz.sjjc ? this.bdcqz.sjjc : '', 620, 125);
          context.fillText(this.bdcqz.djnd ? this.bdcqz.djnd : '', 665, 125);
          context.fillText(this.bdcqz.sxqc ? this.bdcqz.sxqc : '', 750, 125);
          context.fillText(this.bdcqz.sxh ? this.bdcqz.sxh : '', 960, 123);
          context.fillText(this.bdcqz.zmqlhsx ? this.bdcqz.zmqlhsx : '', 775, 180);
          context.fillText(this.bdcqz.qlr ? this.bdcqz.qlr : '', 775, 228);
          // 义务人
          context.fillText(this.bdcqz.ywr ? this.bdcqz.ywr : '', 775, 275);
          context.fillText(this.bdcqz.zl ? this.bdcqz.zl : '', 775, 325);
          // bdcdyh
          context.fillText(this.bdcqz.bdcdyh ? this.bdcqz.bdcdyh : '', 775, 373);
          // qlqtzk
          const maxWidth = 280; // 最大宽度限制
          let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split('\n') : [];
          lines.forEach((line, index) => {
            const y = 415 + (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, 775, y + (index * 20)); // 调整行高
            });
          });
          // fj
          context.fillText(this.bdcqz.fj ? this.bdcqz.fj : '', 775, 600);
        };

        image.src = this.bdczmSrc;
      }
    }
  }
</script>
<style scoped lang="scss">
  @import "~@/styles/mixin.scss";

  .imgClass {
    display: inline-block;
    height: auto;
    max-width: 100%;
  }

  .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);
    }
  }

  .zsyl-title {
    background: #fafbe5;
    text-align: center;
    padding: 5px 0px;
    font-size: 20px;
  }

  .no-data {
    font-size: 18px;
    display: flex;
    text-align: center;
    justify-content: center;
  }
</style>