<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>
        <!--  -->
        <el-table :data="form.jiaFContent" style="width: 100%">
          <el-table-column label="甲方（被安置对象、商品房购买人、借款人）">
            <template slot-scope="scope">
              <el-input v-model="scope.row.name" disabled></el-input>
            </template>
          </el-table-column>
          <el-table-column label="身份证号">
            <template slot-scope="scope">
              <el-input v-model="scope.row.idCard" disabled></el-input>
            </template>
          </el-table-column>
          <el-table-column label="地址">
            <template slot-scope="scope">
              <el-input v-model="scope.row.address" disabled></el-input>
            </template>
          </el-table-column>
          <el-table-column label="电话">
            <template slot-scope="scope">
              <el-input v-model="scope.row.phoneNumber" disabled></el-input>
            </template>
          </el-table-column>
          <!-- <el-table-column>
            <template slot-scope="scope">
              <el-button
                v-if="tmp_boxJiaList.length !== 1"
                @click="deleteRow(scope.$index)"
                type="danger"
                size="mini"
                >删除</el-button
              >
            </template>
          </el-table-column> -->
        </el-table>
        <br />
        <!-- <div style="text-align: center">
          <el-button @click="addRow" size="mini" type="primary"
            >+ 添加人员</el-button
          >
        </div> -->
        <!-- end -->
        <!-- <div class="infoItem">
          甲方（被安置对象、商品房购买人、借款人）：<el-input
            disabled
            v-model="form.fourAspectContent.boxJia1"
          ></el-input>
          身份证号码：<el-input
            disabled
            v-model="form.fourAspectContent.boxJia2"
          ></el-input>
          地址：<el-input v-model="form.fourAspectContent.boxJia3"></el-input>
          电话：<el-input v-model="form.fourAspectContent.boxJia4"></el-input>
        </div> -->

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

        <div class="infoTitle">乙方信息：</div>
        <div class="infoItem">
          乙方（商品房出卖人）：
          <!-- <el-input v-model="form.fourAspectContent.boxYi1"></el-input> -->
          <!-- <el-select v-model="form.fourAspectContent.boxYi1" @change="yiChange">
            <el-option
              v-for="(item, index) in yiOptions"
              :label="item.boxYi1"
              :value="item.boxYi1"
              :key="index"
            ></el-option>
          </el-select> -->
          <el-input v-model="form.fourAspectContent.boxYi1" disabled></el-input>
          法定代表人：<el-input
            v-model="form.fourAspectContent.boxYi2"
            disabled
          ></el-input>
          地址：<el-input
            v-model="form.fourAspectContent.boxYi3"
            disabled
          ></el-input>
          电话：<el-input
            v-model="form.fourAspectContent.boxYi4"
            disabled
          ></el-input>
        </div>
        <div class="infoTitle">丙方信息：</div>
        <div class="infoItem">
          丙方（{{ form.fourAspect ? "贷款银行" : "资金监管方" }}）：
          <!-- <el-input
            v-model="form.fourAspectContent.boxBing1"
          ></el-input> -->
          <!-- <el-select
            v-if="form.fourAspect"
            v-model="form.fourAspectContent.boxBing1"
            @change="bingChange"
          >
            <el-option
              v-for="(item, index) in bingOptions"
              :label="item.boxBing1"
              :value="item.boxBing1"
              :key="index"
            ></el-option>
          </el-select>

          <el-select
            v-else
            v-model="form.fourAspectContent.boxBing1"
            @change="bing1Change"
          >
            <el-option
              v-for="(item, index) in dingOptions"
              :label="item.boxDing1"
              :value="item.boxDing1"
              :key="index"
            ></el-option>
          </el-select> -->
          <el-input
            v-model="form.fourAspectContent.boxBing1"
            disabled
          ></el-input>
          授权代表：
          <el-input
            v-model="form.fourAspectContent.boxBing2"
            disabled
          ></el-input>

          地址：<el-input
            v-model="form.fourAspectContent.boxBing3"
            disabled
          ></el-input>
          联系电话：<el-input
            v-model="form.fourAspectContent.boxBing4"
            disabled
          ></el-input>
        </div>
        <div class="infoTitle" v-if="form.fourAspect">丁方信息：</div>
        <div class="infoItem" v-if="form.fourAspect">
          丁方（资金监管方）：<!-- <el-input
            v-model="form.fourAspectContent.boxDing1"
          ></el-input> -->
          <!-- <el-select
            v-model="form.fourAspectContent.boxDing1"
            @change="dingChange"
          >
            <el-option
              v-for="(item, index) in dingOptions"
              :label="item.boxDing1"
              :value="item.boxDing1"
              :key="index"
            ></el-option>
          </el-select> -->
          <el-input
            v-model="form.fourAspectContent.boxDing1"
            disabled
          ></el-input>
          地址：<el-input
            v-model="form.fourAspectContent.boxDing2"
            disabled
          ></el-input>
          电话：<el-input
            v-model="form.fourAspectContent.boxDing3"
            disabled
          ></el-input>
        </div>

        <div class="infoTitle">购房信息：</div>
        <div class="infoItem">
          甲方自愿选购乙方出售（楼盘名称）<el-input
            v-if="form.homePurchaseInfo"
            v-model="form.homePurchaseInfo.propertiesForSaleName"
            disabled
          />的商品房，包括：
        </div>
        <div class="infoItem">
          （1）住宅房屋。房号：<el-input
            v-model="house.roomNumber"
            disabled
          />；建筑面积 <el-input v-model="house.area" disabled />㎡；
        </div>
        <div class="infoItem" v-if="car">
          （2）车位。车位号：<el-input v-model="car.roomNumber" disabled />
          ；建筑面积 <el-input v-model="car.area" disabled />㎡。
        </div>
        <!-- <div v-if="car"></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="car.price" disabled />元
        </div>
        <div class="infoItem">
          购房总价款为{{
            form.homePurchaseInfo && 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="form.fourAspect">
          （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')"
          />
          元（大写：
          {{ 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"
            @blur="formatChinese(form.fourAspectContent.boxN6, 'boxN7')"
          />
          元（大写： {{ 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')"
          />
          元（大写： {{ form.fourAspectContent.boxN12 }} ）。
        </div>

        <div class="blod infoItem" v-if="form.fourAspect">
          按揭额度：所需按揭款共计<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 class="bold infoItem">
          签订日期：<el-input v-model="form.fourAspectContent.boxO1"></el-input
          >年<el-input v-model="form.fourAspectContent.boxO2"></el-input
          >月<el-input v-model="form.fourAspectContent.boxO3"></el-input>日
        </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,
      tmp_boxJiaList: [
        {
          name: "",
          idCard: "",
          address: "",
          phone: "",
        },
      ],
      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: "",
          boxDing1: "内江高投置业有限责任公司",
          boxDing2: "四川省内江市东兴区汉安大道东二段111号18栋2层2号",
          boxDing3: "0832-6105049",
          // boxDing4:"",
          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: {},
      yiOptions: [
        {
          boxYi1: "甲方华润",
          boxYi2: "甲方华润领导XX",
          boxYi3: "甲方华润地址xxx",
          boxYi4: "甲方华润电话xxxx",
        },
        {
          boxYi1: "甲方万科",
          boxYi2: "甲方万科领导XX",
          boxYi3: "甲方万科地址xxx",
          boxYi4: "甲方万科电话xxxx",
        },
      ],
      // a: {
      //   boxYi1: "华润",
      //   boxYi2: "华润领导XX",
      //   boxYi3: "华润地址xxx",
      //   boxYi4: "华润电话xxxx",
      // },
      bingOptions: [
        {
          boxBing1: "丙方工商银行",
          boxBing2: "丙方工商银行地址XX",
          boxBing3: "丙方工商银行联系电话xxx",
        },
        {
          boxBing1: "丙方农业银行",
          boxBing2: "丙方农业银行地址XX",
          boxBing3: "丙方农业银行联系电话xxx",
        },
      ],
      dingOptions: [
        {
          boxDing1: "丁方资金监管方1",
          boxDing2: "丁方资金监管方1地址XX",
          boxDing3: "丁方资金监管方1联系电话xxx",
        },
        {
          boxDing1: "丁方资金监管方2",
          boxDing2: "丁方资金监管方2地址XX",
          boxDing3: "丁方资金监管方2联系电话xxx",
        },
      ],
    };
  },
  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();
    },
    async getInfo(id) {
      await info({ id }).then((res) => {
        this.form = res.d;
        if (!this.form.housingTicketContent.boxN) {
          this.$message.error("请先完善房票协议");
        }
        // this.form.fourAspect = res.d.fourAspect ? true : false;
        if (res.d.fourAspect === null) {
          // if (res.d.fourAspect !== true) {
          this.form.fourAspect = true;
          this.form.fourAspectContent = {
            boxJia1: this.form.housingTicketContent.boxN,
            boxJia2:
              this.form.housingTicketContent.householdRegistrationDataList
                .flatMap((arr) => arr.householdRegistrationDataB)
                .find((m) => m.name === this.form.housingTicketContent.boxN)
                .idCard,
            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,
            },
          };
        } else {
          console.log("else");
          // this.form.jiaFContent
          // let names = this.form.fourAspectContent.boxJia1.split(",");
          // let idcards = this.form.fourAspectContent.boxJia2.split(",");
          // let addresses = this.form.fourAspectContent.boxJia3.split(",");
          // let phones = this.form.fourAspectContent.boxJia4.split(",");
          // this.tmp_boxJiaList = [];
          // this.form.fourAspectContent.boxJia4.split(",").map((item, index) => {
          //   this.tmp_boxJiaList.push({
          //     name: names[index],
          //     idCard: idcards[index],
          //     address: addresses[index],
          //     phone: item,
          //   });
          // });
        }
        this.car = res.d.homePurchaseInfo.homePurchaseInfoInnerList.find(
          (item) => item.type === 1
        );
        this.house = res.d.homePurchaseInfo.homePurchaseInfoInnerList.find(
          (item) => item.type === 0
        );

        this.form.fourAspectContent.boxYi1 = this.form.yiInfo1;
        this.form.fourAspectContent.boxYi2 = this.form.yiInfo2;
        this.form.fourAspectContent.boxYi3 = this.form.yiInfo3;
        this.form.fourAspectContent.boxYi4 = this.form.yiInfo4;

        this.form.fourAspectContent.boxBing1 = this.form.remark.bankName;
        this.form.fourAspectContent.boxBing2 = this.form.remark.bankAuthName;
        this.form.fourAspectContent.boxBing3 = this.form.remark.bankAddress;
        this.form.fourAspectContent.boxBing4 = this.form.remark.bankPhone;

        this.form.fourAspectContent.boxDing1 = "内江高投置业有限责任公司";
        this.form.fourAspectContent.boxDing2 =
          "四川省内江市东兴区汉安大道东二段111号18栋2层2号";
        this.form.fourAspectContent.boxDing3 = "0832-6105049";

        this.form.fourAspectContent.boxB =
          this.form.fourAspectContent.boxB || this.form.repaymentPlan.amount1;
        this.formatChinese(this.form.fourAspectContent.boxB, "boxC");
        this.form.fourAspectContent.boxD =
          this.form.fourAspectContent.boxD || this.form.repaymentPlan.amount2;
        this.formatChinese(this.form.fourAspectContent.boxD, "boxE");
        this.form.fourAspectContent.boxF =
          this.form.fourAspectContent.boxF || this.form.repaymentPlan.amount3;
        this.formatChinese(this.form.fourAspectContent.boxF, "boxG");
        this.form.fourAspectContent.boxH =
          this.form.fourAspectContent.boxH || this.form.repaymentPlan.amount4;
        this.formatChinese(this.form.fourAspectContent.boxH, "boxI");
        this.form.fourAspectContent.boxJ =
          this.form.fourAspectContent.boxJ ||
          this.form.repaymentPlan.amountOfInstallments;
        this.formatChinese(this.form.fourAspectContent.boxJ, "boxK");

        this.form.fourAspectContent.boxL =
          this.form.fourAspectContent.boxL ||
          (this.form.totalPrice < this.form.number
            ? this.form.totalPrice
            : this.form.number);
        this.formatChinese(this.form.fourAspectContent.boxL, "boxM");
      });
    },
    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;
        console.log(chineseStr);
        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;
      }
      console.log("#4");
      return chineseStr;
    },
    formatChinese(val, key) {
      // console.log(val,key,this.numberParseChina(val));
      this.form.fourAspectContent[key] = this.numberParseChina(val);
    },
    handlePreview() {
      if(!this.form.fourAspectContentoxO1||!this.form.fourAspectContentoxO2||!this.form.fourAspectContentoxO3){
        this.$message.error('请填写签订日期')
      }
      this.form.fourAspectContent.boxJia1 = this.form.jiaFContent
        .map((item) => item.name)
        .toString()
        .replace(/,/g, "、");
      this.form.fourAspectContent.boxJia2 = this.form.jiaFContent
        .map((item) => item.idCard)
        .toString()
        .replace(/,/g, "、");
      this.form.fourAspectContent.boxJia3 = this.form.jiaFContent
        .map((item) => item.address)
        .toString()
        .replace(/,/g, "、");
      this.form.fourAspectContent.boxJia4 = this.form.jiaFContent
        .map((item) => item.phoneNumber)
        .toString()
        .replace(/,/g, "、");

      // console.log(this.form);
      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");
    },
    yiChange(val) {
      // if (!val) {
      //   this.form.fourAspectContent.boxYi2 = "";
      //   this.form.fourAspectContent.boxYi3 = "";
      //   this.form.fourAspectContent.boxYi4 = "";
      // } else {
      const { boxYi2, boxYi3, boxYi4 } = this.yiOptions.find(
        (item) => item.boxYi1 === val
      );
      console.log(boxYi2, boxYi3, boxYi4);
      this.form.fourAspectContent.boxYi2 = boxYi2;
      this.form.fourAspectContent.boxYi3 = boxYi3;
      this.form.fourAspectContent.boxYi4 = boxYi4;
      // }
    },
    bingChange(val) {
      // if (!val) {
      //   this.form.fourAspectContent.boxYi2 = "";
      //   this.form.fourAspectContent.boxYi3 = "";
      //   this.form.fourAspectContent.boxYi4 = "";
      // } else {
      const { boxBing2, boxBing3, boxBing4 } = this.bingOptions.find(
        (item) => item.boxBing1 === val
      );
      console.log(boxBing2, boxBing3, boxBing4);
      this.form.fourAspectContent.boxBing2 = boxBing2;
      this.form.fourAspectContent.boxBing3 = boxBing3;
      this.form.fourAspectContent.boxBing4 = boxBing4;
      // }
    },
    // bing1Change(val) {
    //   const { boxDing2, boxDing3, boxDing4 } = this.dingOptions.find(
    //     (item) => item.boxDing1 === val
    //   );
    //   // console.log(boxBing2, boxBing3, boxBing4);
    //   this.form.fourAspectContent.boxBing2 = boxDing2;
    //   this.form.fourAspectContent.boxBing3 = boxDing3;
    //   this.form.fourAspectContent.boxBing4 = boxDing4;
    // },
    dingChange(val) {
      console.log("dingChange", val);
      // if (!val) {
      //   this.form.fourAspectContent.boxYi2 = "";
      //   this.form.fourAspectContent.boxYi3 = "";
      //   this.form.fourAspectContent.boxYi4 = "";
      // } else {
      const { boxDing2, boxDing3, boxDing4 } = this.dingOptions.find(
        (item) => item.boxDing1 === val
      );
      console.log(boxDing2, boxDing3, boxDing4);
      this.form.fourAspectContent.boxDing2 = boxDing2;
      this.form.fourAspectContent.boxDing3 = boxDing3;
      this.form.fourAspectContent.boxDing4 = boxDing4;
      // }
    },
    addRow() {
      this.tmp_boxJiaList.push({
        name: "",
        idCard: "",
        address: "",
        phone: "",
      });
    },
    deleteRow(index) {
      console.log(index);
      this.tmp_boxJiaList.splice(index, 1);
    },
    validateIdCard(idCard) {
      const idCardPattern =
        /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;

      if (!idCardPattern.test(idCard)) {
        this.$message.error("身份证号格式不正确");
      } else {
        //
      }
    },
  },
};
</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>
