<!--
 * @Description: workFrame左侧菜单列表-普通
 * @Autor: renchao
 * @LastEditTime: 2023-07-17 16:16:13
-->
<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>
              <div class="ywh">（业务号：{{ item.blywh}}）</div>
            </div>
            <i class="el-icon-delete" @click.stop="handleDel(item)" v-if="delel"></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, deleteSlbdcdy } from "@/api/workFlow.js";
  import { deleteRepairRecord } from "@/api/djbRepair.js";
  import { leftMenubl } from "@/api/djbRepair.js";
  import { getBdcqljqtsx } from "@/api/djbDetail.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",
        clickindex: "",
        // 折叠
        isShowdrawer: true,
        delel: true,
        //批量操作按钮名称
        batchButtonName: "",
        //左侧菜单数据集合
        unitData: [],
        // 设置表单传递数据
        currentSelectProps: {},
        //左侧树形结构数据
        treedata: [],
        defaultNode: "",
        defaultProps: {
          value: "id",
          children: "children",
          label: "label",
        },
        showTab: "bdcqldjml", // 选中状态,根据表格中权利类型判断
      };
    },
    mounted () {
      this.delel = this.$parent.isEdit
      this.loadBdcdylist();
    },
    computed: {
      // ...mapGetters(["isRefresh"]),
    },
    watch: {
      // isRefresh: {
      //   handler(newVal, oldVal) {
      //     if (newVal) this.loadBdcdylist();
      //   },
      //   immediate: true,
      // },
    },
    methods: {
      /**
       * @description: 读取申请单元信息
       * @author: renchao
       */
      loadBdcdylist () {
        var formdata = new FormData();
        if (this.bsmSlsq) {
          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];
              this.$emit("getCurrentSelectProps", this.currentSelectProps);
            }
          });
        }
      },
      /**
       * @description: 获取右侧菜单
       * @param {*} row
       * @author: renchao
       */
      getleftMenubl (row) {
        leftMenubl(this.bsmSlsq).then((res) => {
          this.supplementarylist = res.result;
          if (row) {
            this.supplementarylist.forEach((item, index) => {
              if (item.bsmRepair == row.bsmRepair) {
                this.activeIndex = index.toString()
                // 补录成功后定位到该条记录
                this.unitClick(index)
              }
            })
            if (row == "change") {
              this.unitClick(this.clickindex)
            }
          } else {
            if (this.supplementarylist.length) {
              this.unitClick(0)
              this.activeIndex = "0"
            } else {
              this.loadBdcdylist()
              // this.$emit("getCurrentSelectProps", this.currentSelectProps);
            }
          }
        })
      },
      /**
       * @description: handleNodeClick
       * @param {*} data
       * @param {*} node
       * @param {*} elem
       * @author: renchao
       */
      handleNodeClick (data, node, elem) {
        this.$parent.loadComponent(this.currentSelectProps, data);
        this.$parent.tabset();
      },
      //申请单元点击事件
      /**
       * @description: 申请单元点击事件
       * @param {*} index
       * @author: renchao
       */
      unitClick (index) {
        this.clickindex = index
        this.currentSelectProps = this.supplementarylist[index];
        this.$emit("getCurrentSelectProps", this.currentSelectProps);
      },
      /**
       * @description: 登记簿点击事件
       * @author: renchao
       */
      djbClick () {
        this.loadBdcdylist();
      },
      /**
       * @description: 删除补录记录
       * @param {*} row
       * @author: renchao
       */
      handleDel (row) {
        this.$confirm("此操作将永久删除该条补录记录, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            deleteRepairRecord(row.bsmRepair).then((res) => {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.$nextTick(() => {
                this.getleftMenubl();
                if (!this.supplementarylist.length) {
                  getdjblist()
                }

              });
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      /**
       * @description: 补录信息点击事件默认展示第一条补录记录
       * @author: renchao
       */
      blxxClick () {
        if (this.supplementarylist.length) {
          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 {
    .el-menu-item {
      display: flex;
      justify-content: space-between;
    }
    border: #b0d9f8 solid 1px;
    .tpcolor {
      color: red;
      line-height: 22px;
    }
    .ywh {
      font-size: 12px;
    }
    .el-icon-delete {
      margin-top: 10px;
      margin-right: 3px;
      // background-color: saddlebrown;
      height: 27px;
      float: left;
    }
    .el-icon-delete:hover {
      color: #0079fe;
    }
  }
</style>