<template>
  <div class="printPage">
    <!-- v-if="form.housingTicketContent" -->
    <div class="print-area">
      <p style="text-align: center; line-height: 37px">
        <strong
          ><span style="font-family: 宋体; font-size: 32px"
            >放弃承诺书</span
          ></strong
        >
      </p>
      <p style="text-align: center; line-height: 37px">
        <strong
          ><span style="font-family: 宋体; font-size: 32px"
            >&nbsp;</span
          ></strong
        >
      </p>
      <p style="text-indent: 37px; line-height: 35px">
        <span style="font-family: 仿宋; font-size: 19px">本人：</span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋; font-size: 19px">{{
            form.waiverOfAgreementJson.boxA
          }}</span></span
        ><span style="font-family: 仿宋; font-size: 19px">，性别：</span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋; font-size: 19px">{{
            form.waiverOfAgreementJson.boxB
          }}</span></span
        ><span style="font-family: 仿宋; font-size: 19px">身份证：</span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋; font-size: 19px">{{
            form.waiverOfAgreementJson.boxC
          }}</span></span
        ><span style="font-family: 仿宋; font-size: 19px">，在本次</span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋; font-size: 19px">{{
            form.waiverOfAgreementJson.boxD
          }}</span></span
        ><span style="font-family: 仿宋; font-size: 19px">街道</span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋; font-size: 19px">{{
            form.waiverOfAgreementJson.boxE
          }}</span></span
        ><span style="font-family: 仿宋; font-size: 19px"
          >项目房票安置中，房票安置转换协议（编号：</span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋; font-size: 19px">{{
            form.waiverOfAgreementJson.boxF
          }}</span></span
        ><span style="font-family: 仿宋; font-size: 19px"
          >）中约定总安置补偿款总计为</span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋; font-size: 19px">{{
            form.waiverOfAgreementJson.boxG
          }}</span></span
        ><span style="font-family: 仿宋; font-size: 19px">元（大写：</span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋; font-size: 19px">{{
            form.waiverOfAgreementJson.boxH
          }}</span></span
        ><span style="font-family: 仿宋; font-size: 19px"
          ><span style="font-family: 仿宋"
            >）。根据房票安置转换协议中第四款第</span
          ><span style="font-family: 仿宋"
            >3条之约定：为确保乙方依法得到房屋安置，不因房屋拆迁影响居住条件，乙方获得的安置补偿款须用于购买商品房，且选购的商品房价款不因房源户型限制而低于安置补偿款的90%。安置补偿款监管使用协议中选购商品房（含车位）的总价款为</span
          ></span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋; font-size: 19px">{{
            form.waiverOfAgreementJson.boxI
          }}</span></span
        ><span style="font-family: 仿宋; font-size: 19px">元（大写：</span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋; font-size: 19px">{{
            form.waiverOfAgreementJson.boxJ
          }}</span></span
        ><span style="font-family: 仿宋; font-size: 19px"
          ><span style="font-family: 仿宋">），低于房票安置协议约定的</span
          ><span style="font-family: 仿宋">90%，差价部分</span></span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋; font-size: 19px">{{
            form.waiverOfAgreementJson.boxK
          }}</span></span
        ><span style="font-family: 仿宋; font-size: 19px">元（大写：</span
        ><span style="text-decoration: underline"
          ><span style="font-family: 仿宋; font-size: 19px">{{
            form.waiverOfAgreementJson.boxL
          }}</span></span
        ><span style="font-family: 仿宋; font-size: 19px"
          >）未使用，本户自愿放弃，对差价部分不再提出任何主张。</span
        >
      </p>
      <p style="line-height: 35px">
        <span style="font-family: 仿宋; font-size: 19px">&nbsp;</span>
      </p>
      <p style="line-height: 35px">
        <span style="font-family: 仿宋; font-size: 19px">&nbsp;</span>
      </p>
      <p style="text-indent: 373px; line-height: 35px">
        <span style="font-family: 仿宋; font-size: 19px"
          >承诺人：{{ form.waiverOfAgreementJson.boxM }}</span
        >
      </p>
      <p style="text-indent: 19px; text-align: right; line-height: 35px">
        <span style="font-family: 仿宋; font-size: 19px"
          ><span style="font-family: 仿宋">日期：</span
          ><span style="font-family: 仿宋"
            >{{ form.waiverOfAgreementJson.boxN }}年{{
              form.waiverOfAgreementJson.boxO
            }}月{{ form.waiverOfAgreementJson.boxP }}日</span
          ></span
        >
      </p>
      <p>
        <br />
      </p>
      <div v-if="!printing" style="padding-bottom: 50px">
        <!-- <el-button v-if="!$route.query.id" @click="submitData" type="primary"
          >暂存</el-button
        > -->
        <el-button @click="print" type="primary">打印</el-button>
        <!-- v-if="!$route.query.id && !form.numbering" -->
        <el-button
          v-if="!form.waiverOfAgreementContent"
          @click="handleSubmit"
          type="primary"
          v-loading.fullscreen.lock="fullscreenLoading"
          >提交</el-button
        >
        <el-button v-if="$route.query.id" @click="$router.back()"
          >返回</el-button
        >
      </div>

      <!-- <el-dialog title="房票编号" :visible.sync="dialogVisible" width="30%">
        <span>上一个房票编号：{{ lastNumber }}</span>
        <el-form ref="ticketNo" :model="form" :rules="rules">
          <el-form-item label="房票编号：" prop="numbering">
            <el-input
              v-model="form.numbering"
              placeholder="请输入房票编号"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitData">确 定</el-button>
        </span>
      </el-dialog> -->
    </div>
  </div>
