<template>
  <div class="app-container">
    <div class="form-container">
      <div>
        <div class="infoTitle">甲方信息</div>
        <div class="infoItem">
          内江市<el-select v-model="form.nameA" disabled
            ><el-option label="高新" value="高新"></el-option></el-select
          >区<el-select v-model="form.streetOfficeNameA" disabled
            ><el-option label="胜利" value="胜利"></el-option
            ><el-option label="高桥" value="高桥"></el-option></el-select
          >街道办事处
        </div>
      </div>
      <div>
        <div class="infoTitle">乙方信息</div>
        <div class="infoItem" style="display: flex">
          <div></div>
          <div>
            <span>姓名：</span><el-input type="text" v-model="form.nameB" />
          </div>
          <div>
            <span>性别：</span>
            <el-select v-model="form.sexB">
              <el-option value="1" label="男"></el-option>
              <el-option value="0" label="女"></el-option>
            </el-select>
          </div>
          <div>
            <span>手机号：</span
            ><el-input type="text" v-model="form.phoneNumberB" />
          </div>
          <div>身份证：<el-input type="text" v-model="form.idCardB" /></div>
        </div>
        <div class="infoItem">
          <div>
            <span>身份证所载住址：内江</span
            ><el-input
              v-model="form.housingTicketContent.boxA1"
              type="text"
            />区<el-input
              v-model="form.housingTicketContent.boxA2"
            />街道<el-input
              v-model="form.housingTicketContent.boxA3"
            />社区<el-input v-model="form.housingTicketContent.boxA4" />组
          </div>
        </div>
      </div>
      <div class="infoTitle">乙方</div>
      <div
        class="borderDashed lh45"
        v-for="(vos, vosIndex) in form.housingTicketContent.vos"
        :key="vosIndex"
      >
        系
        <el-select v-model="vos.projectName">
          <el-option
            v-for="item in projectOptions"
            :key="item.id"
            :value="item.name"
          ></el-option>
        </el-select>
        项目的房屋被安置对象，于<el-input v-model="vos.year"></el-input
        >年<el-input v-model="vos.month"></el-input>月<el-input
          v-model="vos.day"
        ></el-input
        >日与内江市<el-input
          v-model="vos.boxA"
        />签订了《统一建房拆迁安置协议》（以下简称“原协议”）。
        <!-- <br /> -->
        <el-button
          v-if="form.housingTicketContent.vos.length > 1"
          type="danger"
          @click="handleDelVos(vosIndex)"
          size="mini"
          >删除</el-button
        >
      </div>
      <el-button
        type="primary"
        @click="handleAddVos"
        size="mini"
        style="margin-bottom: 20px"
        icon="el-icon-plus"
        >新增</el-button
      >

      <div>
        内江市<el-input
          v-model="form.housingTicketContent.boxB"
          style="width: 300px"
        />在原协议项下的全部权利和义务由甲方承继，并为尽快实现乙方的房屋安置，甲乙双方一致同意将原协议约定的统一建房安置方式变更为房票安置方式，即由乙方在内江市<el-input
          v-model="form.housingTicketContent.boxC"
        />确定的房源库中自主购买房地产开发商的商品房进行房屋安置。为此，双方经协商，就房票安置事宜达成本协议。
      </div>
      <div>
        <div class="infoTitle">安置家庭户籍情况及安置补偿款</div>
        <div
          class="borderDashed"
          v-for="(item, index) in this.form.housingTicketContent
            .householdRegistrationDataList"
          :key="index"
        >
          <div>
            <div>家庭户籍情况</div>
            <el-table
              :data="item.householdRegistrationDataB"
              style="width: 100%"
            >
              <el-table-column label="姓名">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.name"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="关系">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.relationship"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="身份证号">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.idCard"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="户籍所在地">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.placeOfDomicile"></el-input>
                </template>
              </el-table-column>
              <!-- <el-table-column label="原协议确定安置户型和面积" :rowspan="4">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.placeOfDomicile"></el-input>
                </template>
              </el-table-column> -->

              <el-table-column>
                <template slot-scope="scope">
                  <el-button
                    @click="deleteRow(scope.$index, index)"
                    type="danger"
                    size="mini"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div style="text-align: center">
              <el-button
                @click="addRow(item.householdRegistrationDataB)"
                size="mini"
                type="primary"
                >+ 添加人员</el-button
              >
            </div>
            <!--  -->
            <!-- {{ item.innerVos }} -->
            <div v-for="(ite, idx) in item.innerVos" :key="idx">
              原协议确定安置户型和面积：
              <!-- <el-input
                v-model="item.oldContent"
              ></el-input> -->
              <el-select v-model="ite.oldContent">
                <el-option label="大三室" value="大三室"></el-option>
                <el-option label="三室" value="三室"></el-option>
                <el-option label="两室" value="两室"></el-option>
                <el-option label="一室" value="一室"></el-option>
              </el-select>
              <el-select v-model="ite.oldContent2">
                <el-option label="1套" value="1套"></el-option
                ><el-option label="2套" value="2套"></el-option
                ><el-option label="3套" value="3套"></el-option>
              </el-select>
              <el-button
                type="danger"
                size="mini"
                @click="handleDelInnerVos(index, idx)"
                >删除</el-button
              >
            </div>
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-plus"
              @click="handleAddInnerVos(index)"
              >新增</el-button
            >
          </div>
          <div style="border-bottom: 1px solid #f7f7f7; margin-bottom: 10px">
            <div>安置补偿款</div>
            <div>
              基本安置补偿款：安置房屋面积<el-select
                allow-create
                filterable
                default-first-option
                v-model="item.boxB"
                @change="(val) => boxBChange(val, item)"
              >
                <el-option
                  v-for="(opt, optIndex) in boxGOptions"
                  :key="optIndex"
                  :label="opt.label"
                  :value="opt.value"
                ></el-option> </el-select
              >m² <span class="symbol">x</span>
              <!-- <el-input v-model="item.boxC" disabled></el-input>元/m² -->
              <!--  -->
              <!-- <el-select
                :disabled="index >= 1"
                v-model="item.boxC"
                allow-create
                filterable
                default-first-option
                @change="(val) => boxCChange(val, item)"
              >
                <el-option :label="5200" :value="5200"></el-option>
                <el-option :label="5400" :value="5400"></el-option> </el-select
              > -->
              <el-input v-model="item.boxC" disabled></el-input>
              元/m²
              <span class="symbol">=</span>
              <el-input v-model="item.boxA" disabled></el-input>元
            </div>
            <div>
              房票安置补贴：被安置人数<el-input
                v-model="item.boxE"
                @change="(val) => boxEChange(val, item)"
              ></el-input
              >人 <span class="symbol">x</span> 3000元/m²
              <span class="symbol">=</span>
              <el-input v-model="item.boxF" disabled></el-input>元
            </div>
            <div>
              高层物业补贴：安置房屋面积<el-select
                disabled
                placeholder=""
                v-model="item.boxB"
              ></el-select
              >㎡ <span class="symbol">x</span> 0.91元/㎡/月
              <span class="symbol">x</span> 180月 <span class="symbol">=</span>
              <el-input v-model="item.boxH" disabled></el-input>元
            </div>
            <div>
              大维基金补贴：安置房屋面积<el-select
                disabled
                placeholder=""
                v-model="item.boxB"
              ></el-select
              >㎡ <span class="symbol">x</span> 75元/㎡
              <span class="symbol">=</span>
              <el-input v-model="item.boxJ" disabled></el-input>元
            </div>
            <div>
              超期过渡费：<el-input
                v-model="item.boxE1"
                @change="(val) => boxE1Change(val, item)"
              ></el-input
              >人 x 400元/月 <span class="symbol">x</span> 6月
              <span class="symbol">=</span>
              <el-input v-model="item.boxK" disabled></el-input>元
            </div>
            <div>
              <span class="blod">以上1-5项合计为：</span
              >{{ item.boxL || "0.00" }}元（大写：{{ item.boxM }}）。
            </div>
          </div>
          <el-button
            v-if="index > 0"
            size="mini"
            @click="handleDeleteRow(index)"
            type="danger"
            >删除本条内容</el-button
          >
        </div>
      </div>
      <div>
        <span class="blod">最终合并安置补偿款为：</span
        >{{
          form.housingTicketContent &&
          form.housingTicketContent.householdRegistrationDataList &&
          form.housingTicketContent.householdRegistrationDataList.reduce(
            (acc, obj) => Number(acc) + Number(obj.boxL),
            0
          )
        }}元
      </div>
      <!-- <el-button type="primary" class="btn_add" @click="handleAdd"
        >+ 添加家庭户籍情况及补偿款</el-button
      >
      <div>
        <div class="infoTitle">被安置对象超基本安置面积应缴纳的款项：</div>
        <div>
          优惠单价（选填）：<el-input
            v-model="form.housingTicketContent.boxJ"
            @blur="boxJChange"
          ></el-input
          >元
        </div>
        <div>
          应缴纳：超基本安置面积（即安置房屋面积<el-input
            v-model="form.housingTicketContent.boxG"
          />m²<span class="symbol">-</span> 基本面积
          <el-input v-model="form.housingTicketContent.boxH" />㎡）部分<el-input
            v-model="form.housingTicketContent.boxL"
            @blur="boxLChange"
          />㎡ <span class="symbol">x</span>
          <el-input v-model="form.housingTicketContent.boxJ" disabled />
          元/㎡ <span class="symbol">=</span>
          <el-input v-model="form.housingTicketContent.boxK" disabled /> 元
        </div>
      </div>
      <br />
      <div class="infoTitle">
        被安置对象应退还超期过渡费：<el-input
          v-model="form.housingTicketContent.boxQ"
        />元 （大写：{{ chineseCpt(form.housingTicketContent.boxQ) }}）
      </div> -->

      <div class="borderDashed">
        <div>
          1.乙方应在本协议签订生效后1个月内在<el-input
            v-model="form.housingTicketContent.boxM"
          />审核通过的房票安置房屋的房源库中选择商品房并签订商品房买卖合同。
        </div>
        <div>
          2.乙方以户为单位进行商品房选购安置，并指定家庭户籍成员中的
          <!-- <el-input v-model="form.housingTicketContent.boxN" /> -->

          <el-select
            v-model="form.housingTicketContent.boxN"
            multiple
            v-if="form.housingTicketContent.householdRegistrationDataList"
          >
            <el-option
              v-for="(
                ps, idx
              ) in form.housingTicketContent.householdRegistrationDataList.reduce(
                (acc, arr) => acc.concat(arr.householdRegistrationDataB),
                []
              )"
              :key="idx"
              :label="ps.name"
              :value="ps.name"
            ></el-option>
          </el-select>
          作为购房人（即商品房买卖合同购买人、房屋产权人和借款合同借款人）
        </div>
      </div>
      <div class="blod infoItem">
        甲方：内江市<el-input v-model="form.nameA" disabled />区<el-input
          v-model="form.streetOfficeNameA"
          disabled
        />街道办事处
      </div>
      <div class="blod infoItem">
        乙方：内江市<el-input
          disabled
          v-model="form.housingTicketContent.boxA1"
        />区<el-input
          disabled
          v-model="form.housingTicketContent.boxA2"
        />街道<el-input
          disabled
          v-model="form.housingTicketContent.boxA3"
        />社区<el-input
          disabled
          v-model="form.housingTicketContent.boxA4"
        />组户主<el-input disabled v-model="form.nameB" />
      </div>
      <div style="margin-bottom: 20px">
        签约时间：<el-input v-model="form.housingTicketContent.boxR1"></el-input
        >年<el-input v-model="form.housingTicketContent.boxR2"></el-input
        >月<el-input v-model="form.housingTicketContent.boxR3"></el-input>日
      </div>
      <el-button @click="printPreview" type="primary"
        >生成协议预览打印</el-button
      >
    </div>
  </div>
