<!--
 * @Description:
 * @Autor: renchao
 * @LastEditTime: 2023-11-07 08:47:38
-->
<template>
  <div>
    <div class="zsdy-content" v-Loading="loading">
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="120px">
        <el-form-item label="印刷序列号：" prop="ysxlh">
          <el-row>
            <el-col :span="22">
              <el-select v-model="ruleForm.ysxlh" @change="handleSelect" :disabled="disabled" placeholder="请选择">
                <el-option
                  v-for="item in ysxlh"
                  :key="item.ysxlh"
                  :label="item.ysxlh"
                  :value="item.ysxlh">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="2" v-if="this.formData.ysxlh">
              <el-button type="primary" @click="handleZF" v-if="disabled">作废</el-button>
            </el-col>
          </el-row>

        </el-form-item>
      </el-form>
      <div class="zs-content">
        <canvas ref="zs" width="1000" v-show="this.formData.bdcqzlx==1" height="700"></canvas>
        <canvas ref="zm" width="1180" v-show="this.formData.bdcqzlx==2" height="780"></canvas>
      </div>
    </div>
    <!-- 打印模板需要此模块 -->
    <object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" v-show="false">
      <embed id="LODOP_EM" type="application/x-print-lodop" width="1180" height="720" pluginspage="install_lodop32.exe" />
    </object>
    <div class="text-center pt-10">
      <el-button @click="$popupCacel">取消</el-button>
      <el-button type="primary" @click="handlePrint" v-if="disabled">打印</el-button>
      <el-button type="primary" @click="handleSubmit" v-else>确定</el-button>
    </div>

    <el-dialog title="证书作废" :visible.sync="invalidDiglog" width="40%" :modal-append-to-body="false" top="30vh">
      <div class="invalid-diglog">
        <div class="invalid-title">
          <i class="el-icon-question invalid-icon"></i>
          <div class="invalid-body">您确定作废证书并再次打印？印刷序列号{{bdcqz.ysxlh}}</div>
        </div>
        <div class="invalid-reson">作废原因：</div>
        <el-input v-model="zfyy" placeholder="请输入作废原因" type="textarea" :rows="4"></el-input>
        <div class="text-center pt-10">
          <el-button @click="closeInvalidDiglog">取 消</el-button>
          <el-button type="primary" @click="confirmInvalid">确 定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import store from '@/store/index.js'
  import { datas } from "../../javascript/zsyl.js";
  import { getPrintTemplateByCode } from "@/api/print";
  import { getLodop } from "@/utils/LodopFuncs"
  import { readYsxlh, certificate, getBdcqzDetail, invalidCertificate } from "@/api/bdcqz.js";
  import { log } from 'bpmn-js-token-simulation';
  export default {
    props: {
      formData: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data () {
      return {
        // 详细信息
        bdcqz: {},
        key: 0,
        disabled: false,
        // 不动产证书图片地址
        imgSrc: require('@/image/bdcqz/bdcqzs2.jpg'),
        bdczmSrc: require('@/image/bdcqz/bdczm.jpg'),
        loading: false,
        //印刷序列号集合
        ysxlh: [],
        //列名称对象
        columns: [],
        //tab选择绑定值
        activeName: '',
        invalidDiglog: false,
        zfyy: "",
        ruleForm: {
          bsmBdcqz: "",
          szmc: "不动产权证书",
          bdcqzlx: "",
          szzh: "",
          ysxlh: ""
        }
      }
    },
    mounted () {
      store.dispatch('user/refreshPage', false)
      this.columns = datas.columns()
      this.ysxlhList()
      // 获取详细信息
      this.getDetail()
      if (this.formData.ysxlh) {
        this.disabled = true
      } else {
        this.disabled = false
      }
    },
    methods: {
      /**
       * @description: 获取详细信息
       * @author: renchao
       */
      getDetail () {
        this.loading = true
        getBdcqzDetail(this.formData.bsmBdcqz).then(res => {
          this.bdcqz = res.result
          this.loading = false
          if (this.bdcqz.ysxlh) this.ruleForm.ysxlh = this.bdcqz.ysxlh
          if (this.bdcqz.bdcqzlx == 1) {
            this.drawTextOnImage()
          } else {
            this.drawTextzmImage()
          }
        })
      },
      /**
       * @description: 获取印刷序列号列表
       * @author: renchao
       */
      ysxlhList () {
        readYsxlh({ zslx: this.formData.bdcqzlx }).then((res) => {
          if (res.code === 200) {
            this.ysxlh = res.result;
          }
        })
      },
      /**
       * @description: handleSelect
       * @param {*} val
       * @author: renchao
       */
      handleSelect (val) {
        this.bdcqz.ysxlh = this.ruleForm.ysxlh
        if (this.bdcqz.bdcqzlx == 1) {
          this.drawTextOnImage()
        } else {
          this.drawTextzmImage()
        }
      },
      /**
      * @description: closeInvalidDiglog
      * @author: renchao
      */
      closeInvalidDiglog () {
        this.zfyy = "";
        this.invalidDiglog = false
      },
      /**
       * @description: handleZF
       * @author: renchao
       */
      handleZF () {
        this.invalidDiglog = true
      },
      /**
       * @description: 作废缮证信息
       * @author: renchao
       */
      confirmInvalid () {
        store.dispatch('user/reWorkFresh', false)
        invalidCertificate({ bsmBdcqz: this.bdcqz.bsmBdcqz, zfyy: this.zfyy }).then((res) => {
          if (res.code === 200) {
            this.$message.success("作废成功");
            this.disabled = false
            this.invalidDiglog = false;
            this.zfyy = ''
            this.ruleForm.ysxlh = ''
            this.bdcqz.ysxlh = ''
            if (this.bdcqz.bdcqzlx == 1) {
              this.drawTextOnImage()
            } else {
              this.drawTextzmImage()
            }
            store.dispatch('user/reWorkFresh', true)
          } else {
            this.$message.error(res.message);
          }
        })
      },
      /**
       * @description: 不动产证书
       * @author: renchao
       */
      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);
          let lines6 = this.bdcqz.mj ? this.bdcqz.mj.split(' ') : [];
          if (getByteLen(this.bdcqz.mj) > 37) {
            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 <= 336) {
                  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 <= 336) {
                  currentLine = testLine;
                } else {
                  arr.push(currentLine);
                  currentLine = word;
                }
              }
              arr.push(currentLine);
              arr.forEach((line, index) => {
                context.fillText(line, 129, y + (index * 20)); // 调整行高
              })
            })
          }
          // 权利其他状态
          const maxWidth = 332; // 最大宽度限制
          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, 129, 495 + (29 * (i - 1)) + 4 * num + (index * 14)); // 调整行高
                })
              } else {
                arr.forEach((line, index) => {
                  context.fillText(line, 129, 493 + (26 * (i - 1)) + (index * 14)); // 调整行高
                })
              }
            } else {
              if (i > 0) {
                context.fillText(lines[i] ? lines[i] : '', 129, 500 + 4 * num + (29 * (i - 1)));
              } else {
                context.fillText(lines[i] ? lines[i] : '', 129, 505 + (27 * (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) > 37) {
            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) > 37) {
            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: renchao
       */
      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);
          let lines2 = this.bdcqz.zl ? this.bdcqz.zl.split(' ') : [];
          if (getByteLen(this.bdcqz.zl) >= 39) {
            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 = 290; // 最大宽度限制
          let lines = this.bdcqz.qlqtzk ? this.bdcqz.qlqtzk.split('\n') : [];
          for (let i = 0; i < lines.length; i++) {
            console.log(getByteLen(lines[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, 438 + (23 * (i - 1)) + 5 * num + (index * 16)); // 调整行高
                })
              } else {
                arr.forEach((line, index) => {
                  context.fillText(line, 770, 438 + (23 * (i - 1)) + (index * 16)); // 调整行高
                })
              }
            } else {
              if (i > 0) {
                context.fillText(lines[i] ? lines[i] : '', 770, 447 + 6 * num + (23 * (i - 1)));
              } else {
                context.fillText(lines[i] ? lines[i] : '', 770, 447 + (23 * (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;
      },
      /**
       * @description: 打印
       * @author: renchao
       */
      handlePrint () {
        if (this.ruleForm.ysxlh == '') {
          this.$message.error('请选择印刷序列号');
          return;
        }
        store.dispatch('user/reWorkFresh', false)
        let that = this
        if (this.bdcqz.bdcqzlx == 1) {
          getPrintTemplateByCode({ tmpno: 'zsdy' }).then(resInfo => {
            if (resInfo.code == 200) {
              //打开模板设计
              let LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
              LODOP.ADD_PRINT_DATA("ProgramData", resInfo.result.tmpcontent); //装载模板

              this.bdcqz.bdcdyh1 = 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)
              //todo 调取后端接口获取数据 循环set
              for (let key in this.bdcqz) {
                LODOP.SET_PRINT_STYLEA(key, "CONTENT", this.bdcqz[key]);
              }
              LODOP.PREVIEW();
            } else {
              this.$message.error(resInfo.message)
            }
            that.$popupCacel()
            //刷新列表
            store.dispatch('user/reWorkFresh', true)
          })
        } else {
          getPrintTemplateByCode({ tmpno: 'zmdy' }).then(resInfo => {
            if (resInfo.code == 200) {
              //打开模板设计
              let LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
              LODOP.ADD_PRINT_DATA("ProgramData", resInfo.result.tmpcontent); //装载模板

              // 年月日
              this.bdcqz.nian = this.bdcqz.djsj.split(' ')[0].split('/')[0]
              this.bdcqz.yue = this.bdcqz.djsj.split(' ')[0].split('/')[1]
              this.bdcqz.ri = this.bdcqz.djsj.split(' ')[0].split('/')[1]
              this.bdcqz.bdcdyh1 = 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)
              //todo 调取后端接口获取数据 循环set
              for (let key in this.bdcqz) {
                LODOP.SET_PRINT_STYLEA(key, "CONTENT", this.bdcqz[key]);
              }
              LODOP.PREVIEW();
            } else {
              this.$message.error(resInfo.message)
            }
            that.$popupCacel()
            //刷新列表
            store.dispatch('user/reWorkFresh', true)
          })
        }
      },
      /**
       * @description: 保存打印记录
       * @author: renchao
       */
      handleSubmit () {
        let that = this
        if (this.ruleForm.ysxlh == '') {
          this.$message.error('请选择印刷序列号');
          return;
        }
        store.dispatch('user/reWorkFresh', false)
        this.ruleForm.bsmBdcqz = this.bdcqz.bsmBdcqz;
        this.ruleForm.bdcqzlx = this.bdcqz.bdcqzlx;
        this.ruleForm.szzh = this.bdcqz.bdcqzh;
        this.bdcqz.ysxlh = this.ruleForm.ysxlh
        certificate(this.ruleForm).then((res) => {
          if (res.code === 200) {
            that.$popupCacel()
            this.handlePrint()
          } else {
            this.$message.error(res.message)
          }
          store.dispatch('user/reWorkFresh', true)
        })
      }
    }
  }
</script>
<style scoped lang="scss">
  @import "~@/styles/mixin.scss";
  .zsdy-content {
    height: 80vh;
    overflow-y: scroll;
  }
  .zs-content {
    text-align: center;
  }
  .invalid-diglog {
    padding-bottom: 20px;
    font-size: 16px;
    font-weight: bold;
    color: rgb(99, 99, 99);

    .invalid-title {
      display: flex;
      align-content: center;

      .invalid-icon {
        color: rgb(254, 148, 0);
        font-size: 34px;
        margin-right: 10px;
      }

      .invalid-body {
        line-height: 40px;
        margin-bottom: 10px;
      }
    }

    .invalid-reson {
      margin-bottom: 10px;
    }

    .dialog-footer {
      margin-top: 10px;
      display: flex;
      justify-content: flex-end;
    }
  }
</style>