<template>
  <div>
    <div v-show="contextMenuVisible">
      <ul :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
        <li>
          <a-button :style="{width:'100%'}" type="text" size="small" @click="closeTab('now')">{{$t('关闭当前')}}</a-button>
        </li>
        <li>
          <a-button :style="{width:'100%'}" type="text" size="small" @click="closeTab('other')"
            >{{$t('关闭其他')}}</a-button
          >
        </li>

        <li>
          <a-button :style="{width:'100%'}" type="text" size="small" @click="closeTab('all')">{{$t('关闭所有')}}</a-button>
        </li>
        <!-- <li>
          <a-button
            type="text"
            size="small"
            @click="
              () => {
                contextMenuVisible = false;
              }
            "
            :style="{ width: '100%' }"
            >关闭</a-button
          >
        </li> -->
      </ul>
    </div>
    <a-tabs
      type="editable-card"
      class="tabs"
      hide-add
      default-active-key="1"
      @edit="onEdit"
      :activeKey="activeKey"
      @change="changeTab"
    >
      <a-tab-pane
        v-for="menu in menus"
        :id="menu.meta.id"
        :key="menu.meta.id"
        :tab="$t(menu.name)"
      >
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
import {TOGGLE_IFRAME_TYPE} from "@/homeComponents/store/mutation-types.js"
export default {
  props: {
    nowTabTitle: String,
  },
  data() {
    return {
      newTabIndex: 0,
      tabKey: "1",
      menus: [],
      activeKey: null,
      tab_top_dom: "",
      contextMenuVisible: false,
      left: "0",
      top: "0",
      tabId: "",
      tabIndex: "",
      isclose:false

    };
  },
  mounted() {
    //点击任意位置关闭区域弹窗
    document.addEventListener("click", (e) => {
      this.contextMenuVisible = false;
    });
  },
  methods: {
  
    //判断是否iframe打开，
    //是，则返回信息
    isIframeOpen(targetKey){
      
      let menu =  this.menus.find(item=>item.meta.id == targetKey);
      // console.log(menu.path && menu.meta.code);
      // if(menu.meta.code == "memberConfig" ||menu.meta.code == 'apply'){
      if(menu.meta.isIframe){
        return menu;
      }else{
        return false;
      }
    },
    closeIframe(targetKey){
      var closeMenu =  this.isIframeOpen(targetKey);
      
      console.log(closeMenu?'关掉的是iframe':'关掉的是路由',closeMenu);
      if(closeMenu){
        this.$store.commit('DELETE_IFRAMELIST_DATA',closeMenu.meta.id);
         console.log('关掉后剩余的iframe信息',this.$store.state.homeApp.iframeList);
        
      }
      // var jumpMenu = this.menus.filter((item) => item.meta.id == val);
    },
    onEdit(targetKey, action) {
      this.bindRightCilick();

      this[action](targetKey);
    },
    remove(targetKey) {
      this.closeIframe(targetKey);
      this.seletedKey(targetKey);

      //去掉 关闭的 tab
      this.menus = this.menus.filter((item) => item.meta.id != targetKey);

      //选中
      //如果关闭的当前选中tab
      //如果不是最后一个 ，则选中 后一个
      //如果是最后一个 ，则选中 前一个
      //如果只剩一个，则 选中key = null
    },
 
    changeTab(targetKey) {
      this.$emit('changeIsLoging', true)

      this.activeKey = targetKey;
      var hash = null;
      this.menus.map((item) => {
        if (item.meta.id == targetKey) {
          hash = item.path;
        }
      });

      //console.log(hash);
      this.$emit("selectMenu", hash);
    },
    seletedKey(removeKey) {
        if(this.isclose){
        this.$emit('changeIsLoging', true)
      }
      var removeIndex = null;
      this.menus.map((item, index) => {
        if (item.meta.id == removeKey) {
          removeIndex = index;
        }
        return item;
      });

      if (removeKey == this.activeKey) {
        if (this.menus.length == 1) {
          this.activeKey = null;
          this.$emit("selectMenu", null);
        } else {
          if (removeIndex + 1 == this.menus.length) {
            this.activeKey = this.menus[removeIndex - 1].meta.id;
          } else {
            this.activeKey = this.menus[removeIndex + 1].meta.id;
          }
          this.menuSelete();
        }
      }
    },
    menuSelete() {
      var hash = null;

      this.menus.map((item) => {
        if (item.meta.id == this.activeKey) {
          hash = item.path;
        }
      });

      this.$emit("selectMenu", hash);
    },

    openContextMenu(e) {
      e.preventDefault();
      var el = e.currentTarget;
      this.tabIndex = el.getAttribute("tabindex");
      this.tabId = el.getAttribute("tabid");
      this.contextMenuVisible = true;
      this.left = e.clientX;
      this.top = e.clientY + 10;
    },
    closeTab(operation) {
      this.isclose =false;

      // console.log(operation);
      if (operation == "now") {
        
        this.remove(this.tabId);
      } else if (operation == "other") {
        this.changeTab(this.tabId - 0);
        this.menus = this.menus.filter((item) => item.meta.id == this.tabId);
      } else if (operation == "all") {
        this.activeKey = null;
        this.$emit("selectMenu", null);
        this.$router.push({ path: "/" });
        this.menus = [];
      }
      this.contextMenuVisible = false;
    },

    bindRightCilick() {
      this.tab_top_dom = document.body.getElementsByClassName("ant-tabs-tab");
      setTimeout(() => {
        this.tab_top_dom.forEach((item, key) => {
          // console.log(this.menus[key]);
          item.setAttribute("tabindex", key);
          try{

            item.setAttribute("tabid", this.menus[key].meta.id);
          }catch(error){
            
          }

          item.oncontextmenu = this.openContextMenu;
          // item.oncontextmenu = this.openContextMenu2( e,key);
        });
      }, 200);
    },
  },
  computed: {},
  watch: {
    activeKey(val) {
      
      var jumpMenu = this.menus.filter((item) => item.meta.id == val);
      var iframeInfo = this.isIframeOpen(val)
      if(iframeInfo){
        let iframeHttp = `https://${process.env.VUE_APP_CURRENTMOD == 'test' ? 'fat-' : 'dev-'}adminpublic.yalla.games`
        // this.$store.commit('PUSH_IFRAMELIST_DATA',{...iframeInfo,iframeUrl:window.location.origin+'/#'+iframeInfo.path});
        this.$store.commit('PUSH_IFRAMELIST_DATA',{...iframeInfo,iframeUrl:iframeHttp+iframeInfo.path});
        // console.log(this.$store.state.homeApp.iframeList);
        

      }
        this.$store.commit(TOGGLE_IFRAME_TYPE,iframeInfo?true:false );
      
      // console.log(this.$store.state.homeApp.isIframeRouter,this.$store.state.homeApp.iframeUrl);
      

      if (jumpMenu.length > 0) {
        this.$router.push({ path: `${jumpMenu[0].path}` });
      } else {
        this.$router.push({ path: "/" });
      }
    },
    menus(newVal, oldVal) {
      
      // //console.log(newVal.length,oldVal.length);
      if (newVal.length < oldVal.length) {
      } else {
        this.bindRightCilick();
        // console.log(this.tab_top_dom);
        // //console.log(newVal[newVal.length-1].meta.title);
        this.activeKey = newVal[newVal.length - 1].meta.id;
      }
    },
  },
};
</script>

