<template>
  <li :class="classes" @mouseover="openMenu" @mouseout="closeMenu" ref="submenu">
    <div class="k-menu-title" @click.stop="accordion">
      <slot name="title"></slot>
      <i class="icon-arrow_down_small icon-arrow"></i>
    </div>
    <Collapse>
      <ul :class="popupClass" v-show="visible" @mouseover="light" @mouseout="dark">
        <slot></slot>
      </ul>
    </Collapse>
  </li>
</template>
<script>
import Collapse from '../collapse/collapse.js'
import emitter from 'yt-ui/src/mixins/emitter'
export default {
  name: "YSubMenu",
  mixins: [emitter],
  components: { Collapse },
  props: {
    name: { type: String, required: true }
  },
  inject: ['rootMenu'],
  data() {
    return {
      active: false,
      visible: false,
      height: 0,
      hideTime: null,
      rootMenu: this.getParent("YMenu"),
    };
  },
  computed: {
    classes() {
      return [
        "k-menu-submenu",
        {
          ["k-menu-item-active"]: this.active,
          ["k-menu-item-opened"]: this.visible
        }
      ];
    },
    popupClass(){
      return [
        "k-menu-dropdown",
        {
          ["k-menu--popupmenu"]:this.rootMenu.collapse
        }
      ]
    }
  },
  mounted() {
    this.visible = this.rootMenu.openIndex == this.name && this.rootMenu.mode != 'horizontal'
    this.$on('menu-submenu-update', this.update)
    this.$on('menu-submenu-close', this.close)
  },
  methods: {
    close(ele) {
    	//菜单
    	if(ele.name.indexOf(this.name) == -1 && this.visible == true ){
    		this.visible = false;
    	}
      if (this.rootMenu.mode == "vertical") return;
//    this.visible = false;
      let childs = this.getChilds(this, 'YMenuItem')
      this.active = childs.filter(c => c.active).length > 0
    },
    update(ele) {
      if (ele.name != this.name && this.visible) {
        //其他的折叠
        this.visible = !this.visible
      }
    },
    accordion() {
      this.visible = !this.visible
      this.dispatch('YMenu', 'menu-accordion', this.name)
    },
    openMenu() {
      if (this.rootMenu.mode == "vertical" && !this.rootMenu.collapse) return;
      this.$nextTick(() => this.visible = true)
    },
    closeMenu() {
      if (this.rootMenu.mode == "vertical" && !this.rootMenu.collapse) return;
      this.$nextTick(() => this.visible = false)
    },
    light(event,flag){
    if(flag == 1){
//       console.log(event.classList)
//  	    if(elParent.classList.contains('k-menu-black')==true){
//     		// event.classList = 
// //  	}
    }else{
    	let el = event.target.parentNode.parentNode;
    	let elParent = el.parentNode;
    	if(elParent.classList.contains('k-menu-black')==true){
    		el.firstChild.style.color = '#fff';
    	}
    }
//  	let el = event.target.parentNode.parentNode;
//  	let elParent = el.parentNode;
//  	if(elParent.classList.contains('k-menu-black')==true){
//  		el.firstChild.style.color = '#fff';
//  	}
//  	else if(elParent.classList.contains('k-menu-dark')==true){
//  		el.firstChild.style.color = '#fff';
//  		el.firstChild.style.background = '#3c99fc';
//  	}
    },
    dark(event,ele){
    	let el = event.target.parentNode.parentNode;
    	let elParent = el.parentNode;
    	if(elParent.classList.contains('k-menu-black')==true && !el.classList.contains('k-menu-active')){
    		el.firstChild.style.color = 'rgba(255, 255, 255, 0.4)';
    	}
//  	else if(elParent.classList.contains('k-menu-dark')==true){
//  		el.firstChild.style.background = '#212B36';
//  		el.firstChild.style.color = 'rgba(255, 255, 255, 0.87)';
//  	}
    }
  }
};
</script>
