<template>
  <div class="app-container">
    <div class="sfxy">
      <div class="infoTitle">四方协议模板：</div>
      <div>
        <el-radio-group v-model="form.fourAspect">
          <el-radio :label="true">标准模板</el-radio>
          <el-radio :label="false">特殊情况模板</el-radio>
        </el-radio-group>
      </div>
      <br />
      <div>
        <div class="infoTitle">甲方信息：</div>
        <div class="infoItem">
          甲方（被安置对象、商品房购买人、借款人）：<el-input
          ></el-input> 身份证号码：<el-input></el-input> 地址：<el-input
          ></el-input> 电话：<el-input></el-input>
        </div>

        <div class="infoItem">
          所属征收项目：<el-input disabled></el-input>
          房票安置转换协议编号：<el-input disabled></el-input>
        </div>

        <div class="infoTitle">乙方信息：</div>
        <div class="infoItem">
          乙方（商品房出卖人）：<el-input></el-input> 法定代表人：<el-input
          ></el-input> 地址：<el-input></el-input> 电话：<el-input></el-input>
        </div>
        <div class="infoTitle">丙方信息：</div>
        <div class="infoItem">
          丙方（贷款银行）：<el-input></el-input> 地址：<el-input
          ></el-input> 联系电话：<el-input></el-input>
        </div>

        <div class="infoTitle">丁方信息：</div>
        <div class="infoItem">
          丁方（资金监管方）：<el-input></el-input> 地址：<el-input
          ></el-input> 电话：<el-input></el-input>
        </div>

        <div class="infoTitle">购房信息：</div>
        <div class="infoItem">
          <el-input
            v-if="form.homePurchaseInfo"
            v-model="form.homePurchaseInfo.propertiesForSaleName"
            disabled
          />楼盘
          <el-input v-model="house.roomNumber" disabled />

          建筑面积
          <el-input v-model="house.area" disabled />㎡
        </div>
        <div v-if="car">
          车位号
          <el-input v-model="car.roomNumber" disabled />

          建筑面积 <el-input v-model="car.area" disabled />m2
        </div>

        <div class="infoTitle">购房价款：</div>
        <div class="infoItem">
          住房：面积 <el-input v-model="house.area" disabled />x 单价<el-input
            v-model="house.unitPrice"
            disabled
          />元 = <el-input v-model="house.price" disabled />元
        </div>
        <div v-if="car" class="infoItem">
          车位：面积 <el-input v-model="car.area" disabled />x 单价<el-input
            v-model="car.unitPrice"
            disabled
          />元 = <el-input v-model="house.price" disabled />元
        </div>
        <div class="infoItem">
          购房总价款为{{ form.homePurchaseInfo.totalPrice }}元
        </div>
      </div>
      <div>
        <div class="infoTitle">价款支付时间：</div>
        <div class="infoItem">
          （1）商品房总价款中的<el-input
            v-model="form.fourAspectContent.boxB"
            @blur="formatChinese(form.fourAspectContent.boxB, 'boxC')"
          />元（大写：

          {{ form.fourAspectContent.boxC }}
          ），由甲方授权丁方在收到本协议项下的甲方安置补偿款后20个工作日内代为向乙方支付；
        </div>
        <div class="infoItem">
          （2）商品房总价款中的<el-input
            v-model="form.fourAspectContent.boxD"
            @blur="formatChinese(form.fourAspectContent.boxD, 'boxE')"
          />元（大写：

          {{ form.fourAspectContent.boxE }}
          ），由甲方自行筹集资金，在签订商品房买卖合同前直接向乙方支付；
        </div>
        <div class="infoItem lh45" v-if="radio === 0">
          （3）除上述第（1）（2）项的款项作为购房首付款，商品房总价款中的剩余款项<el-input
            v-model="form.fourAspectContent.boxF"
            @blur="formatChinese(form.fourAspectContent.boxF, 'boxG')"
          />
          元（大写：{{ form.fourAspectContent.boxG }}
          ）由甲方向丙方进行按揭贷款，甲方授权丁方按月将安置补偿款用于代甲方向丙方偿付按揭款本息。
        </div>
        <div class="infoItem lh45" v-else>
          （3）除上述第（1）（2）项的款项作为购房首付款，商品房总价款中的剩余款项
          <el-input
            v-model="form.fourAspectContent.boxN1"
            @blur="formatChinese(form.fourAspectContent.boxN1, 'boxN2')"
          />
          元（大写
          <el-input v-model="form.fourAspectContent.boxN2" />
          ）由甲方向丙方进行转账并监管。甲方授权丙方在签订协议后分
          2期将剩余款项支付给乙方，其中，甲方于
          <el-input v-model="form.fourAspectContent.boxN3" /> 年
          <el-input v-model="form.fourAspectContent.boxN4" /> 月
          <el-input v-model="form.fourAspectContent.boxN5" /> 日前支付
          <el-input v-model="form.fourAspectContent.boxN6" /> 元（大写
          <el-input v-model="form.fourAspectContent.boxN7" /> ）；甲方于
          <el-input v-model="form.fourAspectContent.boxN8" /> 年
          <el-input v-model="form.fourAspectContent.boxN9" /> 月
          <el-input v-model="form.fourAspectContent.boxN10" /> 日前支付
          <el-input
            v-model="form.fourAspectContent.boxN11"
            @blur="formatChinese(form.fourAspectContent.boxN11, 'boxN12')"
          />
          元（大写 <el-input v-model="form.fourAspectContent.boxN12" /> ）。
        </div>

        <div class="blod infoItem" v-if="radio === 0">
          按揭额度：所需按揭款共计<el-input
            v-model="form.fourAspectContent.boxH"
            @blur="formatChinese(form.fourAspectContent.boxH, 'boxI')"
          />元（大写：
          {{ form.fourAspectContent.boxI }}），每月还款金额<el-input
            v-model="form.fourAspectContent.boxJ"
            @blur="formatChinese(form.fourAspectContent.boxJ, 'boxK')"
          />元（大写：{{ form.fourAspectContent.boxK }}）
        </div>
        <div class="blod infoItem">
          甲方被监管资金额度：金额<el-input
            v-model="form.fourAspectContent.boxL"
            @blur="formatChinese(form.fourAspectContent.boxL, 'boxM')"
          />元（大写：{{ form.fourAspectContent.boxM }}）
        </div>
      </div>
      <el-button type="primary" @click="handlePreview">预览</el-button>
    </div>
  </div>
