<template>
  <div class="singleBuilding itemForm">
    <el-form :model="ruleForm" :rules="rules" ref="formList" label-width="135px" :key="key">
      <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.ysdm" maxlength="10"
              placeholder="要素代码"></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.bdcdyh" maxlength="28"
              placeholder="不动产单元号"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item prop="YWH">
            <span slot="label">
              业务号: <br />
              <p class="label-detail">(YWH)</p>
            </span>
            <el-input :disabled="$store.state.business.Edit" v-model="ruleForm.ywh" maxlength="20"
              placeholder="业务号"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item prop="QLLX">
            <span slot="label">
              权利类型: <br />
              <p class="label-detail">(QLLX)</p>
            </span>
            <el-select :disabled="$store.state.business.Edit" v-model="ruleForm.qllx" placeholder="权利类型">
              <el-option v-for="item in dicData['A8']" :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="DJLX">
            <span slot="label">
              登记类型: <br />
              <p class="label-detail">(DJLX)</p>
            </span>
            <el-select :disabled="$store.state.business.Edit" v-model="ruleForm.djlx" placeholder="登记类型">
              <el-option v-for="item in dicData['A21']" :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="DJYY">
            <span slot="label">
              登记原因: <br />
              <p class="label-detail">(DJYY)</p>
            </span>
            <el-input :disabled="$store.state.business.Edit" v-model="ruleForm.djyy" placeholder="登记原因"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item prop="FDZL">
            <span slot="label">
              房地坐落: <br />
              <p class="label-detail">(FDZL)</p>
            </span>
            <el-input :disabled="$store.state.business.Edit" v-model="ruleForm.fdzl" placeholder="房地坐落"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item prop="TDSYQR">
            <span slot="label">
              土地使用权人: <br />
              <p class="label-detail">(TDSYQR)</p>
            </span>
            <el-input :disabled="$store.state.business.Edit" v-model="ruleForm.tdsyqr" placeholder="土地使用权人"></el-input>
          </el-form-item>
        </el-col>

        <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-only-number="{ max: 999999999999999, min: 0, precision: 2 }"
              placeholder="独用土地面积" type="number" v-model.number="ruleForm.dytdmj"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 分摊土地面积 -->
      <el-row>
        <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: 2 }"
              placeholder="分摊土地面积" type="number" v-model.number="ruleForm.fttdmj"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item prop="TDSYQSSJ">
            <span slot="label">
              土地使用起始时间: <br />
              <p class="label-detail">(TDSYQSSJ)</p>
            </span>
            <el-date-picker :disabled="$store.state.business.Edit" type="date" placeholder="选择日期" clearable
              v-model="ruleForm.tdsyqssj" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item prop="TDSYJSSJ">
            <span slot="label">
              土地使用结束时间: <br />
              <p class="label-detail">(TDSYJSSJ)</p>
            </span>
            <el-date-picker :disabled="$store.state.business.Edit" type="date" placeholder="选择日期" clearable
              v-model="ruleForm.tdsyjssj" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 房地产交易价格 -->
      <el-row>
        <el-col :span="8">
          <el-form-item prop="FDCJYJG" :rules="{ type: 'number' }">
            <span slot="label">
              房地产交易价格: <br />
              <p class="label-detail">(FDCJYJG)</p>
            </span>
            <el-input :disabled="$store.state.business.Edit" v-model.number="ruleForm.fdcjyjg" placeholder="房地产交易价格"
              type="number" v-only-number="{ max: 999999999999999, min: 0, precision: 4 }"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item prop="GHYT">
            <span slot="label">
              规划用途: <br />
              <p class="label-detail">(GHYT)</p>
            </span>
            <el-select :disabled="$store.state.business.Edit" v-model="ruleForm.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-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.fwxz" placeholder="房屋性质">
              <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="FWJG">
            <span slot="label">
              房屋结构: <br />
              <p class="label-detail">(FWJG)</p>
            </span>
            <el-select :disabled="$store.state.business.Edit" v-model="ruleForm.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="SZC">
            <span slot="label">
              所在层: <br />
              <p class="label-detail">(SZC)</p>
            </span>
            <el-input :disabled="$store.state.business.Edit" placeholder="所在层" v-model="ruleForm.szc"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item prop="ZCS" :rules="{ type: 'number' }">
            <span slot="label">
              总层数: <br />
              <p class="label-detail">(ZCS)</p>
            </span>
            <el-input :disabled="$store.state.business.Edit" v-model.number="ruleForm.zcs" type="number"
              v-only-number="{ max: 9999, min: 0, precision: 0 }" placeholder="总层数"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 建筑面积 -->
      <el-row>
        <el-col :span="8">
          <el-form-item prop="JZMJ" :rules="{ type: 'number' }">
            <span slot="label">
              建筑面积: <br />
              <p class="label-detail">(JZMJ)</p>
            </span>
            <el-input :disabled="$store.state.business.Edit" v-only-number="{ max: 999999999999999, min: 0, precision: 2 }"
              placeholder="建筑面积" type="number" v-model.number="ruleForm.jzmj"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item prop="ZYJZMJ" :rules="{ type: 'number' }">
            <span slot="label">
              专有建筑面积: <br />
              <p class="label-detail">(ZYJZMJ)</p>
            </span>
            <el-input :disabled="$store.state.business.Edit" v-only-number="{ max: 999999999999999, min: 0, precision: 2 }"
              placeholder="专有建筑面积" type="number" v-model.number="ruleForm.zyjzmj"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item prop="FTJZMJ" :rules="{ type: 'number' }">
            <span slot="label">
              分摊建筑面积: <br />
              <p class="label-detail">(FTJZMJ)</p>
            </span>
            <el-input :disabled="$store.state.business.Edit" v-only-number="{ max: 999999999999999, min: 0, precision: 2 }"
              placeholder="分摊建筑面积" type="number" v-model.number="ruleForm.ftjzmj"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 竣工时间 -->
      <el-row>
        <el-col :span="8">
          <el-form-item prop="JGSJ">
            <span slot="label">
              竣工时间: <br />
              <p class="label-detail">(JGSJ)</p>
            </span>
            <el-date-picker :disabled="$store.state.business.Edit" type="date" placeholder="选择日期" clearable
              v-model="ruleForm.jgsj" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item prop="BDCQZH">
            <span slot="label">
              不动产权证号: <br />
              <p class="label-detail">(BDCQZH)</p>
            </span>
            <el-input :disabled="$store.state.business.Edit" v-model="ruleForm.bdcqzh" placeholder="不动产权证号"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item prop="DBR">
            <span slot="label">
              登簿人: <br />
              <p class="label-detail">(DBR)</p>
            </span>
            <el-input :disabled="$store.state.business.Edit" v-model="ruleForm.dbr" placeholder="登簿人"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 登记时间 -->
      <el-row>
        <el-col :span="8">
          <el-form-item prop="DJSJ">
            <span slot="label">
              登记时间: <br />
              <p class="label-detail">(DJSJ)</p>
            </span>
            <el-date-picker :disabled="$store.state.business.Edit" type="date" placeholder="选择日期" clearable
              v-model="ruleForm.DJSJ" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item prop="FJ">
            <span slot="label">
              附记: <br />
              <p class="label-detail">(FJ)</p>
            </span>
            <el-input :disabled="$store.state.business.Edit" v-model="ruleForm.fj" placeholder="附记"></el-input>
          </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.qxdm" placeholder="区县代码"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item prop="DJJG">
            <span slot="label">
              登记机构: <br />
              <p class="label-detail">(DJJG)</p>
            </span>
            <el-input :disabled="$store.state.business.Edit" v-model="ruleForm.djjg" placeholder="登记机构"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item prop="QSZT">
            <span slot="label">
              权属状态: <br />
              <p class="label-detail">(QSZT)</p>
            </span>
            <el-select :disabled="$store.state.business.Edit" v-model="ruleForm.qszt" placeholder="权属状态">
              <el-option v-for="item in dicData['A22']" :key="item.DCODE" :label="item.DNAME" :value="item.DCODE">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

      </el-row>
    </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 {
      ruleForm: {
        YSDM: '',
        BDCDYH: '',
        YWH: '',
        QLLX: '',
        DJLX: '',
        DJYY: '',
        FDZL: '',
        TDSYQR: '',
        DYTDMJ: '',
        FTTDMJ: '',
        TDSYQSSJ: '',
        TDSYJSSJ: '',
        FDCJYJG: '',
        GHYT: '',
        FWXZ: '',
        FWJG: '',
        SZC: '',
        ZCS: '',
        JZMJ: '',
        ZYJZMJ: '',
        FTJZMJ: '',
        JGSJ: '',
        BDCQZH: '',
        DBR: '',
        DJSJ: '',
        FJ: '',
        QXDM: '',
        DJJG: '',
        QSZT: ''
      }
    }
  },
  methods: {
    async featchData () {
      try {
        let { result: res } = await business.getQltFwFdcqYzById(this.bsmSjsb)
        this.ruleForm = res
        //this.featchRule()
      } catch (error) {
        this.$refs.msg.messageShow()
      }
    },
    handleUpdateForm () {
      return new Promise(async (resolve) => {
        try {
          let res = await business.updateQltFwFdcqYz(this.ruleForm)
          // this.$refs['formList'].resetFields();
          resolve(res.code)
        } catch (error) {
          this.$refs.msg.messageShow()
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
@import "./css/itemForm.scss";
</style>