<template>
  <n-paster ref="paster" :wrap="wrap" v-bind="{value, disabled, trigger, width, align, placement, contentProps}" @input="onInputChange">
    <slot></slot>
    <template #content>
      <slot name="content">
        <div class="n-tip-content">{{content}}</div>
      </slot>
    </template>
  </n-paster>
</template>
<script>
import NPaster from '@uif/next/lib/components/paster'
import {prop} from '@uif/next/lib/utils/tools'
import vModel from '_common/vModel'

export default {
  name: 'n-tip',
  components: {
    NPaster
  },
  mixins: [vModel],
  props: {
    // 类型
    type: prop.inArray(['normal', 'dark', 'info', 'none'], 'normal'),
    // 提示内容
    content: prop.stringNumber(),
    /**
     * paster
     * **/
    wrap: prop.string('n-tip'),
    // 显示状态
    value: prop.boolean(),
    // 禁用
    disabled: prop.boolean(),
    // 触发方式，可选值为click, hover
    trigger: prop.inArray(['click', 'hover'], 'click'),
    // 提示框宽度
    width: prop.stringNumber(),
    // 文本对齐
    align: prop.inArray(['left', 'center', 'right'], null, true),
    // 触发位置
    placement: prop.placement('top'),
    // 提示框class
    classes: prop.string()
  },
  computed: {
    contentProps ({type, classes}) {
      return { classes: ['n-paster-content', `n-tip-${type}`, classes] }
    }
  },
  methods: {
    onInputChange (value) {
      if (this.value !== value) {
        this.$emit('input', value)
        this.$emit('update:value', value)
      }
    }
  }
}
</script>
