<template>
  <div class='slxx'>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-position="flagTop" :inline="flag"
      label-width="140px">
      <div class="slxx_title">受理信息</div>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="业务号：" prop="ywh">
            <el-input v-model="ruleForm.ywh"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="受理人员：" prop="slry">
            <el-input v-model="ruleForm.slry"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="使用权结束时间：" prop="slsj">
            <el-date-picker v-model="ruleForm.slsj" type="datetime" placeholder="选择结束时间" value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="权利类型：" prop="qllx">
            <el-select 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 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 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 :gutter="10">
        <el-col :span="8">
          <el-form-item label="宗地代码：" prop="zddm">
            <el-input v-model="ruleForm.zddm"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="不动产单元号：" prop="bdcdyh">
            <el-input v-model="ruleForm.bdcdyh"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="权利性质：" prop="qlxz">
            <el-select 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 :gutter="10">
        <el-col :span="8">
          <el-form-item label="宗地面积：" prop="zdmj">
            <el-input v-model="ruleForm.zdmj"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="坐落：" prop="zl">
            <el-input style="width: 100%" v-model="ruleForm.zl"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="土地用途：" prop="tdyt">
            <el-select 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 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 v-model="ruleForm.qdjg"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="使用权起始时间：" prop="syqqssj">
            <el-date-picker 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 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 v-model="ruleForm.syqx" type="datetime" placeholder="选择使用期限" value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <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 :gutter="10">
        <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 :gutter="10">
        <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 },
  props: {
    flag: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      flag: this.flag,
      flagTop: this.flag ? 'top' : '',
      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 {
  padding-left: 15px;
}

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

.Inputclass {
  width: 100%;
}

/deep/.el-select,
/deep/.el-date-editor {
  width: 100%;
}

/deep/.el-form-item__label {
  padding-bottom: 0px;
}
</style>