<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
              disabled
              v-model="ruleForm.ywh"
              class="width300px"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="受理人员：" prop="slry">
            <el-input
              disabled
              v-model="ruleForm.slry"
              class="width300px"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="受理时间：" prop="slsj">
            <el-input
              disabled
              v-model="ruleForm.slsj"
              class="width300px"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="权利类型：" prop="qllx">
            <el-select
              disabled
              v-model="ruleForm.qllx"
              class="width300px"
              filterable
              clearable
              placeholder="请选择权利类型"
            >
              <el-option
                v-for="item in dictData['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 label="登记类型：" prop="djlx">
            <el-select
              disabled
              v-model="ruleForm.djlx"
              class="width300px"
              filterable
              clearable
              placeholder="请选择登记类型"
            >
              <el-option
                v-for="item in dictData['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 label="登记情形：" prop="djqx">
            <el-input
              disabled
              class="width300px"
              v-model="ruleForm.djqxmc"
            ></el-input>
          </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
              disabled
              v-model="ruleForm.zddm"
              class="width300px"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="不动产单元号：" prop="bdcdyh">
            <el-input
              disabled
              v-model="ruleForm.bdcdyh"
              class="width300px"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="权利性质：" prop="qlxz">
            <el-select
              disabled
              v-model="ruleForm.qlxz"
              filterable
              class="width300px"
              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
              disabled
              v-model="ruleForm.zdmj"
              class="width300px"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="土地用途：" prop="tdyt">
            <el-input
              disabled
              v-model="ruleForm.tdyt"
              class="width300px"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="权利设定方式：" prop="qlsdfs">
            <el-select
              disabled
              v-model="ruleForm.qlsdfs"
              filterable
              class="width300px"
              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-row>
      <el-row :gutter="10">
        <el-col :span="8">
          <el-form-item label="取得价格：" prop="qdjg">
            <el-input
              disabled
              v-model="ruleForm.qdjg"
              class="width300px"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="16">
          <el-form-item label="坐落：" prop="zl">
            <el-input
              disabled
              class="width300px"
              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="tdsyqx">
            <el-input
              disabled
              v-model="ruleForm.tdsyqx"
              class="width300px"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="16">
          <el-form-item label="使用权起止时间：" prop="qssj">
            <el-input
              disabled
              v-model="ruleForm.syqqzsj"
              class="width300px"
            ></el-input>
          </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 disabled 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";
import { Init } from "@/api/fqsq.js";
import { mapGetters } from "vuex";
export default {
  /**注册组件*/
  components: { InformationTable },
  props: {
    flag: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    ...mapGetters(["dictData"]),
  },
  data() {
    return {
      disabled: true,
      flagTop: this.flag ? "top" : "",
      qlxzOption: [],
      tdytOption: [],
      qlsdfsOption: [],
      ruleForm: {
        ywh: "",
        slry: "",
        slsj: "",
        qllx: "",
        djlx: "",
        djqx: "",
        zddm: "",
        bdcdyh: "",
        qlxz: "",
        zdmj: "",
        zl: "",
        tdyt: "",
        qlsdfs: "",
        qdjg: "",
        tdsyqx: "",
        syqqzsj: "",
        fj: "",
        djyy: "",
        gyfs: "",
      },
      rules: {
        // ywh: [
        //   { required: true, message: '业务号', trigger: 'blur' }
        // ],
      },
    };
  },
  methods: {
    list(bsmSldy) {
      var formdata = new FormData();
      //可以通过append()方法来追加数据
      formdata.append("bsmSldy", bsmSldy);
      Init(formdata).then((res) => {
        if (res.code === 200) {
          console.log(res, 1111);
          this.ruleForm = res.result;
          this.ruleForm.zddm = res.result.zdjbxxdatas.zddm;
          this.ruleForm.zdmj = res.result.zdjbxxdatas.zdmj;
          this.ruleForm.zl = res.result.qlxxdatas.zl;
          this.ruleForm.tdyt = res.result.qlxxdatas.ytmc;
          this.ruleForm.qlsdfs = res.result.zdjbxxdatas.qlsdfsmc;
          this.ruleForm.qdjg = res.result.jsydsyqdatas.qdjg;
          this.ruleForm.fj = res.result.jsydsyqdatas.fj;
          this.ruleForm.syqqzsj = res.result.jsydsyqdatas.syqqzsj;
          this.ruleForm.tdsyqx = res.result.jsydsyqdatas.tdsyqx;
        }
      });
    },
    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>