<template>
  <div class="printPage">
    <!-- v-if="form.housingTicketContent" -->
    <div class="print-area">
      <p style="text-align: center; line-height: 47px">
        <strong
          ><span style="font-family: 方正小标宋简体; font-size: 29px"
            ><span style="font-family: 方正小标宋简体">申</span>
            <span style="font-family: 方正小标宋简体">请</span>
            <span style="font-family: 方正小标宋简体">书</span></span
          ></strong
        >
      </p>
      <p style="line-height: 29px">
        <span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 19px"
            >&nbsp;</span
          ></span
        >
      </p>
      <p style="line-height: 29px">
        <span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 19px">{{
            form.applicationJson.boxA
          }}</span></span
        ><span style="font-family: 仿宋_GB2312; font-size: 20px"
          >街道办事处：</span
        >
      </p>
      <p
        style="text-indent: 40px; line-height: 37px"
        v-for="(item, index) in form.applicationJson.vo"
        :key="index"
      >
        <span style="font-family: 仿宋_GB2312; font-size: 20px">本人</span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px">{{
            item.boxB
          }}</span></span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px"
            >&nbsp;&nbsp;</span
          ></span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px"
            >&nbsp;&nbsp;&nbsp;</span
          ></span
        ><span style="font-family: 仿宋_GB2312; font-size: 20px"
          >（身份证号</span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px"
            >&nbsp;</span
          ></span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px">{{
            item.boxC
          }}</span></span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px"
            >）</span
          ></span
        ><span style="font-family: 仿宋_GB2312; font-size: 20px"
          >是内江市东兴</span
        ><span style="font-family: 仿宋_GB2312; font-size: 20px"><br /></span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px"
            >&nbsp;</span
          ></span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px">{{
            item.boxD
          }}</span></span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px"
            >&nbsp;</span
          ></span
        ><span style="font-family: 仿宋_GB2312; font-size: 20px">街道</span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px"
            >&nbsp;&nbsp;</span
          ></span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px"
            >&nbsp;</span
          ></span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px">{{
            item.boxE
          }}</span></span
        ><span style="font-family: 仿宋_GB2312; font-size: 20px">社区</span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px"
            >&nbsp;</span
          ></span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px"
            >&nbsp;</span
          ></span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px">{{
            item.boxF
          }}</span></span
        ><span style="font-family: 仿宋_GB2312; font-size: 20px">组在</span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px"
            >&nbsp;</span
          ></span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px"
            >&nbsp;</span
          ></span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px">{{
            item.boxG
          }}</span></span
        ><span style="font-family: 仿宋_GB2312; font-size: 20px"
          >项目的被安置对象的户主。我户与</span
        ><span style="font-family: 仿宋_GB2312; font-size: 19px">内江</span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋; font-size: 19px">{{
            item.boxH
          }}</span></span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 19px"
            >&nbsp;</span
          ></span
        ><span style="font-family: 仿宋_GB2312; font-size: 19px">区</span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 19px"
            >&nbsp;</span
          ></span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 19px">{{
            item.boxI
          }}</span></span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋; font-size: 19px"
            >&nbsp;&nbsp;</span
          ></span
        ><span style="font-family: 仿宋_GB2312; font-size: 19px"
          >街道办事处</span
        ><span style="font-family: 仿宋_GB2312; font-size: 20px">于</span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px"
            >&nbsp;&nbsp;</span
          ></span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px">{{
            item.boxJ
          }}</span></span
        ><span style="font-family: 仿宋_GB2312; font-size: 20px">年</span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px"
            >&nbsp;</span
          ></span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px">{{
            item.boxK
          }}</span></span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px"
            >&nbsp;</span
          ></span
        ><span style="font-family: 仿宋_GB2312; font-size: 20px">月</span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px"
            >&nbsp;</span
          ></span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px">{{
            item.boxL
          }}</span></span
        ><span style="font-family: 仿宋_GB2312; font-size: 20px"
          >日签订《统一建房拆迁安置协议》，现我户</span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px"
            >&nbsp;</span
          ></span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px">{{
            item.boxM
          }}</span></span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px"
            >&nbsp;</span
          ></span
        ><span style="font-family: 仿宋_GB2312; font-size: 20px"
          >人（分别是</span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px"
            >&nbsp;</span
          ></span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px"
            >&nbsp;</span
          ></span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px">{{
            item.boxN
          }}</span></span
        ><span style="font-family: 仿宋_GB2312; font-size: 20px"
          >），自愿申请整户</span
        ><span style="font-family: 仿宋_GB2312; font-size: 20px">参加房票</span
        ><span style="font-family: 仿宋_GB2312; font-size: 20px"
          >安置，并配合有关部门办理以下事项：</span
        >
      </p>
      <p style="text-indent: 43px; line-height: 37px">
        <span style="font-family: 仿宋_GB2312; font-size: 20px"
          >一、我户自愿按照《</span
        ><span
          ><span style="font-family: 仿宋_GB2312; font-size: 20px"
            >内江高新区房票安置实施办法</span
          ></span
        ><span style="font-family: 仿宋_GB2312; font-size: 20px">》</span
        ><span style="font-family: 仿宋_GB2312; font-size: 20px">的规定</span
        ><span style="font-family: 仿宋_GB2312; font-size: 20px">选择</span
        ><span style="font-family: 仿宋_GB2312; font-size: 20px">房票安置</span
        ><span style="font-family: 仿宋_GB2312; font-size: 20px"
          >方式，并签订相关协议，以替换原签订的《统一建房拆迁安置协议》。</span
        >
      </p>
      <p style="text-indent: 43px; line-height: 37px">
        <span style="font-family: 仿宋_GB2312; font-size: 20px"
          >二、我户自愿申请并到指定办理点签订《</span
        ><span style="font-family: 仿宋_GB2312; font-size: 20px"
          >房票安置转换</span
        ><span style="font-family: 仿宋_GB2312; font-size: 20px"
          >协议》，在内江</span
        ><span style="font-family: 仿宋_GB2312; font-size: 20px"
          ><span style="font-family: 仿宋_GB2312"
            >市住房城乡建设局审核通过后，并在</span
          ><span style="font-family: 仿宋_GB2312"
            >“甜城房产超市”网上“房票安置房源专栏”公布的高新区范围内</span
          ></span
        ><span style="font-family: 仿宋_GB2312; font-size: 20px"
          >房源库中自主选购商品房，并与商品房销售商签订《商品房买卖合同》。</span
        >
      </p>
      <p style="text-indent: 43px; line-height: 37px">
        <span style="font-family: 仿宋_GB2312; font-size: 20px"
          >三、我户选购的商品房的总价不低于安置补偿</span
        ><span style="font-family: 仿宋_GB2312; font-size: 20px"
          ><span style="font-family: 仿宋_GB2312">款（不含超期过渡费）的</span
          ><span style="font-family: 仿宋_GB2312">90%。</span></span
        >
      </p>
      <p style="text-indent: 200px; line-height: 37px">
        <span style="font-family: 仿宋_GB2312; font-size: 20px">&nbsp;</span>
      </p>
      <p style="text-indent: 200px; line-height: 37px">
        <span style="font-family: 仿宋_GB2312; font-size: 20px">&nbsp;</span>
      </p>
      <p style="text-indent: 200px; line-height: 37px; text-align: right">
        <span style="font-family: 仿宋_GB2312; font-size: 20px"
          >申请人（签字按手印）：</span
        ><span
          ><span
            style="
              font-family: 仿宋_GB2312;
              font-size: 20px;
              text-decoration: underline;
            "
          >
            {{
              "\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0"
            }}</span
          ></span
        >
      </p>
      <p style="text-align: right; line-height: 37px">
        <span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px">{{
            form.applicationJson.boxP
          }}</span></span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px"
            >&nbsp;&nbsp;</span
          ></span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px"
            >&nbsp;&nbsp;</span
          ></span
        ><span style="font-family: 仿宋_GB2312; font-size: 20px">年</span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px">{{
            form.applicationJson.boxQ
          }}</span></span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px"
            >&nbsp;</span
          ></span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px"
            >&nbsp;&nbsp;</span
          ></span
        ><span style="font-family: 仿宋_GB2312; font-size: 20px">月</span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px">{{
            form.applicationJson.boxR
          }}</span></span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px"
            >&nbsp;&nbsp;</span
          ></span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋_GB2312; font-size: 20px"
            >&nbsp;&nbsp;</span
          ></span
        ><span style="font-family: 仿宋_GB2312; font-size: 20px">日</span>
      </p>
      <p>
        <span style="font-family: Calibri; font-size: 14px">&nbsp;</span>
      </p>
      <p>
        <br />
      </p>
      <div v-if="!printing" style="padding-bottom: 50px">
        <el-button @click="print" type="primary">打印</el-button>
        <!-- v-if="!$route.query.id && !form.numbering" -->
        <!-- v-if="!form.applicationContent" -->
        <el-button
          ref="btn_submit"
          @click="handleSubmit"
          type="primary"
          v-loading.fullscreen.lock="fullscreenLoading"
          v-if="!$route.query.id && !flag"
          >提交</el-button
        >
        <el-button v-if="$route.query.id" @click="$router.back()"
          >返回</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { info } from "@/api/ticket";
