<!--
 * @Description  :自然幢
 * @Autor        : miaofang
 * @LastEditTime : 2023-05-17 13:45:26
-->
<template>
  <div class="naturalBuilding itemForm">
    <el-form :model="naturalForm" :rules="rules" ref="formList" label-width="115px" :key="key">
      <div v-for="(item, index) in naturalForm.naturalList" :key="index" class="naturalBuilding-item">
        <p class="naturalBuilding-name obligee-item-name">自然幢{{ index + 1 }}</p>
        <div class="naturalBuilding-list">
          <el-row>
            <el-col :span="8">
              <el-form-item>
                <span slot="label">
                  标识码： <br />
                  <p class="label-detail">（BSM）</p>
                </span>
                <el-input :disabled="$store.state.business.Edit" v-model="naturalForm.naturalList[index].bsm">
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item :prop="'naturalList.' + index + '.YSDM'" :rules="rules.YSDM">
                <span slot="label">
                  要素代码： <br />
                  <p class="label-detail">（YSDM）</p>
                </span>
                <el-input :disabled="$store.state.business.Edit" v-model="naturalForm.naturalList[index].ysdm">
                </el-input>
              </el-form-item>
            </el-col>

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

          <el-row>
            <el-col :span="8">
              <el-form-item :prop="'naturalList.' + index + '.ZDDM'" :rules="rules.ZDDM">
                <span slot="label">
                  宗地代码： <br />
                  <p class="label-detail">（ZDDM）</p>
                </span>
                <el-input :disabled="$store.state.business.Edit" v-model="naturalForm.naturalList[index].zddm">
                </el-input>
              </el-form-item>
            </el-col>

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

            <el-col :span="8">
              <el-form-item :prop="'naturalList.' + index + '.XMMC'" :rules="rules.XMMC">
                <span slot="label">
                  项目名称： <br />
                  <p class="label-detail">（XMMC）</p>
                </span>
                <el-input :disabled="$store.state.business.Edit" v-model="naturalForm.naturalList[index].xmmc">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item :prop="'naturalList.' + index + '.JZWMC'" :rules="rules.JZWMC">
                <span slot="label">
                  建筑物名称： <br />
                  <p class="label-detail">（JZWMC）</p>
                </span>
                <el-input :disabled="$store.state.business.Edit" v-model="naturalForm.naturalList[index].jzwmc">
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item :prop="'naturalList.' + index + '.JGRQ'" :rules="rules.JGRQ">
                <span slot="label">
                  竣工日期： <br />
                  <p class="label-detail">（JGRQ）</p>
                </span>
                <el-date-picker :disabled="$store.state.business.Edit" type="date" clearable
                  v-model="naturalForm.naturalList[index].jgrq" value-format="yyyy-MM-dd"></el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item :prop="'naturalList.' + index + '.JZWGD'" :rules="{ ...rules.JZWGD, ...typeNum }">
                <span slot="label">
                  建筑物高度： <br />
                  <p class="label-detail">（JZWGD）</p>
                </span>
                <el-input :disabled="$store.state.business.Edit"
                  v-only-number="{ max: 999999999999999, min: 0, precision: 2 }" title="" type="number"
                  v-model.number="naturalForm.naturalList[index].jzwgd"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item :prop="'naturalList.' + index + '.ZZDMJ'" :rules="{ ...rules.ZZDMJ, ...typeNum }">
                <span slot="label">
                  幢占地面积： <br />
                  <p class="label-detail">（ZZDMJ）</p>
                </span>
                <el-input-number controls-position="right" :disabled="$store.state.business.Edit"
                  v-only-number="{ max: 999999999999999, min: 0, precision: 3 }" title="" type="number"
                  v-model.number="naturalForm.naturalList[index].zzdmj"></el-input-number>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item :prop="'naturalList.' + index + '.ZYDMJ'" :rules="{ ...rules.ZYDMJ, ...typeNum }">
                <span slot="label">
                  幢用地面积： <br />
                  <p class="label-detail">（ZYDMJ）</p>
                </span>
                <el-input :disabled="$store.state.business.Edit"
                  v-only-number="{ max: 999999999999999, min: 0, precision: 3 }" title="" type="number"
                  v-model.number="naturalForm.naturalList[index].zydmj"></el-input>
              </el-form-item>
            </el-col>

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

          <el-row>
            <el-col :span="8">
              <el-form-item :prop="'naturalList.' + index + '.SCJZMJ'" :rules="{ ...rules.SCJZMJ, ...typeNum }">
                <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="naturalForm.naturalList[index].scjzmj"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item :prop="'naturalList.' + index + '.ZCS'" :rules="{ ...rules.ZCS, ...typeNum }">
                <span slot="label">
                  总层数： <br />
                  <p class="label-detail">（ZCS）</p>
                </span>
                <el-input :disabled="$store.state.business.Edit" title="" type="number"
                  v-only-number="{ max: 9999, min: 0, precision: 3 }"
                  v-model.number="naturalForm.naturalList[index].zcs"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item :prop="'naturalList.' + index + '.DSCS'" :rules="rules.DSCS">
                <span slot="label">
                  地上层数： <br />
                  <p class="label-detail">（DSCS）</p>
                </span>
                <el-input :disabled="$store.state.business.Edit" v-only-number="{ max: 999, min: 0, precision: 0 }"
                  v-model="naturalForm.naturalList[index].dscs"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item :prop="'naturalList.' + index + '.DXCS'" :rules="rules.DXCS">
                <span slot="label">
                  地下层数： <br />
                  <p class="label-detail">（DXCS）</p>
                </span>
                <el-input :disabled="$store.state.business.Edit" v-only-number="{ max: 9, min: 0, precision: 0 }"
                  v-model="naturalForm.naturalList[index].dxcs"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item :prop="'naturalList.' + index + '.DXSD'" :rules="{ ...rules.DXSD, ...typeNum }">
                <span slot="label">
                  地下深度： <br />
                  <p class="label-detail">（DXSD）</p>
                </span>
                <el-input :disabled="$store.state.business.Edit"
                  v-only-number="{ max: 999999999999999, min: 0, precision: 2 }" title="" type="number"
                  v-model.number="naturalForm.naturalList[index].dxsd"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item :prop="'naturalList.' + index + '.GHYT'" :rules="rules.GHYT">
                <span slot="label">
                  规划用途： <br />
                  <p class="label-detail">（GHYT）</p>
                </span>
                <el-select :disabled="$store.state.business.Edit" v-model="naturalForm.naturalList[index].ghyt">
                  <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="'naturalList.' + index + '.FWJG'" :rules="rules.FWJG">
                <span slot="label">
                  房屋结构： <br />
                  <p class="label-detail">（FWJG）</p>
                </span>
                <el-select :disabled="$store.state.business.Edit" v-model="naturalForm.naturalList[index].fwjg">
                  <el-option v-for="item in dicData['A46']" :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="'naturalList.' + index + '.ZTS'" :rules="{ ...rules.ZTS, ...typeNum }">
                <span slot="label">
                  总套数： <br />
                  <p class="label-detail">（ZTS）</p>
                </span>
                <el-input :disabled="$store.state.business.Edit" v-only-number="{ max: 999999, min: 0, precision: 0 }"
                  title="" type="number" v-model.number="naturalForm.naturalList[index].zts"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item :prop="'naturalList.' + index + '.JZWJBYT'" :rules="rules.JZWJBYT">
                <span slot="label">
                  建筑物基本用途： <br />
                  <p class="label-detail">（JZWJBYT）</p>
                </span>
                <el-input :disabled="$store.state.business.Edit" v-model="naturalForm.naturalList[index].jzwjbyt">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-form-item :prop="'naturalList.' + index + '.DAH'" :rules="rules.DAH">
                <span slot="label">
                  档案号： <br />
                  <p class="label-detail">（DAH）</p>
                </span>
                <el-input :disabled="$store.state.business.Edit" v-model="naturalForm.naturalList[index].dah">
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item :prop="'naturalList.' + index + '.BZ'" :rules="rules.BZ">
                <span slot="label">
                  备注： <br />
                  <p class="label-detail">（BZ）</p>
                </span>
                <el-input :disabled="$store.state.business.Edit" v-model="naturalForm.naturalList[index].bz"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item :prop="'naturalList.' + index + '.ZT'" :rules="rules.ZT">
                <span slot="label">
                  状态： <br />
                  <p class="label-detail">（ZT）</p>
                </span>
                <el-select :disabled="$store.state.business.Edit" v-model="naturalForm.naturalList[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-row>

          <el-row>
            <el-col :span="8">
              <el-form-item :prop="'naturalList.' + index + '.QXDM'" :rules="rules.QXDM">
                <span slot="label">
                  区县代码： <br />
                  <p class="label-detail">（QXDM）</p>
                </span>
                <el-input :disabled="$store.state.business.Edit" v-model="naturalForm.naturalList[index].qxdm">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-form>
    <message-tips ref="msg" />
  </div>