<style lang="less">
.ant-tabs-bar.ant-tabs-top-bar.ant-tabs-card-bar {
  margin: 0px 0px 0px 20px !important;
  height: 40px !important;
  z-index: 1000 !important;
}
.ant-tabs-bar {
  height: 40px;
  margin: 0px 0 0 0 0 !important;
}

.contextmenu {
  // width: 100px;
  margin: 0;
  border: 1px solid #ccc;
  background: #fff;
  z-index: 3000;
  position: absolute;
  list-style-type: none;
  padding: 0;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
  // box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.2);
}
.contextmenu li {
  margin: 0;
  // padding: 0px 22px;
}
.contextmenu li:hover {
  background: #f2f2f2;
  cursor: pointer;
}
.contextmenu li button {
  color: #2c3e50;
}

.ant-tabs-tab {
  div {
    // color: rgba(0, 0, 0, 0.3);
  }
}
.ant-tabs-tab-active.ant-tabs-tab {
  div {
    font-weight: 600;
    // color:#F29900 !important;
    -webkit-user-select:none !important ;

   -moz-user-select:none !important;

   -ms-user-select:none !important;

   user-select:none !important;
  }
}
.ant-tabs-nav-scroll{
     -webkit-user-select:none !important ;

   -moz-user-select:none !important;

   -ms-user-select:none !important;

   user-select:none !important;
}
</style>
