<template>
    <svg :width="width" :height="height">
        <!-- 发票内容边框 row1 -->
        <rect
            x="4.5mm"
            y="30mm"
            width="8mm"
            height="22mm"
            style="fill: none; stroke: #9c5223"
        />
        <rect
            x="12.5mm"
            y="30mm"
            width="107mm"
            height="22mm"
            style="fill: none; stroke: #9c5223"
        />
        <rect
            x="119.5mm"
            y="30mm"
            width="5mm"
            height="22mm"
            style="fill: none; stroke: #9c5223"
        />
        <rect
            x="124.5mm"
            y="30mm"
            width="81mm"
            height="22mm"
            style="fill: none; stroke: #9c5223"
        />
        <!-- 发票内容边框 row2 -->
        <rect
            x="4.5mm"
            y="52mm"
            width="52mm"
            height="44mm"
            style="fill: none; stroke: #9c5223"
        />
        <rect
            x="56.5mm"
            y="52mm"
            width="26mm"
            height="44mm"
            style="fill: none; stroke: #9c5223"
        />
        <rect
            x="82.5mm"
            y="52mm"
            width="12mm"
            height="44mm"
            style="fill: none; stroke: #9c5223"
        />
        <rect
            x="94.5mm"
            y="52mm"
            width="20mm"
            height="44mm"
            style="fill: none; stroke: #9c5223"
        />
        <rect
            x="114.5mm"
            y="52mm"
            width="20mm"
            height="44mm"
            style="fill: none; stroke: #9c5223"
        />
        <rect
            x="134.5mm"
            y="52mm"
            width="30mm"
            height="44mm"
            style="fill: none; stroke: #9c5223"
        />
        <rect
            x="164.5mm"
            y="52mm"
            width="11mm"
            height="44mm"
            style="fill: none; stroke: #9c5223"
        />
        <rect
            x="175.5mm"
            y="52mm"
            width="30mm"
            height="44mm"
            style="fill: none; stroke: #9c5223"
        />
        <!-- 发票内容边框 row3 -->
        <rect
            x="4.5mm"
            y="96mm"
            width="52mm"
            height="8mm"
            style="fill: none; stroke: #9c5223"
        />
        <rect
            x="56.5mm"
            y="96mm"
            width="149mm"
            height="8mm"
            style="fill: none; stroke: #9c5223"
        />
        <!-- 发票内容边框 row4 -->
        <rect
            x="4.5mm"
            y="104mm"
            width="8mm"
            height="22mm"
            style="fill: none; stroke: #9c5223"
        />
        <rect
            x="12.5mm"
            y="104mm"
            width="107mm"
            height="22mm"
            style="fill: none; stroke: #9c5223"
        />
        <rect
            x="119.5mm"
            y="104mm"
            width="5mm"
            height="22mm"
            style="fill: none; stroke: #9c5223"
        />
        <rect
            x="124.5mm"
            y="104mm"
            width="81mm"
            height="22mm"
            style="fill: none; stroke: #9c5223"
        />
        <!-- 发票抬头 -->
        <!-- <rect x="8.5mm" y="2mm" width="20mm" height="20mm"></rect> -->
        <text
            x="5.5mm"
            y="27mm"
            textLength="17mm"
            lengthAdjust="spacing"
            style="fill: #9c5223; font-family: kaiti; font-size: 3.5mm"
        >
            机器编号：
        </text>
        <text
            x="70mm"
            y="15mm"
            textLength="70mm"
            lengthAdjust="spacingAndGlyphs"
            style="fill: #9c5223; font-family: kaiti; font-size: 7mm"
            v-text="title"
        />
        <line
            x1="70mm"
            y1="20mm"
            x2="140mm"
            y2="20mm"
            style="stroke: #9c5223"
        />
        <line
            x1="70mm"
            y1="21mm"
            x2="140mm"
            y2="21mm"
            style="stroke: #9c5223"
        />
        <text
            x="148.5mm"
            y="12mm"
            textLength="17mm"
            lengthAdjust="spacing"
            style="fill: #9c5223; font-family: kaiti; font-size: 3.5mm"
        >
            发票代码：
        </text>
        <text
            x="148.5mm"
            y="17mm"
            textLength="17mm"
            lengthAdjust="spacing"
            style="fill: #9c5223; font-family: kaiti; font-size: 3.5mm"
        >
            发票号码：
        </text>
        <text
            x="148.5mm"
            y="22mm"
            textLength="17mm"
            lengthAdjust="spacing"
            style="fill: #9c5223; font-family: kaiti; font-size: 3.5mm"
        >
            开票日期：
        </text>
        <text
            x="148.5mm"
            y="27mm"
            textLength="17mm"
            lengthAdjust="spacing"
            style="fill: #9c5223; font-family: kaiti; font-size: 3.5mm"
        >
            校验码：
        </text>
        <!-- 发票底部 -->
        <text
            x="8mm"
            y="130mm"
            textLength="14mm"
            lengthAdjust="spacing"
            style="fill: #9c5223; font-family: kaiti; font-size: 3.5mm"
        >
            收款人：
        </text>
        <text
            x="64mm"
            y="130mm"
            textLength="10mm"
            lengthAdjust="spacing"
            style="fill: #9c5223; font-family: kaiti; font-size: 3.5mm"
        >
            复核：
        </text>
        <text
            x="107mm"
            y="130mm"
            textLength="14mm"
            lengthAdjust="spacing"
            style="fill: #9c5223; font-family: kaiti; font-size: 3.5mm"
        >
            开票人：
        </text>
        <!-- 发票内容 row1 -->
        <text
            x="8mm"
            y="34mm"
            textLength="14mm"
            lengthAdjust="spacing"
            style="
                fill: #9c5223;
                font-family: kaiti;
                font-size: 3.5mm;
                writing-mode: tb;
            "
        >
            购买方
        </text>
        <text
            x="13.5mm"
            y="35mm"
            textLength="24.5mm"
            lengthAdjust="spacing"
            style="fill: #9c5223; font-family: kaiti; font-size: 3.5mm"
        >
            名称：
        </text>
        <text
            x="13.5mm"
            y="40mm"
            textLength="24.5mm"
            lengthAdjust="spacing"
            style="fill: #9c5223; font-family: kaiti; font-size: 3.5mm"
        >
            纳税人识别号：
        </text>
        <text
            x="13.5mm"
            y="45mm"
            textLength="24.5mm"
            lengthAdjust="spacing"
            style="fill: #9c5223; font-family: kaiti; font-size: 3.5mm"
        >
            地址、电话：
        </text>
        <text
            x="13.5mm"
            y="50mm"
            textLength="24.5mm"
            lengthAdjust="spacing"
            style="fill: #9c5223; font-family: kaiti; font-size: 3.5mm"
        >
            开户行及账号：
        </text>
        <text
            x="122mm"
            y="34mm"
            textLength="14mm"
            lengthAdjust="spacing"
            style="
                fill: #9c5223;
                font-family: kaiti;
                font-size: 3.5mm;
                writing-mode: tb;
            "
        >
            密码区
        </text>
        <!-- 发票内容 row2 -->
        <text
            x="22mm"
            y="56mm"
            textLength="14mm"
            lengthAdjust="spacing"
            style="fill: #9c5223; font-family: kaiti; font-size: 3.5mm"
        >
            项目名称
        </text>
        <text
            x="61.5mm"
            y="56mm"
            textLength="14mm"
            lengthAdjust="spacing"
            style="fill: #9c5223; font-family: kaiti; font-size: 3.5mm"
        >
            规格型号
        </text>
        <text
            x="84.5mm"
            y="56mm"
            textLength="7mm"
            lengthAdjust="spacing"
            style="fill: #9c5223; font-family: kaiti; font-size: 3.5mm"
        >
            单位
        </text>
        <text
            x="100.5mm"
            y="56mm"
            textLength="7mm"
            lengthAdjust="spacing"
            style="fill: #9c5223; font-family: kaiti; font-size: 3.5mm"
        >
            数量
        </text>
        <text
            x="120.5mm"
            y="56mm"
            textLength="7mm"
            lengthAdjust="spacing"
            style="fill: #9c5223; font-family: kaiti; font-size: 3.5mm"
        >
            单价
        </text>
        <text
            x="145.5mm"
            y="56mm"
            textLength="7mm"
            lengthAdjust="spacing"
            style="fill: #9c5223; font-family: kaiti; font-size: 3.5mm"
        >
            金额
        </text>
        <text
            x="166.5mm"
            y="56mm"
            textLength="7mm"
            lengthAdjust="spacing"
            style="fill: #9c5223; font-family: kaiti; font-size: 3.5mm"
        >
            税率
        </text>
        <text
            x="186.5mm"
            y="56mm"
            textLength="7mm"
            lengthAdjust="spacing"
            style="fill: #9c5223; font-family: kaiti; font-size: 3.5mm"
        >
            税额
        </text>
        <text
            x="22mm"
            y="94.5mm"
            textLength="14mm"
            lengthAdjust="spacing"
            style="fill: #9c5223; font-family: kaiti; font-size: 3.5mm"
        >
            合计
        </text>
        <!-- 发票内容 row3 -->
        <text
            x="18mm"
            y="101mm"
            textLength="28mm"
            lengthAdjust="spacing"
            style="fill: #9c5223; font-family: kaiti; font-size: 3.5mm"
        >
            价税合计（大写）
        </text>
        <text
            x="152.5mm"
            y="101mm"
            textLength="14mm"
            lengthAdjust="spacing"
            style="fill: #9c5223; font-family: kaiti; font-size: 3.5mm"
        >
            （小写）
        </text>
        <!-- 发票内容 row4 -->
        <text
            x="8mm"
            y="108mm"
            textLength="14mm"
            lengthAdjust="spacing"
            style="
                fill: #9c5223;
                font-family: kaiti;
                font-size: 3.5mm;
                writing-mode: tb;
            "
        >
            销售方
        </text>
        <text
            x="13.5mm"
            y="109mm"
            textLength="24.5mm"
            lengthAdjust="spacing"
            style="fill: #9c5223; font-family: kaiti; font-size: 3.5mm"
        >
            名称：
        </text>
        <text
            x="13.5mm"
            y="114mm"
            textLength="24.5mm"
            lengthAdjust="spacing"
            style="fill: #9c5223; font-family: kaiti; font-size: 3.5mm"
        >
            纳税人识别号：
        </text>
        <text
            x="13.5mm"
            y="119mm"
            textLength="24.5mm"
            lengthAdjust="spacing"
            style="fill: #9c5223; font-family: kaiti; font-size: 3.5mm"
        >
            地址、电话：
        </text>
        <text
            x="13.5mm"
            y="124mm"
            textLength="24.5mm"
            lengthAdjust="spacing"
            style="fill: #9c5223; font-family: kaiti; font-size: 3.5mm"
        >
            开户行及账号：
        </text>
        <text
            x="122mm"
            y="108mm"
            textLength="14mm"
            lengthAdjust="spacing"
            style="
                fill: #9c5223;
                font-family: kaiti;
                font-size: 3.5mm;
                writing-mode: tb;
            "
        >
            备注
        </text>
        <!-- 发票抬头 数据填充 -->
        <text
            x="22.5mm"
            y="27mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="machineNo"
        />
        <text
            x="165.5mm"
            y="12mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="invoiceCode"
        />
        <text
            x="165.5mm"
            y="17mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="invoiceNo"
        />
        <text
            x="165.5mm"
            y="22mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="invoiceDate"
        />
        <text
            x="165.5mm"
            y="27mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="invoiceCheckCode"
        />
        <!-- 发票底部 数据填充 -->
        <text
            x="22mm"
            y="130mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="payee"
        />
        <text
            x="74mm"
            y="130mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="checker"
        />
        <text
            x="121mm"
            y="130mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="drawer"
        />
        <!-- 发票内容 row1 数据填充 -->
        <text
            x="38mm"
            y="35mm"
            v-text="gfName"
            :textLength="(gfNameUseTextLength ? 81 : 0) + 'mm'"
            lengthAdjust="spacingAndGlyphs"
            style="font-family: kaiti; font-size: 3.5mm"
        />
        <text
            x="38mm"
            y="40mm"
            v-text="gfEntTaxId"
            :textLength="(gfEntTaxIdUseTextLength ? 81 : 0) + 'mm'"
            lengthAdjust="spacingAndGlyphs"
            style="font-family: kaiti; font-size: 3.5mm"
        />
        <text
            x="38mm"
            y="45mm"
            v-text="gfAddressPhone"
            :textLength="(gfAddressPhoneUseTextLength ? 81 : 0) + 'mm'"
            lengthAdjust="spacingAndGlyphs"
            style="font-family: kaiti; font-size: 3.5mm"
        />
        <text
            x="38mm"
            y="50mm"
            v-text="gfBankAccount"
            :textLength="(gfBankAccountUseTextLength ? 81 : 0) + 'mm'"
            lengthAdjust="spacingAndGlyphs"
            style="font-family: kaiti; font-size: 3.5mm"
        />
        <!-- 密码区28字符一行 -->
        <text
            x="129mm"
            y="35mm"
            textLength="70mm"
            lengthAdjust="spacing"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="taxControlCode1"
        />
        <text
            x="129mm"
            y="40mm"
            textLength="70mm"
            lengthAdjust="spacing"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="taxControlCode2"
        />
        <text
            x="129mm"
            y="45mm"
            textLength="70mm"
            lengthAdjust="spacing"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="taxControlCode3"
        />
        <text
            x="129mm"
            y="50mm"
            textLength="70mm"
            lengthAdjust="spacing"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="taxControlCode4"
        />
        <!-- 发票内容 row2 数据填充-->
        <!-- 第1行商品 -->
        <text
            x="8.5mm"
            y="61mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity1.goodsName"
        />
        <text
            x="58mm"
            y="61mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity1.goodsSpecification"
        />
        <text
            x="83.5mm"
            y="61mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity1.goodsUnit"
        />
        <text
            x="95mm"
            y="61mm"
            :textLength="(commodity1GoodsQuantityUseTextLength ? 18 : 0) + 'mm'"
            lengthAdjust="spacingAndGlyphs"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity1.goodsQuantity"
        />
        <text
            x="115mm"
            y="61mm"
            :textLength="(commodity1UseTextLength ? 18 : 0) + 'mm'"
            lengthAdjust="spacingAndGlyphs"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity1.goodsPrice"
        />
        <text
            x="136.5mm"
            y="61mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity1.goodsTotalPrice"
        />
        <text
            x="166.5mm"
            y="61mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity1.goodsTaxRate"
        />
        <text
            x="177mm"
            y="61mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity1.goodsTotalTax"
        />
        <!-- 第2行商品 -->
        <text
            x="8.5mm"
            y="65mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity2.goodsName"
        />
        <text
            x="58mm"
            y="65mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity2.goodsSpecification"
        />
        <text
            x="83.5mm"
            y="65mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity2.goodsUnit"
        />
        <text
            x="95mm"
            y="65mm"
            :textLength="(commodity2GoodsQuantityUseTextLength ? 18 : 0) + 'mm'"
            lengthAdjust="spacingAndGlyphs"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity2.goodsQuantity"
        />
        <text
            x="115mm"
            y="65mm"
            :textLength="(commodity2UseTextLength ? 18 : 0) + 'mm'"
            lengthAdjust="spacingAndGlyphs"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity2.goodsPrice"
        />
        <text
            x="136.5mm"
            y="65mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity2.goodsTotalPrice"
        />
        <text
            x="166.5mm"
            y="65mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity2.goodsTaxRate"
        />
        <text
            x="177mm"
            y="65mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity2.goodsTotalTax"
        />
        <!-- 第3行商品 -->
        <text
            x="8.5mm"
            y="69mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity3.goodsName"
        />
        <text
            x="58mm"
            y="69mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity3.goodsSpecification"
        />
        <text
            x="83.5mm"
            y="69mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity3.goodsUnit"
        />
        <text
            x="95mm"
            y="69mm"
            :textLength="(commodity3GoodsQuantityUseTextLength ? 18 : 0) + 'mm'"
            lengthAdjust="spacingAndGlyphs"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity3.goodsQuantity"
        />
        <text
            x="115mm"
            y="69mm"
            :textLength="(commodity3UseTextLength ? 18 : 0) + 'mm'"
            lengthAdjust="spacingAndGlyphs"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity3.goodsPrice"
        />
        <text
            x="136.5mm"
            y="69mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity3.goodsTotalPrice"
        />
        <text
            x="166.5mm"
            y="69mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity3.goodsTaxRate"
        />
        <text
            x="177mm"
            y="69mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity3.goodsTotalTax"
        />
        <!-- 第4行商品 -->
        <text
            x="8.5mm"
            y="73mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity4.goodsName"
        />
        <text
            x="58mm"
            y="73mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity4.goodsSpecification"
        />
        <text
            x="83.5mm"
            y="73mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity4.goodsUnit"
        />
        <text
            x="95mm"
            y="73mm"
            :textLength="(commodity4GoodsQuantityUseTextLength ? 18 : 0) + 'mm'"
            lengthAdjust="spacingAndGlyphs"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity4.goodsQuantity"
        />
        <text
            x="115mm"
            y="73mm"
            :textLength="(commodity4UseTextLength ? 18 : 0) + 'mm'"
            lengthAdjust="spacingAndGlyphs"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity4.goodsPrice"
        />
        <text
            x="136.5mm"
            y="73mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity4.goodsTotalPrice"
        />
        <text
            x="166.5mm"
            y="73mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity4.goodsTaxRate"
        />
        <text
            x="177mm"
            y="73mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity4.goodsTotalTax"
        />
        <!-- 第5行商品 -->
        <text
            x="8.5mm"
            y="77mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity5.goodsName"
        />
        <text
            x="58mm"
            y="77mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity5.goodsSpecification"
        />
        <text
            x="83.5mm"
            y="77mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity5.goodsUnit"
        />
        <text
            x="95mm"
            y="77mm"
            :textLength="(commodity5GoodsQuantityUseTextLength ? 18 : 0) + 'mm'"
            lengthAdjust="spacingAndGlyphs"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity5.goodsQuantity"
        />
        <text
            x="115mm"
            y="77mm"
            :textLength="(commodity5UseTextLength ? 18 : 0) + 'mm'"
            lengthAdjust="spacingAndGlyphs"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity5.goodsPrice"
        />
        <text
            x="136.5mm"
            y="77mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity5.goodsTotalPrice"
        />
        <text
            x="166.5mm"
            y="77mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity5.goodsTaxRate"
        />
        <text
            x="177mm"
            y="77mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity5.goodsTotalTax"
        />
        <!-- 第6行商品 -->
        <text
            x="8.5mm"
            y="81mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity6.goodsName"
        />
        <text
            x="58mm"
            y="81mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity6.goodsSpecification"
        />
        <text
            x="83.5mm"
            y="81mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity6.goodsUnit"
        />
        <text
            x="95mm"
            y="81mm"
            :textLength="(commodity6GoodsQuantityUseTextLength ? 18 : 0) + 'mm'"
            lengthAdjust="spacingAndGlyphs"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity6.goodsQuantity"
        />
        <text
            x="115mm"
            y="81mm"
            :textLength="(commodity6UseTextLength ? 18 : 0) + 'mm'"
            lengthAdjust="spacingAndGlyphs"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity6.goodsPrice"
        />
        <text
            x="136.5mm"
            y="81mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity6.goodsTotalPrice"
        />
        <text
            x="166.5mm"
            y="81mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity6.goodsTaxRate"
        />
        <text
            x="177mm"
            y="81mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity6.goodsTotalTax"
        />
        <!-- 第7行商品 -->
        <text
            x="8.5mm"
            y="85mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity7.goodsName"
        />
        <text
            x="58mm"
            y="85mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity7.goodsSpecification"
        />
        <text
            x="83.5mm"
            y="85mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity7.goodsUnit"
        />
        <text
            x="95mm"
            y="85mm"
            :textLength="(commodity7GoodsQuantityUseTextLength ? 18 : 0) + 'mm'"
            lengthAdjust="spacingAndGlyphs"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity7.goodsQuantity"
        />
        <text
            x="115mm"
            y="85mm"
            :textLength="(commodity7UseTextLength ? 18 : 0) + 'mm'"
            lengthAdjust="spacingAndGlyphs"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity7.goodsPrice"
        />
        <text
            x="136.5mm"
            y="85mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity7.goodsTotalPrice"
        />
        <text
            x="166.5mm"
            y="85mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity7.goodsTaxRate"
        />
        <text
            x="177mm"
            y="85mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity7.goodsTotalTax"
        />
        <!-- 第8行商品 -->
        <text
            x="8.5mm"
            y="89mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity8.goodsName"
        />
        <text
            x="58mm"
            y="89mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity8.goodsSpecification"
        />
        <text
            x="83.5mm"
            y="89mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity8.goodsUnit"
        />
        <text
            x="95mm"
            y="89mm"
            :textLength="(commodity8GoodsQuantityUseTextLength ? 18 : 0) + 'mm'"
            lengthAdjust="spacingAndGlyphs"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity8.goodsQuantity"
        />
        <text
            x="115mm"
            y="89mm"
            :textLength="(commodity8UseTextLength ? 18 : 0) + 'mm'"
            lengthAdjust="spacingAndGlyphs"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity8.goodsPrice"
        />
        <text
            x="136.5mm"
            y="89mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity8.goodsTotalPrice"
        />
        <text
            x="166.5mm"
            y="89mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity8.goodsTaxRate"
        />
        <text
            x="177mm"
            y="89mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="commodity8.goodsTotalTax"
        />
        <!-- 合计 金额 -->
        <text
            x="136.5mm"
            y="94.5mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="invoiceTotalPrice"
        />
        <!-- 合计 税额 -->
        <text
            x="177mm"
            y="94.5mm"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="invoiceTotalTax"
        />
        <!-- 发票内容 row3 数据填充 -->
        <text
            x="58mm"
            y="101mm"
            v-text="invoiceTotalPriceTaxLabel"
            style="font-family: kaiti; font-size: 3.5mm"
        />
        <text
            x="171mm"
            y="101mm"
            v-text="invoiceTotalPriceTax"
            style="font-family: kaiti; font-size: 3.5mm"
        />
        <!-- 发票内容 row4 数据填充 -->
        <text
            x="38mm"
            y="109mm"
            v-text="xfName"
            :textLength="(xfNameUseTextLength ? 81 : 0) + 'mm'"
            lengthAdjust="spacingAndGlyphs"
            style="font-family: kaiti; font-size: 3.5mm"
        />
        <text
            x="38mm"
            y="114mm"
            v-text="xfEntTaxId"
            :textLength="(xfEntTaxIdUseTextLength ? 81 : 0) + 'mm'"
            lengthAdjust="spacingAndGlyphs"
            style="font-family: kaiti; font-size: 3.5mm"
        />
        <text
            x="38mm"
            y="119mm"
            v-text="xfAddressPhone"
            :textLength="(xfBankAccountUseTextLength ? 81 : 0) + 'mm'"
            lengthAdjust="spacingAndGlyphs"
            style="font-family: kaiti; font-size: 3.5mm"
        />
        <text
            x="38mm"
            y="124mm"
            v-text="xfBankAccount"
            :textLength="(xfAddressPhoneUseTextLength ? 81 : 0) + 'mm'"
            lengthAdjust="spacingAndGlyphs"
            style="font-family: kaiti; font-size: 3.5mm"
        />
        <!-- 备注 -->
        <text
            x="125mm"
            y="109mm"
            :textLength="(remarksUseTextLength ? 80 : 0) + 'mm'"
            lengthAdjust="spacingAndGlyphs"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="remarks1"
        />
        <text
            x="125mm"
            y="114mm"
            :textLength="(remarksUseTextLength ? 80 : 0) + 'mm'"
            lengthAdjust="spacingAndGlyphs"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="remarks2"
        />
        <text
            x="125mm"
            y="119mm"
            :textLength="(remarksUseTextLength ? 80 : 0) + 'mm'"
            lengthAdjust="spacingAndGlyphs"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="remarks3"
        />
        <text
            x="125mm"
            y="124mm"
            :textLength="(remarksUseTextLength ? 80 : 0) + 'mm'"
            lengthAdjust="spacingAndGlyphs"
            style="font-family: kaiti; font-size: 3.5mm"
            v-text="remarks4"
        />
    </svg>
