<template>
  <n-button suffix-icon="drop-down" breadth="tight" :size="size" :disabled="disabled" :type="type" :active="nValue"
            @click="onClick" @mouseenter.native="onMouseenter" @mouseleave.native="onMouseleave">{{label}}</n-button>
</template>
<script>
import NButton from '@uif/next/lib/components/button'
import NOptions from '@uif/next/lib/components/options'
import { prop } from '@uif/next/lib/utils/tools'

export default {
  name: 'n-drop-menu',
  extends: NOptions,
  components: {
    NButton
  },
  props: {
    // 是否可见
    value: prop.boolean(),
    /**
     * button
     * **/
    // button label
    label: prop.string('操作选项'),
    // button type
    type: prop.string('default'),
    // button size
    size: prop.string('middle'),
    // 禁用
    disabled: prop.boolean(),
    // 延迟2分钟自动销毁
    autoDestroy: prop.boolean(true)
  },
  methods: {
    // 点击
    onOptionClick (option) {
      this.$emit('click', option)
      this.$emit('u-change', option)
      this.setNValue(false)
    }
  }
}
</script>
