<template>
  <div :class="[componentClass, expandTriggerClass, getOrientation, { 'c-clicked': isClicked, 'c-mouse-enter':mouseEnter }]"
    @focusout="componentFocusout"
    @focusin="componentFocusin"
    @click="componentClick"
    @mouseenter="mouseEnter= expandTrigger === 'mouseOver' ? true : false"
    @mouseleave="mouseEnter=false"
    tabindex="0"
  >
    <div class="c-header" 
      @click.stop="onClick"
    >
      <slot name="header"></slot>
    </div>
    <div class="c-content"  
    >
      <slot name="content"></slot>
    </div>
  </div>
</template>

<script>
const props = {
  expandTrigger: {
    type: String,
    default: "mouseOver"
  },
  closeKind: {
    type: String,
    default: "none"
  },
  orientation: {
    type: String,
    default: "vertical",
    validator: function (value) { return ['vertical', 'horizontal'].indexOf(value) !== -1 }
  }
}
import base from './c-base'

export default {
  extends: base,
  data: function () {
    return {
      componentClass: 'c-exp',
      isClicked:false,
      contentFocusTimer: null,
      contentFocusTimeout: 50,
      mouseEnter: false
    }
  },
  props,
  computed: {
    expandTriggerClass: function () {
      return this.expandTrigger
    },
    getOrientation: function () {
      return ("c-" + this.orientation)
    }
  },
  methods:{
    onClick: function(){
      if (this.expandTrigger !== "onClick")
        return
      this.isClicked = !this.isClicked
    },
    componentFocusout: function() {
      if (this.closeKind !== 'clickOutside')
        return
      this.contentFocusTimer = setTimeout(() => this.isClicked = false, this.contentFocusTimeout)
    },
    componentFocusin: function(){
      if (this.closeKind !== 'clickOutside')
        return
      clearTimeout(this.contentFocusTimer)
    },
    componentClick: function(){
      if (this.expandTrigger !== "onClick")
        return
      clearTimeout(this.contentFocusTimer)
      this.isClicked = true
    }
  }
}</script>

