<template>
  <a-popover :placement="placement" overlayClassName="popover-with-icon" v-model="innerVisible">
    <div class="pop-over-with-icon">
      <span class="text">
        <slot />
      </span>
      <img src="@/assets/images/global/select-down.png" alt="" />
    </div>
    <template slot="content">
      <slot name="content" />
    </template>
  </a-popover>
</template>
<script>
export default {
  props: {
    placement: {
      type: String,
      default: 'bottom'
    },
    value: {
      type: Boolean
    }
  },
  data() {
    return {
      innerVisible: false
    }
  },
  watch: {
    value: {
      handler(val) {
        this.innerVisible = val
      },
      immediate: true
    },
    innerVisible(val) {
      this.$emit('input', val)
    }
  }
}
</script>
