<template>
  <div :class="[wrapperClass, {'is-group-close': !show}, {'is-group-active': isActive}]">
    <div :class="[wrapperClass + '-label']" @click="setShow()">
      <slot name="label">
        <div class="group-label-box">
          <span class="group-label-box-text">{{ label }}</span>
          <i class="ans-icon-arrow-up"></i>
          <div v-show="!show" class="group-describe">{{ describe }}</div>
        </div>
      </slot>
    </div>

    <div :class="[wrapperClass + '-box']">
      <slot></slot>
    </div>
  </div>
</template>
<script>
import { LIB_NAME, findComponentsDownward } from '../../../../src/util'
const wrapperClass = `${LIB_NAME}-menu-item-group`

export default {
  name: 'xMenuItemGroup',
  props: {

    // 分组的标题
    label: {
      type: String,
      default: ''
    },

    // 默认是否展开
    open: {
      type: Boolean,
      default: true
    },

    // 匹配规则
    rules: { // eslint-disable-line
      type: RegExp
    }
  },
  data() {
    return {
      wrapperClass,

      // 是否展开
      show: true,

      // 描述
      describe: '',

      // 当前选中的菜单是否在该分组下
      isActive: false
    }
  },

  created() {
    this.show = this.open
  },

  methods: {
    setShow() {
      this.show = !this.show
      if (!this.show && !this.describe) {
        const items = findComponentsDownward(this, 'xMenuItem')
        const arr = items.map(o => o.label)
        this.describe = arr.join('、')
      }
      this.show ? this.$emit('on-open') : this.$emit('on-close')
    }
  }
}
</script>
