<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, item)" @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-situation el-card">
         <div class="right-title">一并申请</div>
         <ul>
          <li :class="item.selected ? 'cactive' : ''" v-for="(item, index) in djqxList" :key="index"
            @dblclick="dblclick(djqxList, index, item)" @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>
      <!-- 登记簿补录 -->
      <div v-if="selectType == 'amend'" class="right-situation el-card">
        <div class="right-title">登记簿补录</div>
        <ul>
          <li :class="item.selected ? 'cactive' : ''" v-for="(item, index) in djqxList" :key="index"
            @dblclick="dblclick(djqxList, index, item)" @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 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, item)"
              @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, item)" @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>
  </div>
</template>
<script>
  import { getCollectBiz, getleftMenu, getNextNode, getRepairBiz,getTogetherBiz, 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: {},
        //选择按钮显示或隐藏
        btnDisabled: true,
      }
    },
    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) {
        console.log("item", item);
        this.btnDisabled = true;
        this.selectType = item.type;
        this.sqywQllxList.forEach(item => {
          if (item.check) item.check = false;
        });
        if (this.selectType == 'amend') {
          this.getRepairBiz();
        }
         if (this.selectType == 'together') {
          getTogetherBiz().then(res => {
          if (res) {
            console.log("res", res);
            this.djqxList = res.result;
          }
        })
        }
      },
      //权利类型菜单事件
      qllxClick (index) {
        console.log("业务", 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);
            });
          }
        })
      },

      //获取下个节点类型数据
      getRepairBiz () {
        getRepairBiz().then(res => {
          if (res) {
            console.log("res", res);
            this.djqxList = res.result;
          }
        })
      },
      //双击事件
      dblclick (data, index, item) {
        localStorage.setItem('ywbl', JSON.stringify(item));
        this.selectSqywClick(data, index);
        this.dialogClick();
      },
      //打开弹框内容
      dialogClick () {
        this.openDialog();
      },
      //收藏操作
      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
        })
        if (item.sffqlc == 1) {
          this.djywbm = item.djywbm
          this.bsmSqyw = item.bsmSqyw
          item.cselect = true
          this.openDialog()
          this.btnDisabled = true
        }
      },
      handleSelectItem (item, list) {
        this.handleSelectYw(item, list)
        this.openDialog()
      },
      // 选择不动产信息
      bthSelectClick () {
        this.openDialog()
      },
      openDialog () {
        console.log("this.selectParam", this.selectParam);
        let title = "申请业务：" + this.selectParam?.djywmc ? this.selectParam?.djywmc : '';

        this.$popupDialog(title, "ywbl/ywsq/selectBdc", { 'sqywInfo': this.selectParam }, "85%")
      },
      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>