<template>
  <div class="height100 menuTree">
    <el-button type="text" class="miniFontSize padding0" @click="changeExpandAll(true)">{{$t('btns.open_all')}}</el-button>
    <el-button type="text" class="miniFontSize padding0" @click="changeExpandAll(false)">{{$t('btns.close_all')}}</el-button>
    <el-button type="text" class="miniFontSize padding0" @click="copyMenuBtnClick">{{$t('btns.copy_menu')}}</el-button>

    <el-scrollbar style="height:calc(100% - 30px)" :native="false">
      <el-tree
        ref="tree"
        node-key="id"
        :props="{
          label: 'name',
          isLeaf: 'hasChild',
        }"
        :load="loadNode"
        :expand-on-click-node="false"
        :default-expanded-keys="defaultExpandedKeys"
        lazy
        :check-strictly="true"
        show-checkbox
        @check="checkList"
      >
                <span class="smallfont custom-tree-node" slot-scope="{ node, data }">
          <span @click="renderCon(data)">{{ data.name }}</span>
          <div>
            <span @click="createMenu(data.id)">
              <i class="addModule el-icon-plus d-none" style="color:#409EFF;padding-right:5px;" v-if="!((data.superior) && data.uri.lastIndexOf('mobilemenu') != -1)" :style="{paddingRight :(data.name == $t('menu.tree_menu') ?  '38px' : '')}"></i>
            </span>
            <span @click="delMenus(data)">
              <i class="delModule el-icon-delete d-none" style="color:#409EFF;padding-right:25px;" v-if="data.name != $t('menu.tree_menu')"></i>
            </span>
          </div>
        </span>
      
      </el-tree>
    </el-scrollbar>
  </div>
</template>

<script>
import { getMenuList, delMenu } from "@/service/CommontoolsAPI.js";
import {delMsg} from '@/utils/elementui'
export default {
  name: 'menutree',
  props: ['param'],
  data () {
    return {
      first: true,
      node: null,
      resolve: null,
      defaultExpandedKeys: [],
      expandAll: false,
    }
  },
  mounted () {

  },
  methods: {
    copyMenuBtnClick(){
      this.$emit('copyMenuBtnClick')
    },
    createMenu(id){
      this.$store.dispatch('setMenuSuperiorId', id)
      this.$emit("createMenu")
    },
    async delMenus (data) {
      if(!data.hasChild){
        try{
          await delMsg(this.$t('msg.comfirm_del'), this.$t('msg.tip'))
          this.delMenu(data.id)  
        }catch(e){
          console.log(e)
        }
      }else{
        this.delMenu(data.id) 
      }
    },
    async delMenu(id){
      const resp = await delMenu([id]);
      if (resp.data.errcode == 0) {
        this.$message.success(this.$t('msg.del_ss'));
        if(id==this.$store.state.menuTreeMenuId)
        this.$store.dispatch('resetMenuTreeMenuId')

        this.loadNode(this.node, this.resolve)
      }
    },
    changeExpandAll (val) {
      this.expandAll = val;
      this.loadNode(this.node, this.resolve)
    },
    async loadNode (node, resolve) {
      let that = this;
      if (node.level === 0) {
        if (this.first) {
          this.first = false;
          this.node = node;
          this.resolve = resolve;
        }
        this.node.childNodes = [];
        this.defaultExpandedKeys = [];
        let root = [{
          checked: false,
          id: this.param.applicationId,
          name:this.$t('menu.tree_menu'),
          parentId: "",
          hasChild: false,
          permissionType: "private",
          superior: "",
          uri: ""
        }]
        this.defaultExpandedKeys.push(this.param.applicationId)

        resolve(root);
      }
      if (node.level >= 1) {
        this.param.parentId = node.key;
        const resp = await getMenuList(this.param);
        if (resp.data.data) {
          let subdepts = resp.data.data;
          subdepts.forEach(elm => {
            if (!elm.hasChild && that.expandAll) {
              this.defaultExpandedKeys.push(elm.id)
            }
          })
          resolve(subdepts);
        } else {
          resolve([])
        }
      }
    },
    renderCon (obj) {
      if(obj.id==this.param.applicationId){
        return false;
      }
      this.$store.dispatch("rightHelpPageParams", { title: this.$t('menu.menu_info'), url: "application/application_info_generalTools_menu_info_help.html" });
      this.$store.dispatch('saveMenuTreeMenuId', obj.id)
      this.$store.commit('changeShowMunuDetail', {show: true, superiorId: obj.superior})
      this.$store.dispatch('setMenuSuperiorId', "")
    },
    checkList () {
      this.$store.dispatch('selectTreeNode', this.$refs.tree.getCheckedNodes())
      // console.log(this.$refs.tree.getCheckedNodes())
    }
  },
  watch: {
    "$store.state.rightHelpPageParams": {
      handler () {
        if (this.$store.state.rightHelpFrame) {
          this.$store.state.rightHelpFrame.contentWindow.showHelpContentHtml(this.$store.state.rightHelpPageParams.title, this.$store.state.rightHelpPageParams.url);
        }
      },
      deep: true,
    },
  },
}
</script>