<template>
  <div class='slxx'>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px">
      <div class="slxx_title">受理信息</div>
      <el-row>
        <el-col :span="8">
          <el-form-item label="业务号：" prop="ywh">
            <el-input class="width200px" v-model="ruleForm.ywh"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="受理人员：" prop="slry">
            <el-input class="width200px" v-model="ruleForm.slry"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="使用权结束时间：" prop="slsj">
            <el-date-picker class="width200px" v-model="ruleForm.slsj" type="datetime" placeholder="选择结束时间"
            value-format="yyyy-MM-dd" >
          </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="权利类型：" prop="qllx">
            <el-select class="width200px" v-model="ruleForm.qllx" filterable clearable placeholder="请选择权利类型">
              <el-option v-for="item in qllxOption" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="登记类型：" prop="djlx">
            <el-select class="width200px" v-model="ruleForm.djlx" filterable clearable placeholder="请选择登记类型">
              <el-option v-for="item in djlxOption" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="登记情形：" prop="djqx">
            <el-select class="width200px" v-model="ruleForm.djqx" filterable clearable placeholder="请选择登记情形">
              <el-option v-for="item in djqxOption" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="slxx_title">不动产单元情况</div>
      <el-row>
        <el-col :span="8">
          <el-form-item label="宗地代码：" prop="zddm">
            <el-input class="width200px" v-model="ruleForm.zddm"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="不动产单元号：" prop="bdcdyh">
            <el-input class="width200px" v-model="ruleForm.bdcdyh"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="权利性质：" prop="qlxz">
            <el-select class="width200px" v-model="ruleForm.qlxz" filterable clearable placeholder="请选择登记情形">
              <el-option v-for="item in qlxzOption" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="宗地面积：" prop="zdmj">
            <el-input class="width200px" v-model="ruleForm.zdmj"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="坐落：" prop="zl">
            <el-input  v-model="ruleForm.zl"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="土地用途：" prop="tdyt">
            <el-select class="width200px" v-model="ruleForm.tdyt" filterable clearable placeholder="请选择登记情形">
              <el-option v-for="item in tdytOption" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="权利设定方式：" prop="qlsdfs">
            <el-select class="width200px" v-model="ruleForm.qlsdfs" filterable clearable placeholder="请选择登记情形">
              <el-option v-for="item in qlsdfsOption" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="取得价格：" prop="qdjg">
            <el-input class="width200px" v-model="ruleForm.qdjg"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="使用权起始时间：" prop="syqqssj">
            <el-date-picker class="width200px" v-model="ruleForm.syqqssj" type="datetime" placeholder="选择起始时间"
            value-format="yyyy-MM-dd" >
          </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="使用权结束时间：" prop="syqjssj">
            <el-date-picker class="width200px" v-model="ruleForm.syqjssj" type="datetime" placeholder="选择结束时间"
            value-format="yyyy-MM-dd" >
          </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="使用期限：" prop="syqx">
            <el-date-picker class="width200px" v-model="ruleForm.syqx" type="datetime" placeholder="选择使用期限"
            value-format="yyyy-MM-dd" >
          </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="附记：" prop="fj">
            <el-input  type="textarea" v-model="ruleForm.fj"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="slxx_title">权利人信息</div>
      <el-row>
        <el-col>
          <el-form-item label="共有方式：">
            <el-radio-group v-model="ruleForm.gyfs">
              <el-radio label="单独所有"></el-radio>
              <el-radio label="共同共有"></el-radio>
              <el-radio label="按份所有"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col>
           <InformationTable   />
        </el-col>
      </el-row>
      <div class="slxx_title">登记原因</div>
      <el-row>
        <el-col>
          <el-form-item label="登记原因：" prop="djyy">
            <el-input class="textArea" type="textarea" v-model="ruleForm.djyy"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item class="btn">
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import InformationTable from './InformationTable'
export default {
  /**注册组件*/
  components: {InformationTable},
  data () {
    return {
      qllxOption:[],
      djlxOption:[],
      djqxOption:[],
      qlxzOption:[],
      tdytOption:[],
      qlsdfsOption:[],
      ruleForm: {
        ywh: '',
        slry:"",
        slsj:"",
        qllx:"",
        djlx:"",
        djqx:"",
        zddm:"",
        bdcdyh:"",
        qlxz:"",
        zdmj:"",
        zl:"",
        tdyt:"",
        qlsdfs:"",
        qdjg:"",
        syqqssj:"",
        syqjssj:"",
        syqx:"",
        fj:"",
        djyy:"",
        gyfs:"",
      },
      rules: {
        // ywh: [
        //   { required: true, message: '业务号', trigger: 'blur' }
        // ],
      }
    };
  },

  methods: {
    onSubmit(){},
  },
}
</script>
<style scoped lang='scss'>
  @import "~@/styles/public.scss";
.slxx_title {
    border-bottom: 1px solid $borderColor;
    padding-left: 10px;
    padding-bottom: 20px;
    margin-bottom: 15px;
    margin-top: 30px;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #4A4A4A;

}
.btn{
  text-align: center;
}
.textArea{
  /deep/.el-textarea__inner{
    min-height: 90px!important;
  }
}
</style>