<template>
  <li :class="classes" @click.stop="handle">
    <y-tooltip v-if="parentMenu.collapse && !isPopupMenu" effect="dark" trigger="hover" placement="right">
      <slot></slot>
      <div slot="content">
        <slot name="title"></slot>
      </div>
    </y-tooltip>
    <template v-else>
      <slot></slot>
      <slot name="title"></slot>
    </template>

  </li>
</template>
<script>
  import emitter from 'yt-ui/src/mixins/emitter'
  import {removeClass, addClass} from 'yt-ui/src/utils/dom'

  export default {
    name: "YMenuItem",
    mixins: [emitter],
    props: {
      name: {type: String, required: true}
    },
    data() {
      return {
        active: false,
        isPopupMenu:false,
        parentMenu: this.rootMenu
      };
    },
    inject: ['rootMenu'],
    computed: {
      classes() {
        return [
          "k-menu-item",
          {
            ["k-menu-item-active"]: this.active
          }
        ];
      }
    },
    beforDistory() {
    },
    mounted() {
      this.active = this.getParent('YMenu').activeName == this.name
      this.$on('menu-item-update', this.update);
      this.isPopupMenu = this.getParent('YSubMenu') ? true:false;
    },
    methods: {
      update(name) {
        this.active = this.name == name
      },
      handle() {
        this.active = true;
        console.log(this.name)
        this.dispatch('YMenu', 'menu-select', this.name)
        this.dispatch('YSubMenu', 'menu-submenu-close', this)
        let submenu = this.$parent.$refs.submenu
        if (submenu) {
          // 重置样式
          if(this.$parent.$el.parentNode.classList.contains('k-menu-black')==true){
          	this.$parent.$el.parentNode.querySelectorAll('.k-menu-active').forEach(item => {
	            removeClass(item, 'k-menu-active')
	          })
	          this.$parent.$el.parentNode.querySelectorAll('.k-menu-title').forEach(item => {
	            item.style.color = ''
	          })
	           // 只给自己加样式
          	addClass(submenu, 'k-menu-active')
          }else if(this.$parent.$el.parentNode.classList.contains('k-menu-dark')==true){
          	
      			this.$parent.$el.parentNode.querySelectorAll('.k-menu-active').forEach(item => {
	            removeClass(item, 'k-menu-active')
	          })
	          this.$parent.$el.parentNode.querySelectorAll('.k-menu-active').forEach(item => {
	            item.style.color = ''
	            item.style.background = ''
	          })
	           // 只给自己加样式
//	          let subTitle = submenu.firstChild;
            addClass(submenu, 'k-menu-active')
          }
          
         
        }
      }
    }
  };
</script>
