<template>
  <a-popover :placement="placement" overlayClassName="popover-with-icon">
    <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'
    }
  }
}
</script>
<style lang="less" scoped>
.pop-over-with-icon {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #0a544e;
  height: 100%;
  padding: 0 11px;
  cursor: pointer;

  .text {
    font-family: MicrosoftYaHei;
    color: #ade6ee;
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
  }

  img {
    margin-left: 5px;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    flex-shrink: 0;
  }

  &.ant-popover-open {
    img {
      transform: rotate(180deg);
    }
  }
}
</style>
<style lang="less">
.popover-with-icon {
  .ant-popover-inner-content {
    padding: 8px;
  }
}
</style>
