<template>
  <div class="para-help">
    <popover
      :title="title"
      :trigger="trigger"
      :arrowPointAtCenter="arrowPointAtCenter"
      :defaultVisible="defaultVisible"
      :autoAdjustOverflow="autoAdjustOverflow"
      :getPopupContainer="getPopupContainer"
      :mouseEnterDelay="mouseEnterDelay"
      :mouseLeaveDelay="mouseLeaveDelay"
      :overlayClassName="overlayClassName"
      :overlayStyle="overlayStyle"
      :placement="placement"
      :destroyTooltipOnHide="destroyTooltipOnHide"
      :align="align"
    >
      <div slot="content">
        <slot></slot>
      </div>
      <Button
        class="icon-button"
        :class="btnClass"
        :icon="btnIcon"
        :disabled="btnDisabled"
        :ghost="btnGhost"
        :htmlType="btnHtmlType"
        :loading="btnLoading"
        :shape="btnShape"
        :size="btnSize"
        :type="btnType"
        :block="btnBlock"
      >{{buttonText}}
      </Button>
    </popover>
  </div>
</template>

<script>
  import {Popover, Button} from 'ant-design-vue';

  export default {
    name: 'paraHelp',
    components: {
      Popover,
      Button
    },
    props: {
      buttonText: {
        type: String,
        default: ''
      },
      btnClass: {
        type: String
      },
      btnIcon: {
        type: String,
        default: 'question-circle'
      },
      btnDisabled: {
        type: Boolean,
        default: false
      },
      btnGhost: {
        type: Boolean,
        default: false
      },
      btnHtmlType: {
        type: String,
        default: 'button'
      },
      btnLoading: {
        type: Boolean,
        default: false
      },
      btnShape: {
        type: String
      },
      btnSize: {
        type: String,
        default: 'default'
      },
      btnType: {
        type: String
      },
      btnBlock: {
        type: Boolean,
        default: false
      },


      trigger: {
        type: String,
        default: 'hover',
        require: ''
      },
      title: {
        type: String,
        require: true
      },
      content: {
        type: String,
        default: ''
      },
      arrowPointAtCenter: {
        type: Boolean,
        default: false
      },
      autoAdjustOverflow: {
        type: Boolean,
        default: false
      },
      defaultVisible: {
        type: Boolean,
        default: false
      },
      getPopupContainer: {
        type: Function,
        default: () => document.body
      },
      mouseEnterDelay: {
        type: Number,
        default: 0
      },
      mouseLeaveDelay: {
        type: Number,
        default: 0.1
      },
      overlayClassName: {
        type: String,
        default: ''
      },
      overlayStyle: {
        type: Object,
        default: () => ({})
      },
      placement: {
        type: String,
        default: 'top'
      },
      destroyTooltipOnHide: {
        type: Boolean,
        default: false
      },
      align: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        /* lang, */
      };
    },
    mounted() {
    },
    methods: {
      show(event) {
        this.emit('show', event);
      },
      hide(event) {
        this.emit('hide', event);
      },
      afterEnter(event) {
        this.emit('after-enter', event);
      },
      afterLeave(event) {
        this.emit('after-leave', event);
      },
      emit(type, e) {
        this.$emit(type, e);
      }
    },
    watch: {}
  };
</script>
