<template>
  <div>
    <el-row>
      <el-col>
        <div>
          <el-tabs v-model="activeName" @tab-click="handleClick" :before-leave="beforeLeave">
            <el-tab-pane :label="$t('tabs.role')" name="roleslist"></el-tab-pane>
            <el-tab-pane :label="$t('tabs.pc_menu')" name="pcMenu" v-if="!isMode"></el-tab-pane>
            <el-tab-pane :label="$t('tabs.mobile_menu')" name="mobileMenu" v-if="!isMode"></el-tab-pane>
            <el-tab-pane :label="$t('tabs.widget')" name="widgetlist" v-if="!isMode"></el-tab-pane>
            <el-tab-pane :label="$t('tabs.task')" name="tasklist" v-if="!isMode"></el-tab-pane>
            <el-tab-pane :label="$t('tabs.stateLabel')" name="statuslabellist" v-if="!isMode"></el-tab-pane>
          </el-tabs>
        </div>
        <div>
          <router-view></router-view>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'commontool',
  data(){
    return{
      data: [],
      isMode:false,
    }
  },
  created(){
    if(JSON.parse(sessionStorage.getItem('software')).type == 1){
      this.isMode=true;
    }
  },
  mounted(){
  },
  computed:{
    activeName:{
      get(){
        let tabName = this.$store.state.tabName
        switch(tabName){
          case "statuslabel":
            tabName = "statuslabellist";
            break;
          case "task":
            tabName = "tasklist";
            break;
          case "roles":
            tabName = "roleslist";
            break;
        }
        return tabName
      },
      set(val){
        return val;
      }
    }
  },
  methods:{
    /**
     * 当前选中的页签
     */
    handleClick(tab){
      if(tab.name == "roleslist"){
        this.$store.dispatch("rightHelpPageParams", { title:this.$t('widget.role_list') , url: "application/application_info_generalTools_role_list_help.html" });
        this.$router.push({path: '/home/softwaresdetails/commontool/roleslist', query:{ edit: true}});
        this.$store.commit('changeIsClickPrimaryTab','roleslist' + new Date().getTime());
      }
      else if(tab.name == "statuslabellist"){
        this.$store.dispatch("rightHelpPageParams", { title: this.$t('stateLabel.title_list'), url: "application/application_info_generalTools_stateLabel_list_help.html" });
        this.$router.push({path: '/home/softwaresdetails/commontool/statuslabellist', query:{ edit: true}});
        this.$store.commit('changeIsClickPrimaryTab','statuslabellist'+ new Date().getTime());
      }
      else if(tab.name == "tasklist"){
        this.$store.dispatch("rightHelpPageParams", { title: this.$t('stateLabel.task_list'), url: "application/application_module_task_list_help.html" });
        this.$router.push({path: '/home/softwaresdetails/commontool/tasklist', query:{ edit: true}});
        this.$store.commit('changeIsClickPrimaryTab','tasklist'+ new Date().getTime());

      }else if(tab.name == "widgetlist"){
        this.$store.dispatch("rightHelpPageParams", { title: this.$t('stateLabel.not'), url: "application/application_module_info_help.html" });
        this.$router.push({path: '/home/softwaresdetails/commontool/widgetlist', query:{ edit: true}});
        this.$store.commit('changeIsClickPrimaryTab','widgetlist'+ new Date().getTime());

      }else if(tab.name == "pcMenu"){
        this.$store.dispatch("rightHelpPageParams", { title: this.$t('menu.menu_list'), url: "application/application_info_generalTools_menu_list_help.html" });
        this.$router.push({path: '/home/softwaresdetails/commontool/pcmenu', query:{ edit: true}});
        this.$store.commit('changeIsClickPrimaryTab','pcMenu'+ new Date().getTime());

      }else if(tab.name == "mobileMenu"){
        this.$store.dispatch("rightHelpPageParams", { title: this.$t('menu.menu_list'), url: "application/application_info_generalTools_menu_list_help.html" });
        this.$router.push({path: '/home/softwaresdetails/commontool/mobilemenu', query:{ edit: true}});
        this.$store.commit('changeIsClickPrimaryTab','mobileMenu' + new Date().getTime());

      }
    },

    // 将要离开面板的钩子函数
    beforeLeave (activeName) {
      if(activeName == 'pcMenu' || activeName == 'mobile'){
        this.$store.dispatch('selectTreeNode', [])
      }
    },
  },
  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>