<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 }" 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 }" 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 }" 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 }" 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 }" 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" 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 }" 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 }"
                  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;
    }

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

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