<template>
  <div style="height: 600px;overflow-y: scroll;">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="不动产单元申请书" name="1"></el-tab-pane>
      <el-tab-pane label="附件" v-if="formData.isAdd==2" name="2"></el-tab-pane>
    </el-tabs>
    <el-form ref="ruleForm" :model="ruleForm" label-width="100px" style="height:90%" v-if="activeName==1" :rules="rules">
      <div v-for="item in sqrList">
        <div class="slxx_title title-block">
          申请人信息
          <div class="triangle"></div>
        </div>
        <el-row>
          <el-col :span="8">
            <el-form-item label="权利人名称:" prop="mc">
              <el-input v-model="item.mc"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="证件种类:" prop="zjzl">
              <el-input v-model.number="item.zjzl"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="证件号:" prop="zjh">
              <el-input v-model.number="item.zjh"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="通讯地址:" prop="txdz">
              <el-input v-model="item.txdz"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮编:" prop="yb">
              <el-input v-model.number="item.yb"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="共有比例:" prop="gyqk">
              <el-input v-model.number="item.gyqk"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="法人名称:" prop="frmc">
              <el-input v-model="ruleForm.frmc"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话:" prop="frdh">
              <el-input v-model.number="ruleForm.frdh"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="代理人名称:" prop="dlrmc">
              <el-input v-model.number="ruleForm.dlrmc"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话:" prop="dlrdh">
              <el-input v-model.number="ruleForm.dlrdh"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="代理机构:" prop="dljg">
              <el-input v-model="ruleForm.dljg"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <div>
        <div class="slxx_title title-block">
          不动产情况
          <div class="triangle"></div>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="坐落:" prop="zl">
              <el-input v-model="bdcqk.zl"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="不动产单元号:" prop="bdcdyh">
              <el-input v-model.number="bdcqk.bdcdyh"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="宗地/宗海面积:" prop="zdzhmj">
              <el-input v-model="bdcqk.zdzhmj"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="定着物面积:" prop="dzwmj">
              <el-input v-model.number="bdcqk.dzwmj"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="宗地/宗海用途:" prop="zdzhyt">
              <el-input v-model.number="bdcqk.zdzhyt"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="定着物用途:" prop="dzwyt">
              <el-input v-model.number="bdcqk.dzwyt"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="不动产类型:" prop="bdclx">
              <el-input v-model="bdcqk.bdclx"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="宗地/宗海权力类型:" prop="zdzhqllx">
              <el-input v-model="bdcqk.zdzhqllx"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="用海类型:" prop="yhlx">
              <el-input v-model="bdcqk.yhlx"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="构筑物类型:" prop="gzwlx">
              <el-input v-model.number="bdcqk.gzwlx"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="林种:" prop="lz">
              <el-input v-model.number="bdcqk.lz"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="原不动产单元号:" prop="ybdcdyh">
              <el-input v-model.number="bdcqk.ybdcdyh"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <div>
        <div class="slxx_title title-block">
          抵押情况
          <div class="triangle"></div>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="被担保主债权数额:" prop="bdbzzqse">
              <el-input v-model="bdcqk.bdbzzqse"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="在建建筑物抵押范围:" prop="zjjzwdyfw">
              <el-input v-model.number="bdcqk.zjjzwdyfw"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="债务履行起始时间:" prop="zwlxqssj">
              <el-input v-model="bdcqk.zwlxqssj"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="债务履行结束时间:" prop="zwlxjssj">
              <el-input v-model="bdcqk.zwlxjssj"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <el-form-item style="text-align:center">
<!--        <el-button type="primary" @click="closeDialog">关闭</el-button>-->
<!--        <el-button type="primary" @click="submitForm">保存</el-button>-->
      </el-form-item>
    </el-form>
    <clxx v-if="activeName==2" :formData="formData" />
  </div>
</template>

