<template>
  <div v-Loading="Loading">

    <el-steps :active="activeStep" finish-status="success" v-if="isADD">
      <el-step title="条件录入"></el-step>
      <el-step title="查询结果"></el-step>
    </el-steps>
    <el-steps :active="activeStep" finish-status="success" v-else>
      <el-step title="条件录入" @click.native="on_click(0)" class="pointer"></el-step>
      <el-step title="查询结果" @click.native="on_click(2)" class="pointer"></el-step>
    </el-steps>
    <div v-if="isSearch">
      <dydjbInfo ref="dydjbInfo" />
    </div>
    <div class="jtfccx-edit" v-else>
      <div class="jtfccx-edit-con">
        <b class="title"></b>
        <el-form :model="form" label-width="110px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="查询用途" label-width="90px">
                <el-input v-model="form.djSqcxDO.cxyt" class="width100"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="不动产权证号">
                <el-input v-model="form.djSqcxDO.bdcqzh" class="width100"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="与产权人的关系">
                <el-radio-group v-model="form.djSqcxDO.ycqrgx">
                  <el-radio label="1">房屋权利人</el-radio>
                  <el-radio label="2">产权利害关系人</el-radio>
                  <el-radio label="3">委托人</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <b class="title">申请人</b>
        <lb-table :column="sqrColumns" key="sqr1" :data="form.sqrList" :maxHeight="200" heightNumSetting
          :pagination="false">
        </lb-table>
        <b class="title">权利人</b>
        <lb-table :column="qlrColumns" key="ql2r" :data="form.qlrList" :maxHeight="200" heightNumSetting
          :pagination="false">
        </lb-table>
      </div>
      <div class="submit-button" style="padding-bottom:50px" v-if="this.formData.sqcxBsm==''">
        <el-button @click="resetClick" v-show="!isSearch">重置</el-button>
        <el-button type="primary" @click="queryChick" v-show="!isSearch">查询</el-button>
        <el-button @click="closeDialog">关闭</el-button>
      </div>
    </div>
  </div>
