<template>
  <el-popover
    v-bind="$props"
    v-model="innerValue"
    v-on="$listeners"
    :popper-class="innerPopperClass"
  >
    <template slot="reference">
      <slot name="reference"></slot>
    </template>
    <slot></slot>
  </el-popover>
</template>
<script>
import ElPopover from 'element-ui/lib/popover'
import 'element-ui/lib/theme-chalk/popover.css'

export default {
  name: 'UiPopover',
  props: Object.assign({}, ElPopover.props, {
    value: {
      type: Boolean,
      default: false
    },
    placement: {
      type: String,
      default: 'bottom'
    }
  }),
  components: {
    ElPopover
  },
  computed: {
    innerValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    innerPopperClass() {
      return ['ui-popover__wrap', this.popperClass].join(' ')
    }
  }
}
</script>
<style>
.ui-popover__wrap.el-popover{
  padding: 0;
  min-width: auto;
}
</style>