</template>

<script>
import { add, getLastNumber, info } from "@/api/ticket";
import { phase32 } from "@/api/housingTicket";
export default {
  data() {
    return {
      fullscreenLoading: 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("fqcns"));
        console.log(this.form);
        // console.log();
        // this.form.housingTicketContent.boxN =
        //   this.form.housingTicketContent.boxN.toString().replace(/,/g, "、");

        // let sumTableData = [];
        // this.form.housingTicketContent.householdRegistrationDataList.map(
        //   (item) => {
        //     item.householdRegistrationDataB.map((h) => {
        //       if (JSON.stringify(h) !== "{}") {
        //         sumTableData.push(h);
        //       }
        //     });
        //   }
        // );
        // this.sumTableData = sumTableData;
      }
    },
    getInfo() {
      info(this.$route.query).then((res) => {
        this.form = res.d;
        let sumTableData = [];
        this.form.housingTicketContent.householdRegistrationDataList.map(
          (item) => {
            item.householdRegistrationDataB.map((h) => {
              if (JSON.stringify(h) !== "{}") {
                sumTableData.push(h);
              }
            });
          }
        );

        this.sumTableData = sumTableData;
      });
    },
    // handleCreate() {

    // },
    handleSave() {},
    print() {
      this.printing = true;
      setTimeout(() => {
        window.print();
        this.printing = false;
      }, 100);
    },
    handleSubmit() {
      this.$confirm(`是否提交?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.fullscreenLoading = true;

        this.form.waiverOfAgreementContent =
          document.getElementsByClassName("print-area")[0].innerHTML;
        phase32(this.form)
          .then((res) => {
            // console.log(res);
            this.fullscreenLoading = false;
            if (res.c === 200) {
              this.$message.success("提交成功");
              setTimeout(() => {
                window.close();
              }, 1000);
            }
          })
          .catch((err) => {
            setTimeout(() => {
              this.fullscreenLoading = false;
            }, 500);
          });
      });

      // this.getLastNumber();
      // this.dialogVisible = true;
    },
    async getLastNumber() {
      await getLastNumber().then((res) => {
        this.lastNumber = res.d;
      });
    },
    // submitData() {
    //   this.form.waiverOfAgreementContent =
    //     document.getElementsByClassName("print-area")[0].innerHTML;
    //   this.form.number =
    //     this.form.housingTicketContent.householdRegistrationDataList.reduce(
    //       (acc, obj) => Number(acc) + Number(obj.boxL),
    //       0
    //     );
    //   add(this.form).then((res) => {
    //     this.$message.success("提交成功");
    //     this.dialogVisible = false;
    //     setTimeout(() => {
    //       window.close();
    //     }, 1000);
    //   });
    // },
    formatChinese(val, key) {
      this.form.fourAspectContent[key] = this.numberParseChina(val);
    },
    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>