</template>
<script>
  import { mapGetters } from "vuex";
  import store from '@/store/index.js'
  import dydjbInfo from "./dydjbInfo.vue";
  import { getLodop } from "@/utils/LodopFuncs"
  import { datas, sendThis } from "./dydjbdata";
  import { addFwmxCxjgXx, getFwmxInfo, printJtcfInfo } from "@/api/jtfc.js";
  import { getPrintTemplateByCode } from "@/api/print";
  export default {
    computed: {
      ...mapGetters(["dictData"]),
    },
    components: { dydjbInfo },
    props: {
      formData: {
        type: Object,
        default: () => { },
      }
    },
    mounted () {
      sendThis(this);
    },
    data () {
      return {
        isADD: true,
        Loading: false,
        activeStep: 0,
        //是否查询
        isSearch: false,
        //查询结果列表字段
        cxjgColumns: datas.columns(),
        //申请人列表字段
        sqrColumns: datas.sqrCol(),
        //权利人列表字段
        qlrColumns: datas.qlrCol(),
        newData: {
          sqrxm: "",
          sqrzjlxbm: "",
          sqrzjhm: "",
          lxdh: "",
          inputErr: false,
        },
        form: {
          djSqcxDO: { ycqrgx: "1", cxyt: "", bdcqzh: "" },
          sqrList: [],
          qlrList: [],
          cxjgList: [],
          dyjlList: [],
        },
      };
    },
    mounted () {
      this.loadData()
      this.isADD = this.formData.isAdd
      if (this.formData.sqcxBsm != '') {
        this.activeStep = 2;
        this.isSearch = true;
      }
    },
    watch: {
      "form.djSqcxDO.ycqrgx" (val) {
        if (val == "1") {
          this.form.qlrList = _.cloneDeep(this.form.sqrList);
        } else {
          this.form.qlrList = [];
          this.add("qlr");
        }
      },
      "form.sqrList": {
        handler: function (val) {
          if (this.form.djSqcxDO.ycqrgx == '1') {
            this.form.qlrList = _.cloneDeep(val)
          }
        },
        deep: true
      }
    },
    methods: {
      // 步骤条
      on_click (e) {
        if (e != '' || e != null) { this.activeStep = e }
        if (e == 0) {
          this.isSearch = false
        } else {
          this.isSearch = true
        }
      },
      /**
       * @description: closeDialog
       * @author: renchao
       */
      closeDialog () {
        this.$emit("input", false);
        this.activeStep = 0;
        this.form = {
          djSqcxDO: { ycqrgx: "1", cxyt: "", bdcqzh: "" },
          sqrList: [],
          qlrList: [],
          cxjgList: [],
          dyjlList: [],
        }
      },
      /**
       * @description: 加载详细信息
       * @author: renchao
       */
      loadData () {
        this.Loading = true
        getFwmxInfo({ sqcxBsm: this.formData.sqcxBsm }).then((res) => {
          this.Loading = false
          if (res.code == 200) {
            this.$nextTick(() => {
              this.$refs.dydjbInfo.setResult(res.result)
            })
          }
        }).catch(() => {
          this.Loading = false
        })
      },
      /**
       * @description: 查询结果
       * @author: renchao
       */
      queryChick () {
        this.Loading = true
        this.activeStep = 1;
        store.dispatch('user/reWorkFresh', false)
        addFwmxCxjgXx(this.form).then((res) => {
          this.Loading = false
          if (res.code == 200) {
            store.dispatch('user/reWorkFresh', true)
            this.activeStep = 2;
            this.isSearch = true;
            this.isADD = false
            this.$nextTick(() => {
              this.$refs.dydjbInfo.setResult(res.result)
            })
          }
        })
      },
      resetClick () {
        this.form.djSqcxDO = { ycqrgx: "1", cxyt: "", bdcqzh: "" };
        this.form.sqrList = _.cloneDeep([this.newData]);
        this.form.qlrList = _.cloneDeep([this.newData]);
        this.form.cxjgList = [];
        this.form.dyjlList = [];
        this.isSearch = false;
      },
      /**
       * @description: handleRead
       * @author: renchao
       */
      handleRead (scope) { },
      //添加申请人或权利人
      /**
       * @description: 添加申请人或权利人
       * @param {*} type
       * @author: renchao
       */
      add (type) {
        if (type == "sqr") {
          this.form.sqrList.push(_.cloneDeep(this.newData));
        } else {
          this.form.qlrList.push(_.cloneDeep(this.newData));
        }
      },
      /**
       * @description: 移除申请人或权利人
       * @param {*} index
       * @param {*} row
       * @param {*} type
       * @author: renchao
       */
      remove (index, row, type) {
        if (type == "sqr") {
          this.form.sqrList.splice(index, 1);
        } else {
          this.form.qlrList.splice(index, 1);
        }
      },
      /**
       * @description: 电话号码校验
       * @param {*} row
       * @author: renchao
       */
      teltest (row) {
        const reg = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;
        if (row.lxdh == "" || row.lxdh.length <= 10 || !reg.test(row.lxdh)) {
          row.inputErr = true;
          return false;
        } else {
          row.inputErr = false;
          return true;
        }
      },
    },
  };
</script>
<style scoped lang="scss">
  @import "~@/styles/mixin.scss";
  @import "~@/styles/public.scss";
  /deep/.el-step__title {
    margin-left: -15px;
  }
  /deep/.dialog_title::before {
    content: "";
    display: block;
    width: 4px;
    height: 18px;
    background: none;
    position: absolute;
    top: -4px;
    left: 0px;
  }
  .title {
    padding-bottom: 10px;
    margin-bottom: 10px;
    display: block;
    border-bottom: 1px solid $borderColor;
  }
  .jtfccx-edit-con {
    height: 80vh;
    overflow-y: scroll;
  }
  .jtfccx-edit {
    @include flex;
    flex-direction: column;
    padding: 0 2px;
    height: 82vh;

    .submit-button {
      text-align: center;
      height: 52px;
      padding-top: 10px;
      background-color: #fff;
    }
  }

  /deep/.el-dialog__headerbtn .el-dialog__close {
    color: #6b7a99 !important;
    position: relative;
    top: -7px;
  }
  /deep/.dialogBox .dialog_title {
    .el-icon-full-screen {
      color: #409eff !important;
    }
    b {
      color: white;
      flex: 0.1;
      margin: auto;
      text-align: center;
      align-items: center;
    }
  }
  /deep/.el-dialog__header {
    background: linear-gradient(3deg, #409eff, #a7cbee);
  }
  /deep/.el-dialog__headerbtn .el-dialog__close {
    color: #409eff !important;
  }
</style>