<template>
  <div class="ywsq" id="ywsq">
    <div class="ywsq-left">
      <p v-for="(item, index) in sqywlxList" @click="sqywlxClick(item)" :key="index"
        :class="{ 'active': selectType == item.type }">{{ item.name }}</p>
      <el-collapse disabled v-model="activeNames">
        <el-collapse-item title="业务申请" name="1">
          <ul class="item-list">
            <li v-for="(item, index) in sqywQllxList" :key="index" @click="qllxClick(index)"
              :class="item.check ? 'active' : ''">
              {{ item.nodename }}</li>
          </ul>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="ywsq-right">
      <!-- 常办业务 -->
      <div v-show="selectType == 'collect'" class="right-situation el-card">
        <div class="right-title">常办业务列表</div>
        <ul>
          <li :class="item.selected ? 'cactive' : ''" v-for="(item, index) in collectList" :key="index"
            @dblclick="dblclick(collectList, index)" @click="selectSqywClick(collectList, index)">
            <p v-if="item.nodetype == 'djqx'">{{ item.djywmc }}<br>{{ item.nodename }}</p>
            <dt v-else>{{ item.djywmc }}</dt>
            <p class="active" @click.stop="handleCollection(item)">
              <i class="el-icon-star-off"></i>
            </p>
          </li>
        </ul>
      </div>
      <!-- 一并申请 -->
      <div v-if="selectType == 'together'" class="right-title">一并申请</div>
      <!-- 登记簿补录 -->
      <div v-if="selectType == 'amend'" class="right-title">登记簿补录</div>
      <!-- 业务申请 -->
      <template v-if="selectType == 'apply'">
        <div class="right-type el-card box-card is-always-shadow">
          <div class="right-title">登记类型</div>
          <ul class="type-content">
            <li :class="item.selected ? 'cactive' : ''" @dblclick="item.sffqlc == 1 && dblclick(djlxList, index)"
              @click="selectSqywClick(djlxList, index)" v-for="(item, index) in djlxList" :key="index">
              <p>
                {{ item.nodename }}
              </p>
              <p v-if="item.sffqlc == 1" :class="item.userCollect == 1 ? 'active' : ''"
                @click.stop="handleCollection(item)">
                <i class="el-icon-star-off"></i>
              </p>
            </li>
          </ul>
        </div>
        <div class="right-situation el-card box-card is-always-shadow">
          <div class="right-title">登记情形</div>
          <ul>
            <li :class="item.selected ? 'cactive' : ''" v-for="(item, index) in djqxList" :key="index"
              @dblclick="dblclick(djqxList, index)" @click="selectSqywClick(djqxList, index)">
              <dt>{{ item.nodename }}</dt>
              <p :class="item.userCollect == 1 ? 'active' : ''" @click.stop="handleCollection(item)">
                <i class="el-icon-star-off"></i>
              </p>
            </li>
          </ul>
        </div>
      </template>
      <div class="submit-button">
        <el-button type="primary" :disabled="btnDisabled" @click="dialogClick">选择不动产</el-button>
      </div>
    </div>
    <selectDialog v-model="isDialog" :sqywInfo="selectParam" />
  </div>
