<template>
  <div style="padding: 20px">
    <h3>申请书信息填写：</h3>
    <br />
    <!-- <el-input
      style="width: 120px"
      v-model="form.applicationJson.boxA"
    ></el-input> -->
    <el-select v-model="form.applicationJson.boxA">
      <el-option value="胜利" label="胜利"></el-option>
      <el-option value="高桥" label="高桥"></el-option>
    </el-select>
    街道办事处：
    <div v-for="(item, index) in form.applicationJson.vo" :key="index">
      本人<el-input :disabled="index < 1" v-model="item.boxB"></el-input
      >（身份证号<el-input style="width: 180px" v-model="item.boxC"></el-input
      >）是内江市东兴<el-input v-model="item.boxD"></el-input>街道<el-input
        v-model="item.boxE"
      ></el-input
      >社区<el-input v-model="item.boxF"></el-input>组在
      <el-select v-model="item.boxG" @change="projectChange">
        <el-option
          v-for="item in projectOptions"
          :key="item.id"
          :value="item.name"
        ></el-option></el-select
      >项目的被安置对象的户主。我户与内江<el-input
        v-model="item.boxH"
      ></el-input
      >区<el-input v-model="item.boxI"></el-input>街道办事处于<el-input
        v-model="item.boxJ"
      ></el-input
      >年<el-input v-model="item.boxK"></el-input>月
      <el-input v-model="item.boxL"></el-input
      >日签订《统一建房拆迁安置协议》，现我户<el-input
        v-model="item.boxM"
      ></el-input
      >人（分别是<el-input v-model="item.boxN" style="width: 400px"></el-input>
      ）
      <el-button v-if="index>0" @click="handleDel(index)" type="danger" size="mini"
        >删除</el-button
      >
      <hr />
    </div>
    <el-button
      style="margin: 10px 10px 10px 0"
      @click="add"
      type="primary"
      icon="el-icon-plus"
      size="mini"
      >新增</el-button
    >

    <br />
    ，自愿申请整户参加房票安置，并配合有关部门办理以下事项：
    一、我户自愿按照《内江高新区房票安置实施办法》的规定选择房票安置方式，并签订相关协议，以替换原签订的《统一建房拆迁安置协议》。
    二、我户自愿申请并到指定办理点签订《房票安置转换协议》，在内江市住房城乡建设局审核通过后，并在“甜城房产超市”网上“房票安置房源专栏”公布的高新区范围内房源库中自主选购商品房，并与商品房销售商签订《商品房买卖合同》。
    三、我户选购的商品房的总价不低于安置补偿款（不含超期过渡费）的90%。
    <br />
    申请人（签字按手印）：
    <!-- <el-input
      v-model="form.applicationJson.boxO"
    ></el-input> -->
    <br />
    <el-input v-model="form.applicationJson.boxP"></el-input>年<el-input
      v-model="form.applicationJson.boxQ"
    ></el-input
    >月<el-input v-model="form.applicationJson.boxR"></el-input>日
    <br />
    <el-button @click="preView">预览申请书</el-button>
  </div>
</template>

<script>
import { list } from "@/api/project";
export default {
  data() {
    return {
      form: {
        projectId: undefined,
        applicationContent: "",
        applicationJson: {
          // boxA: "",
          // boxB: "",
          // boxC: "",
          // boxD: "",
          // boxE: "",
          // boxF: "",
          // boxG: "",
          // boxH: "",
          // boxI: "",
          // boxJ: "",
          // boxK: "",
          // boxL: "",
          // boxM: "",
          // boxN: "",
          // boxO: "",
          // boxP: "",
          // boxQ: "",
          // boxR: "",
          boxA: "",
          boxO: "",
          boxP: "",
          boxQ: "",
          boxR: "",
          phone: "",
          vo: [
            {
              boxB: "",
              boxC: "",
              boxD: "",
              boxE: "",
              boxF: "",
              boxG: "",
              boxH: "",
              boxI: "",
              boxJ: "",
              boxK: "",
              boxL: "",
              boxM: "",
              boxN: "",
            },
          ],
        },
        id: "",
      },
      projectOptions: [],
    };
  },
  created() {
    // console.log(JSON.parse(sessionStorage.getItem('preStepInfo')));
    let info = JSON.parse(sessionStorage.getItem("preStepInfo"));
    this.form.applicationJson.vo[0].boxB = info.nameB;
    this.form.applicationJson.vo[0].boxC = info.idCardB;
    this.form.id = info.id;
    this.form.applicationJson.phone = info.phoneNumberB;

    this.getList();
  },
  methods: {
    preView() {
      //   this.$router.push("preStepPreview");
      localStorage.setItem("preStepPreview", JSON.stringify(this.form));
      //   this.form = JSON.parse(localStorage.getItem("ticket"));
      let routeData = this.$router.resolve({ path: "/sqs" });
      window.open(routeData.href, "_blank");
    },
    getList() {
      list({ current: 1, size: 99999 }).then((res) => {
        this.projectOptions = res.d.records;
      });
    },
    projectChange(val) {
      this.form.projectId = this.projectOptions.find(
        (item) => item.name === val
      ).id;
      console.log(this.form.projectId);
    },
    add() {
      this.form.applicationJson.vo.push({
        boxB: "",
        boxC: "",
        boxD: "",
        boxE: "",
        boxF: "",
        boxG: "",
        boxH: "",
        boxI: "",
        boxJ: "",
        boxK: "",
        boxL: "",
        boxM: "",
        boxN: "",
      });
    },
    handleDel(index) {
      this.form.applicationJson.vo.splice(index, 1);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-input {
  width: 100px;
  margin: 10px;
}
.el-select {
  width: 100px;
  margin: 10px;
}
</style>