</template>

<script>
import { list as projectList } from "@/api/project";
import { info } from "@/api/ticket";
import NP from "number-precision";
// import { info, update } from "@/api/staff";
export default {
  computed: {
    chineseCpt() {
      return (val) => {
        return this.numberParseChina(val);
      };
    },
  },
  data() {
    return {
      type: "create",
      //   base:{
      //     胜利：5400,
      //     高桥：5200,
      //   }
      //   sale:{
      //     胜利：3600,
      //     高桥：2800,
      //   },
      years: [],
      months: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
      ],
      days: [],
      form: {
        nameA: "高新",
        streetOfficeNameA: undefined,
        applicationJson: undefined,
        housingTicketContent: {
          year: undefined,
          month: "",
          day: "",
          boxA: "",
          boxA1: "",
          boxA2: "",
          boxA3: "",
          boxA4: "",
          boxA5: "",
          boxB: "",
          boxC: "",
          boxD: "",
          boxE: "",
          boxF: "",
          boxG: "",
          boxH: "",
          boxI: "",
          boxJ: "",
          boxK: "",
          boxL: "",
          boxM: "",
          boxN: "",
          boxO1: "",
          boxO2: "",
          boxP1: "",
          boxP2: "",
          boxP3: "",
          boxP4: "",
          boxP5: "",
          projectName: "",
          householdRegistrationDataList: [
            {
              boxA: "",
              boxB: "",
              boxC: "",
              boxD: "",
              boxE: "",
              boxF: "",
              boxG: "",
              boxH: "",
              boxI: "",
              boxJ: "",
              boxK: "",
              boxL: "",
              boxM: "",
              householdRegistrationDataB: [
                {
                  name: undefined,
                  relationship: undefined,
                  idCard: undefined,
                  placeOfDomicile: undefined,
                },
              ],
              oldContent: undefined,
              total: "",
            },
          ],
        },
      },
      // 45、57.5、70、82.5、95、75、87.5、100、105
      boxGOptions: [
        { label: "45", value: "45" },
        { label: "57.5", value: "57.5" },
        { label: "70", value: "70" },
        { label: "75", value: "75" },
        { label: "82.5", value: "82.5" },
        { label: "87.5", value: "87.5" },
        { label: "95", value: "95" },
        { label: "100", value: "100" },
        { label: "105", value: "105" },
      ],

      projectOptions: [],
      // tmp_boxE:undefined
    };
  },
  created() {
    const { query, name } = this.$route;
    // console.log(query,name);
    const { id } = query;
    if (name === "TicketCreate") {
      this.type = "create";
      // this.form.housingTicketContent = this.form.applicationJson.boxA
      console.log(1);
    } else if (name === "TicketUpdate") {
      this.type = "update";
      this.getInfo(id);
    } else {
      this.type = "detail";
      this.disabled = true;
      this.getInfo(id);
      console.log(this.form);
    }
    this.generateYears();
    this.getProjectList();
    // this.initData();
    // this.getTypes();
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const span = column["property"] + "-span";
      if (row[span]) {
        return row[span];
      }
      if (columnIndex === 1) {
        //1表示操作列所在列数，从0开始算；articleTypeName-span是操作列参考的合并列名+span
        return {
          rowspan: row["" + articleTypeName - span + ""].rowspan,
          colspan: 1,
        };
      }
    },

    getProjectList() {
      projectList({ current: 1, size: 99999 }).then((res) => {
        this.projectOptions = res.d.records;
      });
    },
    generateYears() {
      const currentYear = new Date().getFullYear();
      const startYear = currentYear - 100;
      const endYear = currentYear;
      for (let year = startYear; year <= endYear; year++) {
        this.years.push(year);
      }
      this.years.reverse();
    },
    updateDays() {
      console.log("updateDays");
      const year = parseInt(this.form.housingTicketContent.year);
      const month = parseInt(this.form.housingTicketContent.month);
      const totalDays = new Date(year, month, 0).getDate();
      this.days = [];
      for (let day = 1; day <= totalDays; day++) {
        this.days.push(day);
      }
    },

    addRow(row) {
      console.log(row);
      row.push({
        name: undefined,
        relationship: undefined,
        idCard: undefined,
        placeOfDomicile: undefined,
      });
    },
    deleteRow(scopeIndex, index) {
      this.form.housingTicketContent.householdRegistrationDataList[
        index
      ].householdRegistrationDataB.splice(scopeIndex, 1);
      // this.householdRegistrationDataB.splice(index, 1);
    },
    getInfo(id) {
      // console.log("getInfo", id);
      info({ id }).then((res) => {
        // console.log(res.d);
        this.form = res.d;
        this.form.applicationJson = res.d.applicationJson;

        if (this.form.housingTicketAgreement === null) {
          // this.form.housingTicketContent = {
          //   year: undefined,
          //   month: "",
          //   day: "",
          //   boxA: "",
          //   boxA1: "",
          //   boxA2: "",
          //   boxA3: "",
          //   boxA4: "",
          //   boxA5: "",
          //   boxB: "",
          //   boxC: "",
          //   boxD: "",
          //   boxE: "",
          //   boxF: "",
          //   boxG: "",
          //   boxH: "",
          //   boxI: "",
          //   boxJ: "",
          //   boxK: "",
          //   boxL: "",
          //   boxM: "",
          //   boxN: "",
          //   boxO1: "",
          //   boxO2: "",
          //   boxP1: "",
          //   boxP2: "",
          //   boxP3: "",
          //   boxP4: "",
          //   boxP5: "",
          //   projectName: "",
          // householdRegistrationDataList: [
          //   {
          //     boxA: "",
          //     boxB: "",
          //     boxC: this.form.applicationJson.boxD === "高桥" ? 5200 : 5400,
          //     boxD: "",
          //     boxE: "",
          //     boxF: "",
          //     boxG: "",
          //     boxH: "",
          //     boxI: "",
          //     boxJ: "",
          //     boxK: "",
          //     boxL: "",
          //     boxM: "",
          //     householdRegistrationDataB: [
          //       {
          //         name: undefined,
          //         relationship: undefined,
          //         idCard: undefined,
          //         placeOfDomicile: undefined,
          //       },
          //     ],
          //     oldContent: undefined,
          //     total: "",
          //   },
          // ],
          // };
          this.form.housingTicketContent.householdRegistrationDataList = [
            {
              boxA: "",
              boxB: "",
              boxC: this.form.applicationJson.boxD === "高桥" ? 5200 : 5400,
              boxD: "",
              boxE: "",
              boxF: "",
              boxG: "",
              boxH: "",
              boxI: "",
              boxJ: "",
              boxK: "",
              boxL: "",
              boxM: "",
              householdRegistrationDataB: [
                {
                  name: undefined,
                  relationship: undefined,
                  idCard: undefined,
                  placeOfDomicile: undefined,
                },
              ],
              innerVos: [
                {
                  oldContent: "",
                  oldContent2: "",
                },
              ],
              total: "",
            },
          ];
          this.form.housingTicketContent.boxA2 =
            this.form.applicationJson.vo[0].boxE;
          this.form.housingTicketContent.boxA3 =
            this.form.applicationJson.vo[0].boxD;
          this.form.housingTicketContent.boxA4 =
            this.form.applicationJson.vo[0].boxF;
          // this.form.housingTicketContent.projectName =
          //   this.form.applicationJson.boxG;
          this.form.housingTicketContent.year = this.form.applicationJson.boxJ;
          this.form.housingTicketContent.month = this.form.applicationJson.boxK;
          this.form.housingTicketContent.day = this.form.applicationJson.boxL;
          this.form.streetOfficeNameA = this.form.applicationJson.boxA;
          this.form.nameA = this.form.applicationJson.vo[0].boxH;
        } else {
          this.form.housingTicketContent.boxN =
            this.form.housingTicketContent.boxN.split("、");
        }
      });
    },
    // handleAdd() {
    //   this.form.housingTicketContent.householdRegistrationDataList.push({
    //     boxA: "",
    //     boxB: "",
    //     boxC: this.form.handleStreetOfficeNameA === "高桥" ? 5200 : 5400,
    //     boxD: "",
    //     boxE: "",
    //     boxF: "",
    //     boxG: "",
    //     boxH: "",
    //     boxI: "",
    //     boxJ: "",
    //     boxK: "",
    //     boxL: "",
    //     boxM: "",
    //     householdRegistrationDataB: [
    //       {
    //         name: undefined,
    //         relationship: undefined,
    //         idCard: undefined,
    //         placeOfDomicile: undefined,
    //         boxC: this.form.housingTicketContent
    //           .householdRegistrationDataList[0].boxC,
    //       },
    //     ],
    //     oldContent: undefined,
    //     total: "",
    //   });
    // },
    printPreview() {
      if (
        !this.form.housingTicketContent.boxR1 ||
        !this.form.housingTicketContent.boxR2 ||
        !this.form.housingTicketContent.boxR3
      ) {
        this.$message.error("请填写签约时间");
        return;
      }
      localStorage.setItem("ticket", JSON.stringify(this.form));
      this.$router.push({ path: "/print" });
      // let routeData = this.$router.resolve({ path: "/print" });
      // window.open(routeData.href, "_blank");
    },
    handleCreate() {
      const form = this.$refs["form"];
      form.validate((vaild) => {
        if (vaild) {
          const formData = form.getFormData();
          if (formData.secondaryType) {
            const infoForm = this.$refs["infoForm"];
            infoForm.validate((vaid) => {
              if (vaid) {
                formData.businessInfo = infoForm.getFormData();
                this.create(formData);
              }
            });
          } else {
            this.create(formData);
          }
        }
      });
    },
    handleUpdate() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          update(this.form).then((res) => {
            this.$message.success("修改成功");
            this.$router.back();
          });
        }
      });
    },
    create(formData) {
      let fn = add;
      if (this.type === "update") fn = update;
      fn(formData).then((res) => {
        console.log(res);
        this.$message({
          type: "success",
          message: "操作成功!",
        });
        this.$router.back();
      });
    },
    formChange(e) {
      const { secondaryType } = e;
      this.showInfo = !!secondaryType;
    },
    handleStreetOfficeNameA(val) {
      this.form.housingTicketContent.householdRegistrationDataList.map(
        (item) => {
          item.boxC = val === "高桥" ? 5200 : 5400;
        }
      );
      //   重新计算
      this.form.housingTicketContent.householdRegistrationDataList.map(
        (item) => {
          this.boxBChange(item.boxB, item);
        }
      );
    },
    boxBChange(val, item) {
      // 基本安置补偿款
      if (item.boxC) {
        item.boxA = NP.times(val, item.boxC);
      }
      //   高层物业补贴
      item.boxH = NP.times(val, 0.91, 180);
      //   大维基金补贴
      item.boxJ = NP.times(val, 75);
      this.sumBoxL();
    },
    boxEChange(val, item) {
      //   房票安置补贴 boxF
      // this.tmp_boxE = val;

      item.boxF = NP.times(val, 3000);
      // // 超期过渡费
      // item.boxK = NP.times(val, 400, 6);
      this.sumBoxL();
    },
    // boxKChange(val,item){
    //   item.boxK = NP.times(val,400,6)
    //   this.sumBoxL();
    // },
    boxE1Change(val, item) {
      item.boxK = NP.times(val, 400, 6);
      this.sumBoxL();
    },
    // boxCChange(val, item) {
    //   console.log(val, item);
    //   if (item.boxC) {
    //     item.boxA = NP.times(val, item.boxB);
    //   }
    //   this.form.housingTicketContent.householdRegistrationDataList.map(
    //     (ite) => {
    //       ite.boxC = val;
    //       ite.boxA = NP.times(val, ite.boxB);
    //     }
    //   );
    //   this.sumBoxL();
    // },
    sumBoxL() {
      console.log("calc");
      this.form.housingTicketContent.householdRegistrationDataList.map(
        (item) => {
          item.boxL = NP.plus(
            item.boxA,
            item.boxH,
            item.boxJ,
            item.boxF,
            item.boxK
          );
          item.boxM = this.numberParseChina(item.boxL);
        }
      );
    },
    // 被安置对象超极本安置面积应缴纳的款项
    boxLChange() {
      if (this.form.housingTicketContent.boxJ) {
        this.form.housingTicketContent.boxK = NP.times(
          this.form.housingTicketContent.boxL,
          this.form.housingTicketContent.boxJ
        );
      }
    },
    boxJChange() {
      if (this.form.housingTicketContent.boxL) {
        this.form.housingTicketContent.boxK = NP.times(
          this.form.housingTicketContent.boxL,
          this.form.housingTicketContent.boxJ
        );
      }
    },
    boxQChange() {
      this.numberParseChina(this.form.housingTicketContent.boxQ);
    },

    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;
    },
    projectChange() {
      this.form.projectId = this.projectOptions.find(
        (item) => item.name === this.form.housingTicketContent.projectName
      ).id;
      console.log(this.form.projectId);
    },
    handleDeleteRow(index) {
      this.$confirm(`是否删除本条内容?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.form.housingTicketContent.householdRegistrationDataList.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 {
        //
      }
    },
    handleAddInnerVos(index) {
      // console.log(
      //   index,
      //   this.form.housingTicketContent.householdRegistrationDataList[index]
      // );
      this.form.housingTicketContent.householdRegistrationDataList[
        index
      ].innerVos.push({
        oldContent: undefined,
        oldContent2: undefined,
      });
    },
    handleAddVos() {
      this.form.housingTicketContent.vos.push({
        projectName: undefined,
        year: undefined,
        month: undefined,
        day: undefined,
        boxA: undefined,
      });
    },
    handleDelVos(index) {
      console.log(index);
      this.form.housingTicketContent.vos.splice(index, 1);
    },
    handleDelInnerVos(index, idx) {
      this.form.housingTicketContent.householdRegistrationDataList[
        index
      ].innerVos.splice(idx, 1);
    },
  },
};
</script>

<style lang="scss" scoped>
.form-container {
  .el-input {
    width: 200px;
    display: inline-block;
    margin-right: 10px;
    margin-left: 10px;
  }
  .el-select {
    margin-right: 10px;
    margin-left: 10px;
  }
  .form-group {
    display: flex;
  }
}
.partyB_description {
  border: 1px dashed;
  padding: 20px;
}
.borderDashed {
  border: 1px dashed #eeeeee;
  padding: 20px;
  margin-bottom: 20px;
  line-height: 45px;
}
.short {
  width: 80px !important;
}
.middle {
  width: 120px !important;
}
.long {
  width: 202px !important;
}
.lh45 {
  line-height: 45px;
}
.infoTitle {
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 600;
  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;
}
.btn_add {
  margin-top: 20px;
  margin-bottom: 20px;
}
.symbol {
  font-size: 24px;
  color: #468eff;
  margin: 5px;
}
</style>
