import { NTooltip } from 'naive-ui'
import { defineComponent, PropType } from 'vue'
import styles from './index.module.less'

export default defineComponent({
  name: 'the-tooltip',
  props: {
    maxWidth: {
      type: Number,
      default: 300
    },
    showContentWidth: {
      type: Number,
      default: 120
    },
    tipsContent: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    },
    placement: {
      type: String as PropType<
        | 'top-start'
        | 'top'
        | 'top-end'
        | 'right-start'
        | 'right'
        | 'right-end'
        | 'bottom-start'
        | 'bottom'
        | 'bottom-end'
        | 'left-start'
        | 'left'
        | 'left-end'
      >,
      default: 'top'
    },
    showArrow: {
      type: Boolean,
      default: true
    },
    trigger: {
      type: String as PropType<'hover' | 'click'>,
      default: 'hover'
    }
  },
  setup(props) {
    return () => (
      <>
        <NTooltip
          style={{ maxWidth: props.maxWidth + 'px' }}
          trigger={props.trigger}
          placement={props.placement}
          showArrow={props.showArrow}
        >
          {{
            trigger: () => (
              <p
                style={{ maxWidth: props.showContentWidth + 'px' }}
                class={styles.showContentWidth}
              >
                {props.content}
              </p>
            ),
            default: () => props.tipsContent || props.content
          }}
        </NTooltip>
      </>
    )
  }
})
