<!--
 * @Description  :户信息
 * @Autor        : miaofang
 * @LastEditTime : 2023-05-17 13:44:30
-->
<template>
  <div class="households itemForm">
    <el-form :model="ruleForm" :rules="rules" ref="formList" label-width="115px" :key="key">

      <div v-for="(item, index) in ruleForm" :key="index" class="obligee-item">
        <p class="obligee-item-name">户信息{{ index + 1 }}</p>
        <div class="obligee-item-list">
          <el-row>
            <el-col :span="8">
              <el-form-item prop="YSDM">
                <span slot="label">
                  要素代码： <br />
                  <p class="label-detail">（YSDM）</p>
                </span>
                <el-input :disabled="$store.state.business.Edit" v-model="ruleForm[index].ysdm"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="BDCDYH">
                <span slot="label">
                  不动产单元号： <br />
                  <p class="label-detail">（BDCDYH）</p>
                </span>
                <el-input :disabled="$store.state.business.Edit" v-model="ruleForm[index].bdcdyh"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="LJZH">
                <span slot="label">
                  逻辑幢号： <br />
                  <p class="label-detail">（LJZH）</p>
                </span>
                <el-input :disabled="$store.state.business.Edit" v-model="ruleForm[index].ljzh"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item prop="ZRZH">
                <span slot="label">
                  自然幢号： <br />
                  <p class="label-detail">（ZRZH）</p>
                </span>
                <el-input :disabled="$store.state.business.Edit" v-model="ruleForm[index].zrzh"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="FWBM">
                <span slot="label">
                  房屋编码： <br />
                  <p class="label-detail">（FWBM）</p>
                </span>
                <el-input :disabled="$store.state.business.Edit" v-model="ruleForm[index].fwbm"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="CH">
                <span slot="label">
                  层号： <br />
                  <p class="label-detail">（CH）</p>
                </span>
                <el-input :disabled="$store.state.business.Edit" v-model="ruleForm[index].ch"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item prop="ZL">
                <span slot="label">
                  坐落： <br />
                  <p class="label-detail">（ZL）</p>
                </span>
                <el-input :disabled="$store.state.business.Edit" v-model="ruleForm[index].zl"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="MJDW">
                <span slot="label">
                  面积单位： <br />
                  <p class="label-detail">（MJDW）</p>
                </span>
                <el-select :disabled="$store.state.business.Edit" v-model="ruleForm[index].mjdw">
                  <el-option v-for="item in dicData['A7']" :key="item.DCODE" :label="item.DNAME" :value="item.DCODE">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="SJCS">
                <span slot="label">
                  实际层数： <br />
                  <p class="label-detail">（SJCS）</p>
                </span>
                <el-input-number controls-position="right" :disabled="$store.state.business.Edit"
                  v-only-number="{ max: 99999, min: 1, precision: 0 }" v-model="ruleForm[index].sjcs"></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item prop="HH">
                <span slot="label">
                  户号： <br />
                  <p class="label-detail">（HH）</p>
                </span>
                <el-input-number controls-position="right" :disabled="$store.state.business.Edit" v-model="ruleForm[index].hh"
                  v-only-number="{ max: 99999, min: 1, precision: 0 }"></el-input-number>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="SHBW">
                <span slot="label">
                  室号部位： <br />
                  <p class="label-detail">（SHBW）</p>
                </span>
                <el-input :disabled="$store.state.business.Edit" v-model="ruleForm[index].shbw"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="HX">
                <span slot="label">
                  户型： <br />
                  <p class="label-detail">（HX）</p>
                </span>
                <el-select :disabled="$store.state.business.Edit" v-model="ruleForm[index].hx">
                  <el-option v-for="item in dicData['A15']" :key="item.DCODE" :label="item.DNAME" :value="item.DCODE">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item prop="HXJG">
                <span slot="label">
                  户型结构： <br />
                  <p class="label-detail">（HXJG）</p>
                </span>
                <el-select :disabled="$store.state.business.Edit" v-model="ruleForm[index].hxjg">
                  <el-option v-for="item in dicData['A16']" :key="item.DCODE" :label="item.DNAME" :value="item.DCODE">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="FWYT1">
                <span slot="label">
                  房屋用途1： <br />
                  <p class="label-detail">（FWYT1）</p>
                </span>
                <el-select :disabled="$store.state.business.Edit" v-model="ruleForm[index].fwyt1">
                  <el-option v-for="item in dicData['A17']" :key="item.DCODE" :label="item.DNAME" :value="item.DCODE">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="FWYT2">
                <span slot="label">
                  房屋用途2： <br />
                  <p class="label-detail">（FWYT2）</p>
                </span>
                <el-select :disabled="$store.state.business.Edit" v-model="ruleForm[index].fwyt2">
                  <el-option v-for="item in dicData['A17']" :key="item.DCODE" :label="item.DNAME" :value="item.DCODE">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item prop="FWYT3">
                <span slot="label">
                  房屋用途3： <br />
                  <p class="label-detail">（FWYT3）</p>
                </span>
                <el-select :disabled="$store.state.business.Edit" v-model="ruleForm[index].fwyt3">
                  <el-option v-for="item in dicData['A17']" :key="item.DCODE" :label="item.DNAME" :value="item.DCODE">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="YCJZMJ" :rules="{ type: 'number' }">
                <span slot="label">
                  预测建筑面积： <br />
                  <p class="label-detail">（YCJZMJ）</p>
                </span>
                <el-input-number controls-position="right" :disabled="$store.state.business.Edit"
                  v-only-number="{ max: 999999999999999, min: 0, precision: 2 }" title="" type="number"
                  v-model.number="ruleForm[index].ycjzmj"></el-input-number>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="YCTNJZMJ" :rules="{ type: 'number' }">
                <span slot="label">
                  预测套内建筑面积： <br />
                  <p class="label-detail">（YCTNJZMJ）</p>
                </span>
                <el-input-number controls-position="right" :disabled="$store.state.business.Edit"
                  v-only-number="{ max: 999999999999999, min: 0, precision: 2 }" title="" type="number"
                  v-model.number="ruleForm[index].yctnjzmj"></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item prop="YCFTJZMJ" :rules="{ type: 'number' }">
                <span slot="label">
                  预测分摊建筑面积： <br />
                  <p class="label-detail">（YCFTJZMJ）</p>
                </span>
                <el-input :disabled="$store.state.business.Edit"
                  v-only-number="{ max: 999999999999999, min: 0, precision: 2 }" title="" type="number"
                  v-model.number="ruleForm[index].ycftjzmj"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="YCDXBFJZMJ" :rules="{ type: 'number' }">
                <span slot="label">
                  预测地下部分建筑面积： <br />
                  <p class="label-detail">（YCDXBFJZMJ）</p>
                </span>
                <el-input controls-position="right" :disabled="$store.state.business.Edit"
                  v-only-number="{ max: 999999999999999, min: 0, precision: 2 }" title="" type="number"
                  v-model.number="ruleForm[index].ycdxbfjzmj"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="YCQTJZMJ" :rules="{ type: 'number' }">
                <span slot="label">
                  预测其它建筑面积： <br />
                  <p class="label-detail">（YCQTJZMJ）</p>
                </span>
                <el-input-number controls-position="right" :disabled="$store.state.business.Edit"
                  v-only-number="{ max: 999999999999999, min: 0, precision: 2 }" title="" type="number"
                  v-model.number="ruleForm[index].ycqtjzmj"></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 预测分摊系数 -->
          <el-row>
            <el-col :span="8">
              <el-form-item prop="YCFTXS" :rules="{ type: 'number' }">
                <span slot="label">
                  预测分摊系数： <br />
                  <p class="label-detail">（YCFTXS）</p>
                </span>
                <el-input :disabled="$store.state.business.Edit" v-model.number="ruleForm[index].ycftxs" title="" type="number"
                  v-only-number="{ max: 999999999999999, min: 0, precision: 6 }"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="SCJZMJ" :rules="{ type: 'number' }">
                <span slot="label">
                  实测建筑面积： <br />
                  <p class="label-detail">（SCJZMJ）</p>
                </span>
                <el-input :disabled="$store.state.business.Edit"
                  v-only-number="{ max: 999999999999999, min: 0, precision: 3 }" title="" type="number"
                  v-model.number="ruleForm[index].scjzmj"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="SCTNJZMJ" :rules="{ type: 'number' }">
                <span slot="label">
                  实测套内建筑面积： <br />
                  <p class="label-detail">（SCTNJZMJ）</p>
                </span>
                <el-input :disabled="$store.state.business.Edit"
                  v-only-number="{ max: 999999999999999, min: 0, precision: 3 }" title="" type="number"
                  v-model.number="ruleForm[index].sctnjzmj"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 实测分摊建筑面积 -->
          <el-row>
            <el-col :span="8">
              <el-form-item prop="SCFTJZMJ" :rules="{ type: 'number' }">
                <span slot="label">
                  实测分摊建筑面积： <br />
                  <p class="label-detail">（SCFTJZMJ）</p>
                </span>
                <el-input :disabled="$store.state.business.Edit"
                  v-only-number="{ max: 999999999999999, min: 0, precision: 3 }" title="" type="number"
                  v-model.number="ruleForm[index].scftjzmj"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="SCDXBFJZMJ" :rules="{ type: 'number' }">
                <span slot="label">
                  实测地下部分建筑面积： <br />
                  <p class="label-detail">（SCDXBFJZMJ）</p>
                </span>
                <el-input :disabled="$store.state.business.Edit"
                  v-only-number="{ max: 999999999999999, min: 0, precision: 3 }" title="" type="number"
                  v-model.number="ruleForm[index].scdxbfjzmj"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="SCQTJZMJ" :rules="{ type: 'number' }">
                <span slot="label">
                  实测其它建筑面积： <br />
                  <p class="label-detail">（SCQTJZMJ）</p>
                </span>
                <el-input :disabled="$store.state.business.Edit"
                  v-only-number="{ max: 999999999999999, min: 0, precision: 3 }" title="" type="number"
                  v-model.number="ruleForm[index].scqtjzmj"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 实测分摊系数 -->
          <el-row>
            <el-col :span="8">
              <el-form-item prop="SCFTXS" :rules="{ type: 'number' }">
                <span slot="label">
                  实测分摊系数： <br />
                  <p class="label-detail">（SCFTXS）</p>
                </span>
                <el-input :disabled="$store.state.business.Edit" v-model.number="ruleForm[index].scftxs" title="" type="number"
                  v-only-number="{ max: 999999999999999, min: 0, precision: 6 }"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="GYTDMJ" :rules="{ type: 'number' }">
                <span slot="label">
                  共有土地面积： <br />
                  <p class="label-detail">（GYTDMJ）</p>
                </span>
                <el-input :disabled="$store.state.business.Edit"
                  v-only-number="{ max: 999999999999999, min: 0, precision: 3 }" title="" type="number"
                  v-model.number="ruleForm[index].gytdmj"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="FTTDMJ" :rules="{ type: 'number' }">
                <span slot="label">
                  分摊土地面积： <br />
                  <p class="label-detail">（FTTDMJ）</p>
                </span>
                <el-input :disabled="$store.state.business.Edit"
                  v-only-number="{ max: 999999999999999, min: 0, precision: 3 }" title="" type="number"
                  v-model.number="ruleForm[index].fttdmj"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 独用土地面积 -->
          <el-row>
            <el-col :span="8">
              <el-form-item prop="DYTDMJ" :rules="{ type: 'number' }">
                <span slot="label">
                  独用土地面积： <br />
                  <p class="label-detail">（DYTDMJ）</p>
                </span>
                <el-input :disabled="$store.state.business.Edit" v-model.number="ruleForm[index].dytdmj" title="" type="number"
                  v-only-number="{ max: 999999999999999, min: 0, precision: 3 }"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="FWLX">
                <span slot="label">
                  房屋类型： <br />
                  <p class="label-detail">（FWLX）</p>
                </span>
                <el-select :disabled="$store.state.business.Edit" v-model="ruleForm[index].fwlx">
                  <el-option v-for="item in dicData['A18']" :key="item.DCODE" :label="item.DNAME" :value="item.DCODE">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="FWXZ">
                <span slot="label">
                  房屋性质： <br />
                  <p class="label-detail">（FWXZ）</p>
                </span>
                <el-select :disabled="$store.state.business.Edit" v-model="ruleForm[index].fwxz">
                  <el-option v-for="item in dicData['A19']" :key="item.DCODE" :label="item.DNAME" :value="item.DCODE">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 房产分户图 -->
          <el-row>
            <el-col :span="8">
              <el-form-item prop="FCFHT">
                <span slot="label">
                  房产分户图： <br />
                  <p class="label-detail">（FCFHT）</p>
                </span>
                <el-input :disabled="$store.state.business.Edit" v-model="ruleForm[index].fcfht"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="ZT">
                <span slot="label">
                  状态： <br />
                  <p class="label-detail">（ZT）</p>
                </span>
                <el-select :disabled="$store.state.business.Edit" v-model="ruleForm[index].zt">
                  <el-option v-for="item in dicData['A11']" :key="item.DCODE" :label="item.DNAME" :value="item.DCODE">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item prop="QXDM">
                <span slot="label">
                  区县代码： <br />
                  <p class="label-detail">（QXDM）</p>
                </span>
                <el-input :disabled="$store.state.business.Edit" v-model="ruleForm[index].qxdm"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
  // 户信息
  import kttFwH from "@/api/kttFwH";
  import ruleMixin from "@/mixins/ruleMixin.js";
  export default {
    mixins: [ruleMixin],
    props: {
      bsmSjsb: {
        type: String,
        default: ""
      },
      bsmYwsjb: {
        type: String,
        default: ""
      },
    },
    data () {
      return {
        ruleForm: [{
          YSDM: "",
          BDCDYH: "",
          LJZH: "",
          ZRZH: "",
          FWBM: "",
          CH: "",
          ZL: "",
          MJDW: "",
          SJCS: "",
          HH: "",
          SHBW: "",
          HX: "",
          HXJG: "",
          FWYT1: "",
          FWYT2: "",
          FWYT3: "",
          YCJZMJ: "",
          YCTNJZMJ: "",
          YCFTJZMJ: "",
          YCDXBFJZMJ: "",
          YCQTJZMJ: "",
          YCFTXS: "",
          SCJZMJ: "",
          SCTNJZMJ: "",
          SCFTJZMJ: "",
          SCDXBFJZMJ: "",
          SCQTJZMJ: "",
          SCFTXS: "",
          GYTDMJ: "",
          FTTDMJ: "",
          DYTDMJ: "",
          FWLX: "",
          FWXZ: "",
          FCFHT: "",
          ZT: "",
          QXDM: ""
        }]
      }
    },
    methods: {
      /**
       * @description: featchData
       * @author: renchao
       */
      async featchData () {
        try {
          let { result: res } = await kttFwH.getKttFwHById(this.bsmSjsb);
          this.ruleForm = res;
          //this.featchRule()
        } catch (error) {
          this.$refs.msg.messageShow();
        }
      },
      /**
       * @description: handleUpdateForm
       * @author: renchao
       */
      handleUpdateForm () {
        return new Promise(async (resolve, reject) => {
          try {
            let res = await kttFwH.updateKttFwH(this.ruleForm);
            // this.$refs['formList'].resetFields();
            resolve(res.code);
          } catch (error) {
            this.$refs.msg.messageShow();
          }
        });
      },
    },
  };
</script>
<style scoped lang="scss">
  @import "./css/itemForm.scss";

  .households {
    .item-label {
      flex: 0 0 120px;
    }
  }
</style>