import { prePhase2 } from "@/api/prePhase";
export default {
  data() {
    return {
      fullscreenLoading: false,
      loading: false,
      form: {},
      sumTableData: [],
      printing: false,
      dialogVisible: false,
      lastNumber: undefined,
      rules: {
        numbering: [{ required: true, message: "不能为空", trigger: "blur" }],
      },
    };
  },
  //   computed:{
  //     sumBoxA() {
  //       return this.data.reduce((acc, obj) => acc + obj.a, 0);
  //     },
  //     sumBoxB() {
  //       return this.data.reduce((acc, obj) => acc + obj.b, 0);
  //     }
  //   },
  created() {
    this.init();
  },
  methods: {
    init() {
      if (this.$route.query.id) {
        this.getInfo();
      } else {
        this.form = JSON.parse(localStorage.getItem("preStepPreview"));
      }
    },
    getInfo() {
      info(this.$route.query).then((res) => {
        this.form = res.d;
        // console.log(!this.form.applicationContent);
        let sumTableData = [];
        this.form.housingTicketContent.householdRegistrationDataList.map(
          (item) => {
            item.householdRegistrationDataB.map((h) => {
              if (JSON.stringify(h) !== "{}") {
                sumTableData.push(h);
              }
            });
          }
        );

        this.sumTableData = sumTableData;
      });
    },
    print() {
      this.printing = true;
      setTimeout(() => {
        window.print();
        this.printing = false;
      }, 100);
    },
    handleSubmit() {
      this.$confirm(`是否提交?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.fullscreenLoading = true;
        this.form.applicationContent =
          document.getElementsByClassName("print-area")[0].innerHTML;
        prePhase2(this.form)
          .then((res) => {
            // console.log(res);

            this.fullscreenLoading = false;
            if (res.c === 200) {
              this.flag = true;
              this.$message.success("提交成功");
              setTimeout(() => {
                window.close();
              }, 1000);
            }
          })
          .catch((err) => {
            setTimeout(() => {
              // this.flag = false;
              this.fullscreenLoading = false;
            }, 500);
          });
      });

      // this.getLastNumber();
      // this.dialogVisible = true;
    },

    numberParseChina(money) {
      //汉字的数字
      var cnNums = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"];
      //基本单位
      var cnIntRadice = ["", "拾", "佰", "仟"];
      //对应整数部分扩展单位
      var cnIntUnits = ["", "万", "亿", "兆"];
      //对应小数部分单位
      var cnDecUnits = ["角", "分", "毫", "厘"];
      //整数金额时后面跟的字符
      var cnInteger = "整";
      //整型完以后的单位
      var cnIntLast = "圆";
      //最大处理的数字
      var maxNum = 999999999999999.9999;
      //金额整数部分
      var integerNum;
      //金额小数部分
      var decimalNum;
      //输出的中文金额字符串
      var chineseStr = "";
      //分离金额后用的数组，预定义
      var parts;
      if (money == "") {
        return "";
      }
      money = parseFloat(money);
      if (money >= maxNum) {
        //超出最大处理数字
        return "";
      }
      if (money == 0) {
        chineseStr = cnNums[0] + cnIntLast + cnInteger;
        return chineseStr;
      }
      //转换为字符串
      money = money.toString();
      if (money.indexOf(".") == -1) {
        integerNum = money;
        decimalNum = "";
      } else {
        parts = money.split(".");
        integerNum = parts[0];
        decimalNum = parts[1].substr(0, 4);
      }
      //获取整型部分转换
      if (parseInt(integerNum, 10) > 0) {
        var zeroCount = 0;
        var IntLen = integerNum.length;
        for (var i = 0; i < IntLen; i++) {
          var n = integerNum.substr(i, 1);
          var p = IntLen - i - 1;
          var q = p / 4;
          var m = p % 4;
          if (n == "0") {
            zeroCount++;
          } else {
            if (zeroCount > 0) {
              chineseStr += cnNums[0];
            }
            //归零
            zeroCount = 0;
            chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
          }
          if (m == 0 && zeroCount < 4) {
            chineseStr += cnIntUnits[q];
          }
        }
        chineseStr += cnIntLast;
      }
      //小数部分
      if (decimalNum != "") {
        var decLen = decimalNum.length;
        for (var i = 0; i < decLen; i++) {
          var n = decimalNum.substr(i, 1);
          if (n != "0") {
            chineseStr += cnNums[Number(n)] + cnDecUnits[i];
          }
        }
      }
      if (chineseStr == "") {
        chineseStr += cnNums[0] + cnIntLast + cnInteger;
      } else if (decimalNum == "") {
        chineseStr += cnInteger;
      }
      return chineseStr;
    },
  },
};
</script>

<style scoped lang="scss">
// table {
//   border-collapse: collapse;
// }
td,
th {
  border: 1px solid #000;
  font-size: 14px;
  padding: 8px;
}
p {
  font-family: 仿宋;
}
.printPage {
  width: 842px;
  margin: 0 auto;
  padding: 0 90px;
}
@media print {
  .print-area {
    /* 打印样式 */
  }
}
</style>
