<!--
 * @Description:
 * @Autor: miaofang
 * @LastEditTime: 2023-10-23 16:16:24
-->
<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">
      <el-tab-pane label="证书预览" name="zsyl">
        <el-empty
          description="暂无数据"
          v-if="headTabBdcqz.length == 0 && noData"></el-empty>
        <div class="zsys">
          <canvas
            ref="zs"
            width="1000"
            v-show="this.bdcqz.bdcqzlx == 1"
            height="700"></canvas>
          <canvas
            ref="zm"
            width="1180"
            v-show="this.bdcqz.bdcqzlx == 2"
            height="780"></canvas>
        </div>
      </el-tab-pane>
      <el-tab-pane label="证书详情" name="lcjl">
        <div class="slxx_title title-block">
          证书详情信息
          <div class="triangle"></div>
        </div>
        <el-form :rules="rules" ref="ruleForm" label-width="120px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="权利人" prop="cyxm">
                <el-input disabled v-model="bdcqz.qlr" maxlegth="15"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="义务人" prop="jtgxdm">
                <el-input disabled v-model="bdcqz.qlr" maxlegth="15"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="坐落" prop="cbfdm">
                <el-input disabled v-model="bdcqz.zl" maxlegth="15"></el-input>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="不动产单元号" prop="cyxm">
                <el-input disabled v-model="bdcqz.bdcdyh" maxlegth="15"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="印刷序列号" prop="jtgxdm">
                <el-input disabled v-model="bdcqz.ysxlh" maxlegth="15"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="不动产权证号" prop="cbfdm">
                <el-input disabled v-model="bdcqz.bdcqzh" maxlegth="15"></el-input>
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>
        <div class="slxx_title title-block">
          缮证记录信息
          <div class="triangle"></div>
        </div>
        <lb-table
          class="sz"
          :column="szxxtableData.columns"
          heightNumSetting
          :pagination="false"
          :key="key"
          :data="szxxtableData.data">
        </lb-table>
        <div class="slxx_title title-block">
          发证记录信息
          <div class="triangle"></div>
        </div>
        <lb-table
          border
          :column="tableDatas.columns"
          :heightNum="100"
          :data="tableDatas.data"
          :pagination="false">
        </lb-table>
      </el-tab-pane>
      <el-tab-pane label="电子证照" name="third"> 等一个照片 </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  // import { zsyldatas } from "../../javascript/zsyl.js";
  import { getSlsqBdcqzList } from "@/api/bdcqz.js";
  import { getCertificateList } from "@/api/bdcqz.js";
  import { getSzRecordList } from "@/api/bdcqz.js";
  import { szxxdatas } from "../../javascript/szxxdatapart";
  import { datas } from "../../javascript/fzxxdatapart";
  export default {
    name: "zsyl",
    props: {
      formData: {
        type: Object,
        default: {},
      },
    },
    data () {
      return {
        key: 0,
        noData: false,
        imgSrc: require("@/image/bdcqz/bdcqzs2.jpg"),
        bdczmSrc: require("@/image/bdcqz/bdczm.jpg"),
        loading: false,
        //印刷序列号集合
        ysxlh: [],
        //列名称对象
        columns: [],
        //选择的不动产权证文件
        bdcqz: "",
        //证书打开类型 是否需要展示打印按钮
        isToPrint: false,
        //tab切换栏数组
        tabslist: [],
        headTabBdcqz: [],
        //tab选择绑定值
        activeName: "zsyl",
        //证书图片预览
        previewImage: "",
        ruleForm: {
          bsmBdcqz: "",
          szmc: "不动产权证书",
          bsmBdcqz: "",
          szzh: "",
          ysxlh: "",
        },
        formdata: {},
        szxxtableData: {
          total: 0,
          columns: szxxdatas.columns(),
          data: [],
        },
        tableDatas: {
          total: 0,
          columns: datas.columns().fzgrid,
          data: [],
        },
      };
    },
    mounted () {
      this.queryClick();
      this.query();
      if (this.formData.bdcqz) {
        //从缮证进入
        this.bdcqz = this.formData.bdcqz;
      } else {
        //从按钮进入
        this.getHeadTabBdcqz();
      }
    },
    methods: {
      /**
       * @description: queryClick
       * @author: miaofang
       */
      queryClick () {
        this.formdata.bsmSlsq = this.formData.bsmSlsq;
        getCertificateList(this.formdata).then((res) => {
          if (res.code === 200) {
            this.tableDatas.data = res.result ? res.result : [];
          }
        })
      },
      /**
       * @description: query
       * @author: miaofang
       */
      query () {
        getSzRecordList({ bsmBdcqz: this.formData.bsmBdcqz }).then((res) => {
          if (res.code == 200) {
            this.szxxtableData.data = res.result;
            this.key++;
          }
        })
      },
      /**
       * @description: 获取证书内容
       * @param {*} code
       * @author: miaofang
       */
      getRowValue (code) {
        var value = this.bdcqz[code];
        return value;
      },
      /**
       * @description: 获取受理申请下全部不动产权证
       * @author: miaofang
       */
      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.headTabBdcqz = res.result;
              if (this.bdcqz.bdcqzlx == 1) {
                this.drawTextOnImage();
              } else {
                this.drawTextzmImage();
              }
            }
          }
          this.loading = false;
        });
      },
      /**
       * @description: tab表头切换方法
       * @param {*} e
       * @author: miaofang
       */
      handleClick (tab, event) {
        console.log(tab, event);
        this.bdcqz = this.headTabBdcqz[0];
        if (this.bdcqz.bdcqzlx == 1) {
          this.drawTextOnImage();
        } else {
          this.drawTextzmImage();
        }
      },
      /**
       * @description: 不动产证书
       * @author: miaofang
       */
      drawTextOnImage () {
        function getByteLen (val) {
          var len = 0;
          if (!val) return len;
          for (var i = 0; i < val.length; i++) {
            var length = val.charCodeAt(i);
            if (length >= 0 && length <= 128) {
              len += 1;
            } else {
              len += 2;
            }
          }
          return len;
        }
        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 : "", 129, 97);
          context.fillText(this.bdcqz.gyqk ? this.bdcqz.gyqk : "", 129, 136);

          this.bdcdyh =
            this.bdcqz.bdcdyh.slice(0, 6) +
            " " +
            this.bdcqz.bdcdyh.slice(6, 12) +
            " " +
            this.bdcqz.bdcdyh.slice(12, 19) +
            " " +
            this.bdcqz.bdcdyh.slice(19, this.bdcqz.bdcdyh.length);
          context.fillText(this.bdcdyh ? this.bdcdyh : "", 129, 223);

          context.fillText(this.bdcqz.qllx ? this.bdcqz.qllx : "", 129, 263);
          context.fillText(this.bdcqz.qlxz ? this.bdcqz.qlxz : "", 129, 303);
          context.fillText(this.bdcqz.yt ? this.bdcqz.yt : "", 129, 346);
          // context.fillText(this.bdcqz.mj ? this.bdcqz.mj : '', 129, 386);
          let lines6 = this.bdcqz.mj ? this.bdcqz.mj.split(" ") : [];
          if (getByteLen(this.bdcqz.mj) > 41) {
            lines6.forEach((line, index) => {
              const y = 378 + index * 27; // 每行文本的垂直位置
              let currentLine = "";
              let arr = [];
              for (let word of line) {
                const testLine = currentLine + word;
                const lineWidth = context.measureText(testLine).width;
                if (lineWidth <= 330) {
                  currentLine = testLine;
                } else {
                  arr.push(currentLine);
                  currentLine = word;
                }
              }
              arr.push(currentLine);
              arr.forEach((line, index) => {
                context.fillText(line, 129, y + index * 20); // 调整行高
              });
            });
          } else {
            lines6.forEach((line, index) => {
              const y = 386 + index * 27; // 每行文本的垂直位置
              let currentLine = "";
              let arr = [];
              for (let word of line) {
                const testLine = currentLine + word;
                const lineWidth = context.measureText(testLine).width;
                if (lineWidth <= 330) {
                  currentLine = testLine;
                } else {
                  arr.push(currentLine);
                  currentLine = word;
                }
              }
              arr.push(currentLine);
              arr.forEach((line, index) => {
                context.fillText(line, 129, y + index * 20); // 调整行高
              });
            });
          }
          // 权利其他状态
          let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split("\n") : [];
          for (let i = 0; i < lines.length; i++) {
            let num = Math.ceil(getByteLen(lines[i]) / 38);
            if (getByteLen(lines[i]) > 38) {
              let currentLine = "";
              let arr = [];
              for (let word of lines[i]) {
                const testLine = currentLine + word;
                const lineWidth = context.measureText(testLine).width;
                if (lineWidth <= 323) {
                  currentLine = testLine;
                } else {
                  arr.push(currentLine);
                  currentLine = word;
                }
              }
              arr.push(currentLine);
              if (i > 0) {
                arr.forEach((line, index) => {
                  context.fillText(
                    line,
                    129,
                    490 + 26 * (i - 1) + 4 * num + index * 14
                  ); // 调整行高
                });
              } else {
                arr.forEach((line, index) => {
                  context.fillText(line, 129, 500 + 26 * (i - 1) + index * 14); // 调整行高
                });
              }
            } else {
              if (i > 0) {
                context.fillText(
                  lines[i] ? lines[i] : "",
                  129,
                  500 + 4 * num + 24 * (i - 1)
                );
              } else {
                context.fillText(
                  lines[i] ? lines[i] : "",
                  129,
                  505 + 24 * (i - 1)
                );
              }
            }
          }

          let lines1 = this.bdcqz.fj ? this.bdcqz.fj.split("\n") : [];
          lines1.forEach((line, index) => {
            const y = 100 + index * 30; // 每行文本的垂直位置
            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 * 30); // 调整行高
            });
          });
          let lines3 = this.bdcqz.syqx ? this.bdcqz.syqx.split(" ") : [];
          if (getByteLen(this.bdcqz.syqx) > 41) {
            lines3.forEach((line, index) => {
              const y = 423 + index * 27; // 每行文本的垂直位置
              let currentLine = "";
              let arr = [];
              for (let word of line) {
                const testLine = currentLine + word;
                const lineWidth = context.measureText(testLine).width;
                if (lineWidth <= 330) {
                  currentLine = testLine;
                } else {
                  arr.push(currentLine);
                  currentLine = word;
                }
              }
              arr.push(currentLine);
              arr.forEach((line, index) => {
                context.fillText(line, 129, y + index * 20); // 调整行高
              });
            });
          } else {
            lines3.forEach((line, index) => {
              const y = 430 + index * 27; // 每行文本的垂直位置
              let currentLine = "";
              let arr = [];
              for (let word of line) {
                const testLine = currentLine + word;
                const lineWidth = context.measureText(testLine).width;
                if (lineWidth <= 315) {
                  currentLine = testLine;
                } else {
                  arr.push(currentLine);
                  currentLine = word;
                }
              }
              arr.push(currentLine);
              arr.forEach((line, index) => {
                context.fillText(line, 129, y + index * 20); // 调整行高
              });
            });
          }

          let lines2 = this.bdcqz.zl ? this.bdcqz.zl.split(" ") : [];
          if (getByteLen(this.bdcqz.zl) > 41) {
            lines2.forEach((line, index) => {
              const y = 170 + index * 20; // 每行文本的垂直位置
              let currentLine = "";
              let arr = [];
              for (let word of line) {
                const testLine = currentLine + word;
                const lineWidth = context.measureText(testLine).width;
                if (lineWidth <= 336) {
                  currentLine = testLine;
                } else {
                  arr.push(currentLine);
                  currentLine = word;
                }
              }
              arr.push(currentLine);
              arr.forEach((line, index) => {
                context.fillText(line, 129, y + index * 20); // 调整行高
              });
            });
          } else {
            lines2.forEach((line, index) => {
              const y = 180 + index * 20; // 每行文本的垂直位置
              let currentLine = "";
              let arr = [];
              for (let word of line) {
                const testLine = currentLine + word;
                const lineWidth = context.measureText(testLine).width;
                if (lineWidth <= 336) {
                  currentLine = testLine;
                } else {
                  arr.push(currentLine);
                  currentLine = word;
                }
              }
              arr.push(currentLine);
              arr.forEach((line, index) => {
                context.fillText(line, 129, y + index * 20); // 调整行高
              });
            });
          }
        };
        image.src = this.imgSrc;
      },
      /**
       * @description: 不动产证明
       * @author: miaofang
       */
      drawTextzmImage () {
        function getByteLen (val) {
          var len = 0;
          if (!val) return len;
          for (var i = 0; i < val.length; i++) {
            var length = val.charCodeAt(i);
            if (length >= 0 && length <= 128) {
              len += 1;
            } else {
              len += 2;
            }
          }
          return len;
        }

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

          let lines2 = this.bdcqz.zl ? this.bdcqz.zl.split(" ") : [];
          if (getByteLen(this.bdcqz.zl) > 41) {
            lines2.forEach((line, index) => {
              const y = 315 + index * 20; // 每行文本的垂直位置
              let currentLine = "";
              let arr = [];
              for (let word of line) {
                const testLine = currentLine + word;
                const lineWidth = context.measureText(testLine).width;
                if (lineWidth <= 295) {
                  currentLine = testLine;
                } else {
                  arr.push(currentLine);
                  currentLine = word;
                }
              }
              arr.push(currentLine);
              arr.forEach((line, index) => {
                context.fillText(line, 775, y + index * 20); // 调整行高
              });
            });
          } else {
            lines2.forEach((line, index) => {
              const y = 325 + index * 20; // 每行文本的垂直位置
              let currentLine = "";
              let arr = [];
              for (let word of line) {
                const testLine = currentLine + word;
                const lineWidth = context.measureText(testLine).width;
                if (lineWidth <= 295) {
                  currentLine = testLine;
                } else {
                  arr.push(currentLine);
                  currentLine = word;
                }
              }
              arr.push(currentLine);
              arr.forEach((line, index) => {
                context.fillText(line, 775, y + index * 20); // 调整行高
              });
            });
          }

          // bdcdyh
          this.bdcdyh =
            this.bdcqz.bdcdyh.slice(0, 6) +
            " " +
            this.bdcqz.bdcdyh.slice(6, 12) +
            " " +
            this.bdcqz.bdcdyh.slice(12, 19) +
            " " +
            this.bdcqz.bdcdyh.slice(19, this.bdcqz.bdcdyh.length);
          context.fillText(this.bdcdyh ? this.bdcdyh : "", 775, 373);
          // qlqtzk
          const maxWidth = 295; // 最大宽度限制
          let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split("\n") : [];
          for (let i = 0; i < lines.length; i++) {
            let num = Math.ceil(getByteLen(lines[i]) / 37);
            if (getByteLen(lines[i]) > 37) {
              let currentLine = "";
              let arr = [];
              for (let word of lines[i]) {
                const testLine = currentLine + word;
                const lineWidth = context.measureText(testLine).width;
                if (lineWidth <= maxWidth) {
                  currentLine = testLine;
                } else {
                  arr.push(currentLine);
                  currentLine = word;
                }
              }
              arr.push(currentLine);
              if (i > 0) {
                arr.forEach((line, index) => {
                  context.fillText(
                    line,
                    770,
                    428 + 25 * (i - 1) + 5 * num + index * 15
                  ); // 调整行高
                });
              } else {
                arr.forEach((line, index) => {
                  context.fillText(line, 770, 435 + 25 * (i - 1) + index * 14); // 调整行高
                });
              }
            } else {
              if (i > 0) {
                context.fillText(
                  lines[i] ? lines[i] : "",
                  770,
                  440 + 5 * num + 24 * (i - 1)
                );
              } else {
                context.fillText(
                  lines[i] ? lines[i] : "",
                  770,
                  440 + 24 * (i - 1)
                );
              }
            }
          }
          // fj
          let lines1 = this.bdcqz.fj ? this.bdcqz.fj.split("\n") : [];
          for (let i = 0; i < lines1.length; i++) {
            let num = Math.ceil(getByteLen(lines1[i]) / 37);
            if (getByteLen(lines1[i]) > 37) {
              let currentLine = "";
              let arr = [];
              for (let word of lines1[i]) {
                const testLine = currentLine + word;
                const lineWidth = context.measureText(testLine).width;
                if (lineWidth <= maxWidth) {
                  currentLine = testLine;
                } else {
                  arr.push(currentLine);
                  currentLine = word;
                }
              }
              arr.push(currentLine);
              if (i > 0) {
                arr.forEach((line, index) => {
                  context.fillText(
                    line,
                    770,
                    610 + 25 * (i - 1) + 5 * num + index * 15
                  ); // 调整行高
                });
              } else {
                arr.forEach((line, index) => {
                  context.fillText(line, 770, 610 + 25 * (i - 1) + index * 15); // 调整行高
                });
              }
            } else {
              if (i > 0) {
                context.fillText(
                  lines1[i] ? lines1[i] : "",
                  770,
                  610 + 5 * num + 23 * (i - 1)
                );
              } else {
                context.fillText(
                  lines1[i] ? lines1[i] : "",
                  770,
                  610 + 23 * (i - 1)
                );
              }
            }
          }
        };

        image.src = this.bdczmSrc;
      },
    },
    computed: {
      hdiffHeight () {
        return 0;
        //  return this.headTabBdcqz.length > 1 ? 54 : 0
      },
    },
  };
</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;
  }
  .el-tab-pane {
    width: 1190px;
    height: 670px;
    overflow-y: auto;
  }
  .zsys {
    width: 1180px;
    height: 670px;
  }
  /deep/.el-table {
    height: 100px !important;
  }
  // /deep/.sz {
  //   height: 340px !important;
  // }
  .el-form {
    margin-top: 20px;
  }
</style>