<!--
 * @Description: workFrame左侧菜单列表-普通
 * @Autor: renchao
 * @LastEditTime: 2023-05-25 10:42:50
-->
<template>
  <div class="leftmenu" :class="{ 'animation-map-drawer': isShowdrawer }">
    <div v-if="this.isShowdrawer">
    <el-menu :default-active="activeIndex" @select="djbClick" class="title-batch">
      <el-menu-item index="-1" key="-1" class="menus">
        <div>登记簿</div>
      </el-menu-item>
    </el-menu>
    <div class="blxx">
         <el-menu :default-active="activeIndex" @select="blxxClick"  class="title-batch">
      <el-menu-item index="-1" key="-1" class="menus">
        <div>补录信息</div>
      </el-menu-item>
    </el-menu>
      <el-menu :default-active="activeIndex" @select="unitClick">
        <el-menu-item v-for="(item, index) in supplementarylist" :index="index.toString()" :key="index">
          <div>
            <p>{{ item.bdcdyh }}</p>
            <p class="title-detail">{{ item.zl }}</p>
          </div>
          <i class="el-icon-delete" v-if="supplementarylist.length > 1" @click.stop="handleDel(item)"></i>
        </el-menu-item>
      </el-menu>
    </div>

    </div>
    <div class="map-drawer-click map-drawer" v-if="!isShowdrawer" @click="
          () => {
            this.isShowdrawer = !this.isShowdrawer;
          }
        "></div>
    <div class="map-drawer-expand map-drawer" v-else @click="
          () => {
            this.isShowdrawer = !this.isShowdrawer;
          }
        "></div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import { leftMenu } from "@/api/fqsq.js"
  import { deleteSlbdcdy } from "@/api/ywbl.js";
  import { getBdcqljqtsx } from "@/api/registerBook.js";