<script>
  import store from '@/store/index.js'
  import { getSqr, getBdcqk } from "@/api/ycsl.js"
  import clxx from './clxx/index.vue'
  export default {
    props: {
      formData: {
        type: Object,
        default: () => { },
      },
    },
    components: {
      clxx
    },
    data () {
      return {
        zjzlList: store.getters.dictData['A30'],
        activeName: "1",
        DJJGLIST: store.getters.dictData['ywly'],
        readOnly: false,
        sqrList:[{}],
        bdcqk: {},
        //表单提交数据
        ruleForm: {},
        //表格数据
        tableForm: [
          {
            name: '不动产权证书',
            ksysxlh: '',
            jsysxlh: '',
            bs: 0,
            zslx: 1
          },
          {
            name: '不动产登记证明',
            ksysxlh: '',
            jsysxlh: '',
            bs: 0,
            zslx: 2
          }
        ],
        rules: {
        }
      }
    },
    mounted () {
      console.log(this.formData, "ffffffffffffff")
      if (this.formData.ywh) {
        this.getSqr(this.formData.ywh)
        this.getBdcqk(this.formData.ywh)
      }
      let list = Object.keys(this.formData).length
      if (list > 0) {
        this.ruleForm = this.formData
      }
    },
    methods: {
      handleClick () { },
      /**
       * @description: 表单提交
       * @author:
       */
      submitForm () {
        let that = this
        this.tableForm.forEach((item, index) => {
          if (item.bs < 0) {
            return;
          }
        })
        if (this.formData.isAdd != 1) {
          store.dispatch("user/refreshPage", false);
          update(this.ruleForm).then(res => {
            if (res.code == 200) {
              this.$message.success('保存成功')
              this.$emit("input", false);
              this.$refs['ruleForm'].resetFields();
              this.resetTableFields();
              this.closeDialog();
              //刷新列表
              store.dispatch("user/refreshPage", true);
            } else {
              this.$message.error(res.message);
            }
          })
        } else {
          that.$refs['ruleForm'].validate((valid) => {
            if (valid) {
              store.dispatch("user/refreshPage", false);
              addQy(this.ruleForm).then(res => {
                if (res.code == 200) {
                  that.$message.success('保存成功')
                  that.$emit("input", false);
                  that.$refs['ruleForm'].resetFields();
                  that.resetTableFields();
                  that.closeDialog();
                  //刷新列表
                  store.dispatch("user/refreshPage", true);
                } else {
                  that.$message.error(res.message);
                }
              })
            } else {
              this.$message.error('请完善表单');
              return false;
            }
          })
        }
      },
      /**
       * @description: 获取详情信息
       * @author:
       * @param ywh
       */
      getSqr (ywh) {
        getSqr(ywh ).then(res => {
          if (res.code == 200) {
            this.sqrList = res.result;
          }
        })
      },
      /**
       * @description: 获取详情信息
       * @author:
       * @param ywh
       */
      getBdcqk (ywh) {
        getBdcqk(ywh ).then(res => {
          if (res.code == 200) {
            this.bdcqk = res.result;
          }
        })
      },
      /**
       * @description: resetTableFields
       * @author:
       */
      resetTableFields () {
        this.tableForm = [
          {
            name: '不动产权证书',
            ksysxlh: '',
            jsysxlh: '',
            bs: 0,
            zslx: 1
          },
          {
            name: '不动产权登记证明',
            ksysxlh: '',
            jsysxlh: '',
            bs: 0,
            zslx: 2
          }
        ]
      },
      /**
       * @description: closeDialog
       * @author:
       */
      closeDialog () {
        this.$popupCacel()
        this.$refs['ruleForm'].resetFields();
        this.resetTableFields();
      }
    }
  }
</script>
<style scoped lang="scss">
  @import "~@/styles/mixin.scss";
  @import "~@/styles/dialogBoxheader.scss";
  @import "~@/styles/slxx/slxx.scss";

  .font-red {
    color: red;
  }

  .middle-margin-bottom {
    margin-top: 20px;
  }

  form /deep/ .el-form-item__label {
    width: 150px !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 32px;
    float: none;
  }
</style>