<!--
 * @Description: 
 * @Autor: renchao
 * @LastEditTime: 2023-11-16 13:53:36
-->
<template>
  <div class='detail'>
    <el-form :model="ruleForm" ref="ruleForm" label-width="130px">
      <p class="title">不动产情况</p>
      <el-row>
        <el-col :span="12">
          <el-form-item label="坐落:">
            <el-input v-model="ruleForm.zl"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="不动产单元号:">
            <el-input v-model="ruleForm.bdcdyh"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="宗地/宗海面积:">
            <el-input v-model="ruleForm.zdzhmj"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="定着物面积:">
            <el-input v-model="ruleForm.dzwmj"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="宗地/宗海用途:">
            <el-input v-model="ruleForm.zdzhyt"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="定着物用途:">
            <el-input v-model="ruleForm.dzwyt"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="不动产类型:">
            <el-select v-model="ruleForm.bdclx" class="width100" placeholder="请选择">
              <el-option
                v-for="item in bdclxList"
                :key="item.dcode"
                :label="item.dname"
                :value="item.dcode">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="宗地/宗海权利性:">
            <el-select v-model="ruleForm.zdzhqlxz" class="width100" placeholder="请选择">
              <el-option
                v-for="item in qlxzList"
                :key="item.dcode"
                :label="item.dname"
                :value="item.dcode">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="用海类型:">
            <el-input v-model="ruleForm.yhlx"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="构筑物类型:">
            <el-input v-model="ruleForm.gzwlx"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="林种:">
            <el-input v-model="ruleForm.lz"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="原不动产权证书号:">
            <el-input v-model="ruleForm.ybdcqzh"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div v-for="(item,index) in ruleForm.djsqrList" :key="index">
        <p class="title">登记申请人</p>
        <el-row>
          <el-col :span="12">
            <el-form-item label="义务人名称:">
              <el-input v-model="item.ywrmc"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="证件种类:">
              <el-select v-model="ruleForm.zjzl" class="width100" placeholder="请选择">
                <el-option
                  v-for="item in zjzlList"
                  :key="item.dcode"
                  :label="item.dname"
                  :value="item.dcode">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="证件号:">
              <el-input v-model="item.zjh"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="通讯地址:">
              <el-input v-model="item.txdz"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="邮编:">
              <el-input v-model="item.yb"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="共有比例:">
              <el-input v-model="item.gybl"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="法人名称:">
              <el-input v-model="item.frxm"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话:">
              <el-input v-model="item.frlxdh"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="代理人名称:">
              <el-input v-model="item.dlrxm"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话:">
              <el-input v-model="item.dlrlxdh"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="代理机构:">
              <el-input v-model="item.dljg"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话:">
              <el-input v-model="item.dljglxdh"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <p class="title">抵押情况</p>
      <el-row>
        <el-col :span="12">
          <el-form-item label="被担保主债权数额:">
            <el-input v-model="ruleForm.bdbdyje"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="在建建筑物抵押范围:" label-width="150px">
            <el-input v-model="ruleForm.jzgzwdyfw"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="债务履行超始时间:">
            <el-date-picker
              class="width100"
              v-model="ruleForm.starttime"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="债务履行结束时间:" label-width="150px">
            <el-date-picker
              class="width100"
              v-model="ruleForm.endtime"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
  import store from '@/store/index.js'
  export default {
    components: {},
    data () {
      return {
        bdclxList: store.getters.dictData['A27'],
        qlxzList: store.getters.dictData['A9'],
        zjzlList: store.getters.dictData['A9'],
        ruleForm: {
          zl: '',
          bdcdyh: '',
          zdzhmj: '',
          dzwmj: '',
          zdzhyt: '',
          dzwyt: '',
          bdclx: '',
          zdzhqlxz: '',
          djsqrList: [{}]
        }
      }
    },
    methods: {
    }
  }
</script>
<style scoped lang='scss'>
  /deep/.el-form-item {
    margin-bottom: 8px;
  }
  .title {
    padding-left: 10px;
    line-height: 30px;
    border-bottom: 1px solid $borderColor;
    position: relative;
    margin-bottom: 10px;
  }
  .title:after {
    content: " ";
    width: 0;
    height: 16px;
    position: absolute;
    border-left: 3px solid #0f93f6;
    left: 0;
    top: 5px;
  }
</style>