</template>

<script>
import { getPhase3Data } from "@/api/housingTicket";
import { info } from "@/api/ticket";
export default {
  data() {
    return {
      id: this.$route.query.id,
      form: {
        fourAspect: true,
        fourAspectAgreement: "",
        fourAspectContent: {
          boxA: "",
          boxB: "",
          boxC: "",
          boxD: "",
          boxE: "",
          boxF: "",
          boxG: "",
          boxH: "",
          boxI: "",
          boxJ: "",
          boxK: "",
          boxL: "",
          boxM: "",
          boxN1: "",
          boxN10: "",
          boxN11: "",
          boxN12: "",
          boxN2: "",
          boxN3: "",
          boxN4: "",
          boxN5: "",
          boxN6: "",
          boxN7: "",
          boxN8: "",
          boxN9: "",
          homePurchaseInfo: {
            homePurchaseInfoInnerList: [
              {
                area: 0,
                price: 0,
                roomNumber: "",
                type: 0,
                unitPrice: 0,
              },
            ],
            propertiesForSaleName: "",
            totalPrice: 0,
          },
          repaymentPlan: {
            amountOfInstallments: 0,
            numberOfInstallments: 0,
            startDate: 0,
          },
        },
        id: "",
        repaymentPlan: {
          amountOfInstallments: 0,
          numberOfInstallments: 0,
          startDate: 0,
        },
        signed: false,
      },
      radio: 0,
      car: {},
      house: {},
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      const { query, path } = this.$route;
      const pathArr = path.split("/");
      const type = pathArr[pathArr.length - 1];
      this.type = type;
      if (type === "create") {
        this.getInfo(query.id);
      } else {
        this.getInfo(query.id);
      }
      // this.getPhase3Data();
    },
    getInfo(id) {
      info({ id }).then((res) => {
        this.form = res.d;
        // this.form.fourAspect = res.d.fourAspect ? true : false;
        if (res.d.fourAspect !== true) {
          this.form.fourAspectContent = {
            boxA: "",
            boxB: "",
            boxC: "",
            boxD: "",
            boxE: "",
            boxF: "",
            boxG: "",
            boxH: "",
            boxI: "",
            boxJ: "",
            boxK: "",
            boxL: "",
            boxM: "",
            boxN1: "",
            boxN10: "",
            boxN11: "",
            boxN12: "",
            boxN2: "",
            boxN3: "",
            boxN4: "",
            boxN5: "",
            boxN6: "",
            boxN7: "",
            boxN8: "",
            boxN9: "",
            homePurchaseInfo: {
              homePurchaseInfoInnerList: [
                {
                  area: 0,
                  price: 0,
                  roomNumber: "",
                  type: 0,
                  unitPrice: 0,
                },
              ],
              propertiesForSaleName: "",
              totalPrice: 0,
            },
          };
        }
        this.car = res.d.homePurchaseInfo.homePurchaseInfoInnerList.find(
          (item) => item.type === 1
        );
        this.house = res.d.homePurchaseInfo.homePurchaseInfoInnerList.find(
          (item) => item.type === 0
        );
      });
    },
    getPhase3Data() {
      getPhase3Data({ id: this.id }).then((res) => {
        this.form.fourAspectContent.homePurchaseInfo = res.d;

        this.car = res.d.homePurchaseInfoInnerList.find(
          (item) => item.type === 1
        );
        this.house = res.d.homePurchaseInfoInnerList.find(
          (item) => item.type === 0
        );
      });
    },
    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;
    },
    formatChinese(val, key) {
      this.form.fourAspectContent[key] = this.numberParseChina(val);
    },
    handlePreview() {
      this.form.id = this.$route.query.id;
      localStorage.setItem("printFourParty", JSON.stringify(this.form));
      localStorage.setItem(
        "printFourPartyHouseInfo",
        JSON.stringify(this.house)
      );
      localStorage.setItem("printFourPartyCarInfo", JSON.stringify(this.car));
      let routeData = this.$router.resolve({ path: "/printFourParty" });
      window.open(routeData.href, "_blank");
    },
  },
};
</script>

<style scoped lang="scss">
.sfxy {
  .el-input {
    width: 202px;
    margin-left: 10px;
    margin-right: 10px;
  }
  .infoTitle {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #272727;
    margin-bottom: 10px;
    &::before {
      content: "";
      border-left: 3px solid #468eff;
      height: 100%;
      padding-left: 10px;
    }
  }
  .infoItem {
    margin-bottom: 20px;
  }
  .blod {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 600;
    color: #272727;
  }
  .lh45 {
    line-height: 45px;
  }
}
</style>
