<template>
  <!-- 树结构状态下拉列表 -->
  <ul class="xb-select-group__wrap" v-show="visible">
    <!-- 树结构状态下拉列表 主干 -->
    <li class="xb-select-group__title" @click="handleFold">
      <i :class="['xb_icon_down_facet',isReverse]"></i>
      {{ label }}
    </li>
    <!-- 树结构状态下拉列表 枝干 -->
    <li v-show="!isFold">
      <ul class="xb-select-group">
        <slot></slot>
      </ul>
    </li>
  </ul>
</template>

<script type="text/babel">
import Emitter from 'xinbao-ui/src/mixins/emitter';

export default {
  mixins: [Emitter],

  name: 'XbOptionGroup',

  componentName: 'XbOptionGroup',

  props: {
    label: String,
    disabled: {
      type: Boolean,
      default: false
    },
    fold: {
      type: Boolean,
      default: true
    }
  },

  data() {
    return {
      visible: true,
      isFold: this.fold
    };
  },

  computed: {
    isReverse() {
      return !this.isFold ? '' : 'is-reverse';
    }
  },

  watch: {
    disabled(val) {
      this.broadcast('XbOption', 'handleGroupDisabled', val);
    }
  },

  methods: {
    queryChange() {
      this.visible = this.$children &&
        Array.isArray(this.$children) &&
        this.$children.some(option => option.visible === true);
    },
    handleFold() {
      this.isFold = !this.isFold;
    }
  },

  created() {
    this.$on('queryChange', this.queryChange);
  },

  mounted() {
    if (this.disabled) {
      this.broadcast('XbOption', 'handleGroupDisabled', this.disabled);
    }
  }
};
</script>
