<template>
  <div :class="[wrapperClass, {'is-sub-menu-close': !show}]">
    <item :value="value" :icon="icons" :label="label" :right-icon="rightIcon" @click="setShow"></item>
    <div v-show="show" class="sub-mune-box">
      <slot></slot>
    </div>
  </div>
</template>
<script>
import { LIB_NAME } from '../../../../src/util'
import item from './menuItem'
const wrapperClass = `${LIB_NAME}-sub-menu`

export default {
  name: 'xSubMenu',
  components: { item },
  props: {
    value: [String, Number], // eslint-disable-line

    label: { // eslint-disable-line
      type: String
    },

    // 是否支持展开收起
    isCollapsed: {
      type: Boolean,
      default: true
    },

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

    icon: { // eslint-disable-line
      type: String
    },

    // 展开后图标
    openIcon: {
      type: String,
      default: ''
    },

    rightIcon: {
      type: String,
      default() {
        return this.value && this.isCollapsed ? '' : 'ans-icon-arrow-up'
      }
    }
  },
  data() {
    return {
      wrapperClass,

      // 是否展开
      show: true
    }
  },
  computed: {
    icons() {
      if (this.value || !this.isCollapsed) {
        return this.icon
      }
      return this.show ? (this.openIcon || this.icon) : this.icon
    }
  },
  watch: {
    open(v) {
      if (v !== this.show) {
        this.show = v
      }
    }
  },
  created() {
    this.show = this.open
  },
  methods: {
    setShow(v) {
      if (!v && this.isCollapsed) {
        this.show = !this.show
        this.show ? this.$emit('on-open') : this.$emit('on-close')
      }
    }
  }
}
</script>
