<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">自然幢{{ 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>
                <p :class="{ 'disabled': $store.state.business.Edit }">
                  {{ naturalForm.naturalList[index].bsm }}
                </p>
              </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"
                  placeholder="要素代码"></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"
                  placeholder="不动产单元号"></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"
                  placeholder="宗地代码"></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"
                  placeholder="自然幢号"></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"
                  placeholder="项目名称"></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"
                  placeholder="建筑物名称"></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" placeholder="竣工日期" 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 }" placeholder="建筑物高度" 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 :disabled="$store.state.business.Edit"
                  v-only-number="{ max: 999999999999999, min: 0, precision: 3 }" placeholder="幢占地面积" type="number"
                  v-model.number="naturalForm.naturalList[index].ZZDMJ"></el-input>
              </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 }" placeholder="幢用地面积" 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 }" placeholder="预测建筑面积" 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 }" placeholder="实测建筑面积" 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" placeholder="总层数" 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 }"
                  placeholder="地上层数" 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 }"
                  placeholder="地下层数" 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 }" placeholder="地下深度" 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"
                  placeholder="规划用途">
                  <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"
                  placeholder="房屋结构">
                  <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 }"
                  placeholder="总套数" 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"
                  placeholder="建筑物基本用途"></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"
                  placeholder="档案号"></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"
                  placeholder="备注"></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"
                  placeholder="状态">
                  <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"
                  placeholder="区县代码"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-form>
    <message-tips ref="msg" />
  </div>
</template>
<script>
// 自然幢
import business from '@/api/business'
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 business.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 business.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>