<template>
  <div>
    <div class="obpm-title">
      <div class="d-inline-block">
        <i class="el-icon-folder title-icon"></i>
        <div class="title-name d-inline-block ml-2">{{$t('menu.mobile')}}</div>
      </div>
    </div>
    <el-row :style="{ height: menuHeight + 'px' }">
      <el-col :span="6" class="height100">
        <menuTree :param="param" ref="tree"  @createMenu='createMenu' @copyMenuBtnClick='copyMenuBtnClick'></menuTree>
      </el-col>
      <el-col :span="18" class="height100 overflowYS">
        <menuDetail :type="type" :visible="detailVisible" @change="changeVisible" @refreshMenu="refreshMenu" ref="detail" @changeMobileType="changeMobileType"></menuDetail>
        <copyMenu :type="type" v-if="copyVisible" :visible="copyVisible" @refreshMenu="refreshMenu"></copyMenu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import menuTree from "@/components/CommonTool/menuTree.vue";
import menuDetail from "@/components/CommonTool/menuDetail.vue";
import copyMenu from "@/components/CommonTool/copyMenu.vue";

export default {
  components: {
    menuTree,
    menuDetail,
    copyMenu,
  },
  name: "mobileMenu",
  data() {
    return {
      param: {
        applicationId: sessionStorage.getItem("appId"),
        isMobile: true,
        parentId: "",
      },
      menuHeight: 0,
      type: "mobile",
      detailVisible: false,
      copyVisible: false,
    };
  },

  mounted() {
    this.$store.dispatch("resetMenuTreeMenuId");
    let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    //60 头部， 32 面包屑， 41 第一层页签， 40 第二层页签， 50 列表标题， 71 查询， 20 父组件外边距, 40分页
    this.menuHeight = clientHeight - 60 - 32 - 41 - 40 - 50 - 20;
  },
  beforeDestroy(){
    this.$store.dispatch("resetMenuTreeMenuId");
    this.$store.commit("changeShowMunuDetail", {show: false, superiorId: ""});
  },

  methods: {
    copyMenuBtnClick() {
      this.type = "mobile";
      this.detailVisible = false;
      this.copyVisible = true;
    },
    createMenu() {
      this.$store.dispatch("rightHelpPageParams", { title: this.$t('menu.menu_info'), url: "application/application_info_generalTools_menu_info_help.html" });
      this.type = "newMobile";
      this.detailVisible = true;
      this.copyVisible = false;
      this.$forceUpdate();
      this.$store.dispatch("resetMenuTreeMenuId");
    },
    changeVisible(val) {
      if(val)this.copyVisible = false;
      this.detailVisible = val;
    },
    delMenu() {
      this.$refs.tree.delMenus();
    },
    // 刷新列表树
    refreshMenu() {
      this.$refs.tree.changeExpandAll(false);
    },
    changeMobileType() {
      this.type = "newMobile";
    },
  },
  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>