</template>
<script>
import selectDialog from "./selectBdc.vue"
import { getCollectBiz, getleftMenu, getNextNode, addCollectBiz, deleteCollectBiz } from "@/api/ywbl"
export default {
  data () {
    return {
      //申请业务类型集合
      sqywlxList: [
        { name: "常办业务", type: "collect" },
        { name: "一并申请", type: "together" },
        { name: "登记簿补录", type: "amend" }
      ],
      //类型默认选择常办业务
      selectType: "collect",
      //堆叠框选中第一个
      activeNames: ['1'],
      //收藏业务集合
      collectList: [],
      //申请权利类型集合  
      sqywQllxList: [],
      //登记类型集合  
      djlxList: [],
      //申请权利类型集合  
      djqxList: [],
      //选中业务的参数  
      selectParam: {},
      //弹框框架显示或隐藏
      isDialog: false,
      //选择按钮显示或隐藏
      btnDisabled: true,
    }
  },
  components: {
    selectDialog
  },
  created () {
    this.getDataList();
  },
  methods: {
    getDataList () {
      //获取收藏信息集合
      getCollectBiz().then(res => {
        this.collectList = res.result;
        this.collectList.forEach(item => {
          this.$set(item, 'selected', false);
        });
      });
      //获取申请权利信息集合
      getleftMenu().then(res => {
        this.sqywQllxList = res.result;
      })
    },
    //申请业务类型菜单事件
    sqywlxClick (item) {
      this.btnDisabled = true;
      this.selectType = item.type;
      this.sqywQllxList.forEach(item => {
        if (item.check) item.check = false;
      })
    },
    //权利类型菜单事件
    qllxClick (index) {
      this.btnDisabled = true;
      this.sqywQllxList.forEach(item => {
        if (item.check) item.check = false;
      })
      this.sqywQllxList[index].check = true;
      this.selectType = "apply";
      this.djlxList = [];
      this.djqxList = [];
      this.getNextNode(this.sqywQllxList[index].bsmSqyw);
    },
    //选择申请业务事件
    selectSqywClick (data, index) {
      data.forEach(item => {
        item.selected = false;
      });
      data[index].selected = true;
      if (data[index].sffqlc == "1") {
        this.selectParam = data[index];
        this.btnDisabled = false;
      } else {
        this.btnDisabled = true;
        this.getNextNode(data[index].bsmSqyw);
      }
    },
    //获取下个节点类型数据
    getNextNode (bsmSqyw) {
      getNextNode(bsmSqyw).then(res => {
        if (res.result.djqx) {
          this.djqxList = res.result.djqx;
          this.djqxList.forEach(item => {
            this.$set(item, 'selected', false);
          });
        }
        if (res.result.djlx) {
          this.djlxList = res.result.djlx;
          this.djlxList.forEach(item => {
            this.$set(item, 'selected', false);
          });
        }
      })
    },
    //双击事件
    dblclick (data, index) {
      this.selectSqywClick(data, index);
      this.dialogClick();
    },
    //打开弹框内容
    dialogClick () {
      this.isDialog = true;
    },
    //收藏操作
    handleCollection (item) {
      let that = this
      if (item.userCollect == '2') {
        addCollectBiz(item.bsmSqyw).then(res => {
          if (res.code == 200) {
            item.userCollect = '1'
            that.$message({
              message: '收藏成功！',
              type: 'success'
            })
            that.getDataList()
          }
        })
      } else {
        this.$confirm('此操作将取消收藏, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteCollectBiz(item.bsmSqyw).then(res => {
            if (res.code == 200) {
              item.userCollect = '2'
              that.$message({
                message: '取消收藏成功！',
                type: 'success'
              })
              that.getDataList()
            }
          })
        })
      }
    },
    handleSelect (item) {
      this.busList.forEach(item => {
        item.cselect = false
      })
      item.cselect = !item.cselect
    },
    // 登记类型
    handleDjlxSelect (item) {
      this.djlxList.forEach(item => {
        item.cselect = false
      })
      this.btnDisabled = true
      item.cselect = true;
      this.djqxObj = item;
      if (item.sffqlc == '1') {
        this.btnDisabled = false
        this.bsmSqyw = item.bsmSqyw
        this.djywbm = item.djywbm;
      } else {
        this.getNextNode(item.bsmSqyw, false)
      }
      this.djqxList = []
    },
    handleDjqxItem (item) {
      this.djlxList.forEach(item => {
        item.cselect = false
      })
      console.log(item);
      if (item.sffqlc == 1) {
        this.djywbm = item.djywbm
        this.bsmSqyw = item.bsmSqyw
        item.cselect = true
        this.isDialog = true
        this.btnDisabled = true
      }
    },
    handleSelectItem (item, list) {
      this.handleSelectYw(item, list)
      this.isDialog = true
    },
    // 选择不动产信息
    bthSelectClick () {
      this.isDialog = true
    },
    loadView (view) {
      return r => require.ensure([], () => r(require(`./components/${view}/${view}.vue`)))
    }
  }
}
</script>
<style scoped lang='scss'>
@import "~@/styles/mixin.scss";
@import './ywsq.scss';

/deep/.el-collapse-item__content {
  padding-bottom: 0;
}

/deep/.el-collapse-item__wrap {
  border-bottom: none;
}
</style>