</template>
<script>
  // 自然幢
  import kttFwZrz from "@/api/kttFwZrz";
  import ruleMixin from "@/mixins/ruleMixin.js";
  export default {
    mixins: [ruleMixin],
    props: {
      bsmSjsb: {
        type: String,
        default: "",
      },
      bsmYwsjb: {
        type: String,
        default: "",
      },
    },
    data () {
      return {
        naturalForm: {
          naturalList: [
            {
              BSM: "",
              YSDM: "",
              BDCDYH: "",
              ZDDM: "",
              ZRZH: "",
              XMMC: "",
              JZWMC: "",
              JGRQ: "",
              JZWGD: "",
              ZZDMJ: "",
              ZYDMJ: "",
              YCJZMJ: "",
              SCJZMJ: "",
              ZCS: "",
              DSCS: "",
              DXCS: "",
              DXSD: "",
              GHYT: "",
              FWJG: "",
              ZTS: "",
              JZWJBYT: "",
              DAH: "",
              BZ: "",
              ZT: "",
              QXDM: "",
            },
          ],
        },
      };
    },
    methods: {
      async featchData () {
        try {
          let { result: res } = await kttFwZrz.getKttFwZrzById(this.bsmSjsb);
          this.naturalForm.naturalList = res;
          //this.featchRule()
        } catch (error) {
          this.$refs.msg.messageShow();
        }
      },
      handleUpdateForm () {
        return new Promise(async (resolve) => {
          try {
            let res = await kttFwZrz.updateKttFwZrz(this.naturalForm.naturalList);
            // this.$refs['formList'].resetFields();
            resolve(res.code);
          } catch (error) {
            this.$refs.msg.messageShow();
          }
        });
      },
    },
  };
</script>
<style scoped lang="scss">
  @import "./css/itemForm.scss";

  .naturalBuilding {
    .naturalBuilding-item {
      display: flex;
      height: 100%;
      margin-bottom: 15px;
      margin-right: 5px;

      .naturalBuilding-name {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        padding: 10px 20px;
        line-height: 28px;
        border: 1px solid #ccc;
        margin-right: 15px;
        border-radius: 3px;
        margin-left: 10px;
      }

      .naturalBuilding-list {
        width: 100%;
        flex: 1;
      }
    }

    .bsm {
      white-space: nowrap;
    }
  }
</style>