</template>

<script>
import { NumberCapitalization } from "@/data/general_method";

export default {
    name: "InvoiceDZFP",
    props: {
        width: {
            type: [Number, String],
            default: "210mm",
        },
        height: {
            type: [Number, String],
            default: "140mm",
        },
    },
    data() {
        return {
            title: "增值税电子发票票样", // 标题；
            // 发票基本信息
            invoiceCode: "", // 发票代码
            invoiceNo: "", // 发票号码
            invoiceDate: "", // 开票日期
            invoiceCheckCode: "", // 校验码
            machineNo: "", // 机器编号
            invoiceTotalPrice: "", // 合计金额
            invoiceTotalTax: "", // 合计税额
            invoiceTotalPriceTax: "", // 价税合计
            invoiceTotalPriceTaxLabel: "", // 价税合计大写文本
            payee: "", // 收款人
            checker: "", // 复核人
            drawer: "", // 开票人
            taxControlCode1: "", // 税控码,密码区显示内容1，密码区28字符一行
            taxControlCode2: "", // 税控码,密码区显示内容2
            taxControlCode3: "", // 税控码,密码区显示内容3
            taxControlCode4: "", // 税控码,密码区显示内容4
            remarks1: "", // 备注1
            remarks2: "", // 备注2
            remarks3: "", // 备注3
            remarks4: "", // 备注4
            remarksUseTextLength: false, // 备注文本是否使用textLength属性；
            // 购方信息；
            gfName: "",
            gfNameUseTextLength: false, // 是否使用textLength属性；
            gfEntTaxId: "",
            gfEntTaxIdUseTextLength: false, // 是否使用textLength属性；
            gfBankAccount: "",
            gfBankAccountUseTextLength: false, // 是否使用textLength属性；
            gfAddressPhone: "",
            gfAddressPhoneUseTextLength: false, // 是否使用textLength属性；
            // 销方信息；
            xfName: "",
            xfNameUseTextLength: false, // 是否使用textLength属性；
            xfEntTaxId: "",
            xfEntTaxIdUseTextLength: false, // 是否使用textLength属性；
            xfBankAccount: "",
            xfBankAccountUseTextLength: false, // 是否使用textLength属性；
            xfAddressPhone: "",
            xfAddressPhoneUseTextLength: false, // 是否使用textLength属性；
            // 商品信息；
            commodity1: {},
            commodity1UseTextLength: false, // 是否使用textLength属性；
            commodity1GoodsQuantityUseTextLength: false, // 商品数量是否使用textLength属性；
            commodity2: {},
            commodity2UseTextLength: false, // 是否使用textLength属性；
            commodity2GoodsQuantityUseTextLength: false, // 商品数量是否使用textLength属性；
            commodity3: {},
            commodity3UseTextLength: false, // 是否使用textLength属性；
            commodity3GoodsQuantityUseTextLength: false, // 商品数量是否使用textLength属性；
            commodity4: {},
            commodity4UseTextLength: false, // 是否使用textLength属性；
            commodity4GoodsQuantityUseTextLength: false, // 商品数量是否使用textLength属性；
            commodity5: {},
            commodity5UseTextLength: false, // 是否使用textLength属性；
            commodity5GoodsQuantityUseTextLength: false, // 商品数量是否使用textLength属性；
            commodity6: {},
            commodity6UseTextLength: false, // 是否使用textLength属性；
            commodity6GoodsQuantityUseTextLength: false, // 商品数量是否使用textLength属性；
            commodity7: {},
            commodity7UseTextLength: false, // 是否使用textLength属性；
            commodity7GoodsQuantityUseTextLength: false, // 商品数量是否使用textLength属性；
            commodity8: {},
            commodity8UseTextLength: false, // 是否使用textLength属性；
            commodity8GoodsQuantityUseTextLength: false, // 商品数量是否使用textLength属性；
        };
    },
    methods: {
        // 设置标题；
        setTitle(title) {
            this.title = title;
        },
        /**
         * 设置发票基本信息；
         * @param {String} invoiceCode 发票代码
         * @param {String} invoiceNo 发票号码
         * @param {String} invoiceDate 开票日期
         * @param {String} invoiceCheckCode 校验码
         * @param {String} machineNo 机器编号
         * @param {String} invoiceTotalPrice 合计金额
         * @param {String} invoiceTotalTax 合计税额
         * @param {String} invoiceTotalPriceTax 价税合计
         * @param {String} payee 收款人
         * @param {String} checker 复核人
         * @param {String} drawer 开票人
         * @param {String} taxControlCode 税控码,密码区显示内容
         * @param {String} remarks 备注
         */
        setInvoiceBaseInfo({
            invoiceCode,
            invoiceNo,
            invoiceDate,
            invoiceCheckCode,
            machineNo,
            invoiceTotalPrice,
            invoiceTotalTax,
            invoiceTotalPriceTax,
            payee,
            checker,
            drawer,
            taxControlCode,
            remarks,
        }) {
            this.invoiceCode = invoiceCode;
            this.invoiceNo = invoiceNo;
            this.invoiceDate = invoiceDate;
            this.invoiceCheckCode = invoiceCheckCode;
            this.machineNo = machineNo;
            this.invoiceTotalPrice = invoiceTotalPrice;
            this.invoiceTotalTax = invoiceTotalTax;
            this.invoiceTotalPriceTax = "￥" + invoiceTotalPriceTax;
            let temp = Math.abs(invoiceTotalPriceTax);
            if (temp != NaN) {
                temp = NumberCapitalization(temp);
                if (parseFloat(invoiceTotalPriceTax) < 0) {
                    temp = "（负数）" + temp;
                }
            }
            this.invoiceTotalPriceTaxLabel = "⊗" + temp;
            this.payee = payee;
            this.checker = checker;
            this.drawer = drawer;

            this.taxControlCode1 = taxControlCode.substr(0, 28);
            this.taxControlCode2 = taxControlCode.substr(28, 28);
            this.taxControlCode3 = taxControlCode.substr(56, 28);
            this.taxControlCode4 = taxControlCode.substr(84);

            // 如果备注信息小于等于92个字符，则每行23个字符，设置 textLength="0mm"
            // 如果备注信息大于92个字符，则字符平分4份，设置 textLength="80mm"
            if (remarks.length <= 92) {
                this.remarksUseTextLength = false;
                this.remarks1 = remarks.substr(0, 23);
                this.remarks2 = remarks.substr(23, 23);
                this.remarks3 = remarks.substr(23 * 2, 23);
                this.remarks4 = remarks.substr(23 * 3);
            } else {
                this.remarksUseTextLength = true;
                let rowLength = remarks.length / 4;
                this.remarks1 = remarks.substr(0, rowLength);
                this.remarks2 = remarks.substr(rowLength, rowLength);
                this.remarks3 = remarks.substr(rowLength * 2, rowLength);
                this.remarks4 = remarks.substr(rowLength * 3);
            }
        },
        /**
         * 设置购方信息；
         * @param {String} name 名称；
         * @param {String} entTaxId 纳税人识别号；
         * @param {String} bankAccount 开户行及账号；
         * @param {String} addressPhone 地址、电话；
         */
        setInvoiceGF({ name, entTaxId, bankAccount, addressPhone }) {
            // 购方信息区域文字无缩放字符为23个字符；
            this.gfName = name;
            this.gfNameUseTextLength = name.length > 23 ? true : false;
            this.gfEntTaxId = entTaxId;
            this.gfEntTaxIdUseTextLength = entTaxId.length > 23 ? true : false;
            this.gfBankAccount = bankAccount;
            this.gfBankAccountUseTextLength =
                bankAccount.length > 23 ? true : false;
            this.gfAddressPhone = addressPhone;
            this.gfAddressPhoneUseTextLength =
                addressPhone.length > 23 ? true : false;
        },
        /**
         * 设置销方信息；
         * @param {String} name 名称；
         * @param {String} entTaxId 纳税人识别号；
         * @param {String} bankAccount 开户行及账号；
         * @param {String} addressPhone 地址、电话；
         */
        setInvoiceXF({ name, entTaxId, bankAccount, addressPhone }) {
            // 销方信息区域文字无缩放字符为23个字符；
            this.xfName = name;
            this.xfNameUseTextLength = name.length > 23 ? true : false;
            this.xfEntTaxId = entTaxId;
            this.xfEntTaxIdUseTextLength = entTaxId.length > 23 ? true : false;
            this.xfBankAccount = bankAccount;
            this.xfBankAccountUseTextLength =
                bankAccount.length > 23 ? true : false;
            this.xfAddressPhone = addressPhone;
            this.xfAddressPhoneUseTextLength =
                addressPhone.length > 23 ? true : false;
        },
        /**
         * 设置商品信息；
         * @param {Array} commoditys 商品列表，列表为空，表示发票使用清单；
         *
         * 商品列表对象说明：
         * 1.{String} goodsName 商品名；
         * 2.{String} goodsSpecification 规格型号；
         * 3.{String} goodsUnit 单位；
         * 4.{String} goodsQuantity 数量；
         * 5.{String} goodsPrice 单价；
         * 6.{String} goodsTotalPrice 金额；
         * 7.{String} goodsTaxRate 税率；
         * 8.{String} goodsTotalTax 税额；
         */
        setInvoiceCommodity(commoditys) {
            let funcUseTextLength = function (item) {
                if (item.goodsPrice) {
                    return item.goodsPrice.length > 11;
                }
                return false;
            };
            let funcGoodsQuantityUseTextLength = function (item) {
                if (item.goodsQuantity) {
                    return item.goodsQuantity.length > 11;
                }
                return false;
            };
            let funcFmtCommodity = function (item) {
                if (item.freeTaxMark) {
                    if (item.freeTaxMark == 1) {
                        item.goodsTaxRate = "免税";
                    } else if (item.freeTaxMark == 2) {
                        item.goodsTaxRate = "不征收";
                    }
                }
                return item;
            };

            this.commodity1 =
                commoditys.length >= 1
                    ? funcFmtCommodity(commoditys[0])
                    : { goodsName: "(详见销货清单) " };
            this.commodity1UseTextLength = funcUseTextLength(this.commodity1);
            this.commodity1GoodsQuantityUseTextLength = funcGoodsQuantityUseTextLength(
                this.commodity1
            );

            this.commodity2 =
                commoditys.length >= 2 ? funcFmtCommodity(commoditys[1]) : {};
            this.commodity2UseTextLength = funcUseTextLength(this.commodity2);
            this.commodity2GoodsQuantityUseTextLength = funcGoodsQuantityUseTextLength(
                this.commodity2
            );

            this.commodity3 =
                commoditys.length >= 3 ? funcFmtCommodity(commoditys[2]) : {};
            this.commodity3UseTextLength = funcUseTextLength(this.commodity3);
            this.commodity3GoodsQuantityUseTextLength = funcGoodsQuantityUseTextLength(
                this.commodity3
            );

            this.commodity4 =
                commoditys.length >= 4 ? funcFmtCommodity(commoditys[3]) : {};
            this.commodity4UseTextLength = funcUseTextLength(this.commodity4);
            this.commodity4GoodsQuantityUseTextLength = funcGoodsQuantityUseTextLength(
                this.commodity4
            );

            this.commodity5 =
                commoditys.length >= 5 ? funcFmtCommodity(commoditys[4]) : {};
            this.commodity5UseTextLength = funcUseTextLength(this.commodity5);
            this.commodity5GoodsQuantityUseTextLength = funcGoodsQuantityUseTextLength(
                this.commodity5
            );

            this.commodity6 =
                commoditys.length >= 6 ? funcFmtCommodity(commoditys[5]) : {};
            this.commodity6UseTextLength = funcUseTextLength(this.commodity6);
            this.commodity6GoodsQuantityUseTextLength = funcGoodsQuantityUseTextLength(
                this.commodity6
            );

            this.commodity7 =
                commoditys.length >= 7 ? funcFmtCommodity(commoditys[6]) : {};
            this.commodity7UseTextLength = funcUseTextLength(this.commodity7);
            this.commodity7GoodsQuantityUseTextLength = funcGoodsQuantityUseTextLength(
                this.commodity7
            );

            this.commodity8 =
                commoditys.length >= 8 ? funcFmtCommodity(commoditys[7]) : {};
            this.commodity8UseTextLength = funcUseTextLength(this.commodity8);
            this.commodity8GoodsQuantityUseTextLength = funcGoodsQuantityUseTextLength(
                this.commodity8
            );
        },
    },
};
</script>