import { loadTreeData, getNode } from "./djbFrameData.js";
  export default {
    data () {
      return {
        supplementarylist:[],
           //受理申请标识码
        bsmSlsq: this.$route.query.bsmSlsq,
        //当前流程所在环节
        bestepid: this.$route.query.bestepid,
           //受理申请标识码
        bdcdyid: this.$route.query.bdcdyid,
        //当前流程所在环节
        bdcdyh: this.$route.query.bdcdyh,
        qllx:this.$route.query.qllx,
        // 默认选中
        activeIndex: '0',
        // 折叠
        isShowdrawer: true,
        //批量操作按钮名称
        batchButtonName: '',
        //左侧菜单数据集合
        unitData: [],
        // 设置表单传递数据
        currentSelectProps: {},
          //左侧树形结构数据
      treedata: [],
      defaultNode: "",
           defaultProps: {
        value: "id",
        children: "children",
        label: "label",
      },
      showTab: "bdcqldjml", // 选中状态,根据表格中权利类型判断
      }
    },
    mounted () {
      this.loadBdcdylist();
    },
    computed: {
      ...mapGetters(['isRefresh'])
    },
    watch: {
      isRefresh: {
        handler (newVal, oldVal) {
          if (newVal) this.loadBdcdylist()
        },
        immediate: true
      }
    },
    methods: {
      //读取申请单元信息
      loadBdcdylist () {
        this.loadData ()
      },
      // 获取登记簿菜单
       loadData () {
         this.supplementarylist=[{
        "zl": "抵押权",
       },{
        "zl": "抵押权",
       },{
        "zl": "抵押权",
       },{
        "zl": "抵押权",
       },{
        "zl": "抵押权",
       },{
        "zl": "抵押权",
       },{
        "zl": "抵押权",
       },{
        "zl": "抵押权",
       },{
        "zl": "抵押权",
       },{
        "zl": "抵押权",
       },{
        "zl": "抵押权",
       },{
        "zl": "抵押权",
       },{
        "zl": "抵押权",
       },{
        "zl": "抵押权",
       },{
        "zl": "抵押权",
       },{
        "zl": "抵押权",
       },{
        "zl": "抵押权",
       },{
        "zl": "抵押权",
       },{
        "zl": "抵押权",
       },{
        "zl": "抵押权",
       },{
        "zl": "抵押权",
       },{
        "zl": "抵押权",
       },{
        "zl": "抵押权",
       },{
        "zl": "抵押权",
       },{
        "zl": "抵押权",
       },{
        "zl": "抵押权",
       },{
        "zl": "抵押权",
       },{
        "zl": "抵押权",
       },{
        "zl": "抵押权",
       },{
        "zl": "抵押权",
       },{
        "zl": "抵押权",
       },{
        "zl": "抵押权",
       },{
        "zl": "抵押权",
       },{
        "zl": "抵押权",
       },{
        "zl": "抵押权",
       }]
      // getBdcqljqtsx({
      //   bdcdyid: this.bdcdyid,
      //   bdcdyh: this.bdcdyh,
      // }).then((res) => {
      //   if (res.code === 200) {
      //     this.treedata = loadTreeData(res.result, this.bdcdyh);
      //     this.$nextTick(function () {
      //       this.defaultNode = getNode(this.qllx, { linShi: 0, xianShi: 0, liShi: 0 }, "");
      //       this.$refs.tree.setCurrentKey(this.defaultNode.id); //data[0].id为默认选中的节点
      //       this.$parent.loadComponent(this.currentSelectProps,this.defaultNode);
      //     });
      //   }
      // });
      // this.currentSelectProps = {
      //   bdcdyid: this.bdcdyid,
      //   bdcdyh: this.bdcdyh,
      //   qllx: this.qllx,
      //   bsmQlxx: this.bsmQlxx,
      //   bestepid:this.bestepid
      // };
      // this.$parent.stepForm();
    },
    handleNodeClick (data, node, elem) {
      console.log("this.currentSelectProps",this.currentSelectProps);
      console.log("data",data);
      this.$parent.loadComponent(this.currentSelectProps,data);
      this.$parent.tabset();
    },
  //申请单元点击事件
    unitClick (index) {
       this.$parent.tabset()
      // this.currentSelectProps = this.unitData[index];
      // this.currentSelectProps.batchOperation = false;
      // this.activeIndex = index.toString();
      // //选中表单传递数据
      // this.$emit('getCurrentSelectProps', this.currentSelectProps);
      // this.$parent.stepForm(index);
      // this.$store.dispatch('user/refreshPage', false);
    },
     //登记簿点击事件
    djbClick () {
      this.currentSelectProps.batchOperation = true;
      this.activeIndex = "-1";
       this.$parent.getdjblist()

    },
      //补录信息点击事件
    blxxClick () {
    this.$parent.tabset()

    },
  }
  }
</script>
<style scoped lang='scss'>
  @import "~@/styles/mixin.scss";
  @import "../../workFrame.scss";
  .leftmenu ul {
    height: calc(100vh - 120px);
  }
  /deep/.rollTable {
  height: calc(100vh - 240px) !important;
}

.content {
  width: 100%;
  height: 100%;
  display: flex;

  .left {
    width: 256px;
    height: 704px;
    background-color: #f5f5f5;
    color: #333;
    border: 1px solid rgb(228, 228, 228);
  }

  .right {
    width: calc(100% - 256px);
    height: 704px;
    // overflow-y: scroll;
    overflow: auto;
    background-color: #f5f5f5;
    border: 1px solid rgb(228, 228, 228);
  }
}

/deep/ .expanded.el-tree-node__expand-icon,
/deep/ .el-tree-node__expand-icon {
  visibility: hidden;
}

/deep/ .el-tree-node__content {
  border: 1px solid rgb(228, 228, 228);
  height: 45px;
}

/deep/ .el-tree-node:focus>.el-tree-node__content {
  background-color: #f5f5f5;
  color: #0079fe;
  border-right: 4px solid #0079fe;
}

/deep/.el-tree-node {
  white-space: pre-wrap;
}

/deep/ .is-current>.el-tree-node__content {
  background-color: #f5f5f5;
  color: #0079fe;
  border-right: 4px solid #0079fe;
}
.menus{
     background-color: #e7f4fe;
}
.blxx{
  border:#b0d9f8 solid 1px;
}
</style>