<!--
 * @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
        @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
          @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 v-if="item.operate=='D'">{{ item.qllxmc }} <span class="tpcolor">(删除)</span></p>
              <p v-else >{{ item.qllxmc }} <span class="tpcolor">({{ item.operate=="U"?"编辑":"新增" }})</span></p>

              <!-- <p class="title-detail">{{ item.zl }}</p> -->
            </div>
            <i
              class="el-icon-delete"
              @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 { deleteRepairRecord } from "@/api/djbbl.js";
import { leftMenubl } from "@/api/djbbl.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();
  this.getleftMenubl();
  },
  computed: {
    // ...mapGetters(["isRefresh"]),
  },
  watch: {
    // isRefresh: {
    //   handler(newVal, oldVal) {
    //     if (newVal) this.loadBdcdylist();
    //   },
    //   immediate: true,
    // },
  },
  methods: {
    //读取申请单元信息
    loadBdcdylist(add) {
      var formdata = new FormData();
      formdata.append("bsmSlsq", this.bsmSlsq);
      formdata.append("bestepid", this.bestepid);
      leftMenu(formdata).then((res) => {
        if (res.code === 200 && res.result) {
          this.currentSelectProps = res.result[0];
          console.log("读取申请单元信息");
          this.$emit("getCurrentSelectProps", this.currentSelectProps);
          if(add){
            this.$parent.getQllxByBdcdyid()
          }
        }
      });

    },
    // 获取右侧菜单
    getleftMenubl(row) {
       leftMenubl(this.bsmSlsq).then((res) => {
        this.supplementarylist = res.result;
        console.log("获取右侧菜单");
        this.unitClick(0)
        if(row){
          this.supplementarylist.forEach((item,index) => {
            if(item.bsmRepair==row.bsmRepair){
              this.activeIndex=index.toString()
              // 补录成功后定位到该条记录
              this.unitClick(index)
            }
          })
       }
      });
    },
    handleNodeClick(data, node, elem) {
      this.$parent.loadComponent(this.currentSelectProps, data);
      this.$parent.tabset();
    },
    //申请单元点击事件
    unitClick(index) {
       console.log("申请单元点击事件");
      this.currentSelectProps = this.supplementarylist[index];
      this.$emit("getCurrentSelectProps", this.currentSelectProps);
    },
    //登记簿点击事件
    djbClick() {
      this.loadBdcdylist();
    },
    // 删除补录记录
    handleDel(row) {
      this.$confirm("此操作将永久删除该条补录记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteRepairRecord(row.bsmRepair).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.$nextTick(() => {
              this.getleftMenubl();
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //补录信息点击事件默认展示第一条补录记录
    blxxClick() {
      this.unitClick(0);
    },
  },
};
</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;
  div{
     font-size: 16px;
     font-weight: 600;
  }

}
.blxx {
  border: #b0d9f8 solid 1px;
  .tpcolor{
 color: red;
  }
}
</style>