<template>
  <div :ref="uuid"
       :class="['ipub-tooltip']"
       @click.stop
       @click="changeHoverClick()"
       @mouseenter="changeHover(true)"
       @mouseleave="changeHover(false)">
    <div v-if="hover"
         :class="['ipub-tooltip__content', 'ipub-tooltip--'+placement, 'ipub-tooltip--'+type]"
         :style="style">
      <div v-if="omis">
        {{label}}
      </div>
      <div v-else>
        <slot name="title"></slot>
      </div>
    </div>
    <template v-if="omis">
      <div :class="omis">{{label}}</div>
    </template>
    <template v-else>
      <slot></slot>
    </template>
  </div>
</template>

<script>
import { guid } from '../../../src/utils/utils'
export default {
  name: 'IpubTooltip',
  props: {
    placement: {
      type: String,
      default: 'bottomLeft',
      validator (val) {
        return ['top', 'left', 'right', 'bottom', 'topLeft', 'topRight', 'leftTop', 'leftBottom', 'bottomLeft', 'bottomRight', 'rightTop', 'rightBottom'].indexOf(val) !== -1
      }
    },
    omis: {
      type: String,
      default: '',
      validator (val) {
        return ['', 'omis', 'omission'].indexOf(val) !== -1
      }
    },
    label: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'light',
      validator (val) {
        return ['dark', 'light'].indexOf(val) !== -1
      }
    },
    action: {
      type: String,
      default: 'hover',
      validator (val) {
        return ['hover', 'click'].indexOf(val) !== -1
      }
    }
  },
  data () {
    return {
      uuid: '',
      hover: false,
      style: {
        position: 'fixed',
        maxWidth: '400px'
      }
    }
  },
  watch: {
    width: {
      handler (val) {
        this.style.maxWidth = val
      },
      immediate: true
    }
  },
  mounted () {
    this.uuid = guid()
    window.addEventListener('scroll', () => {
      this.hover = false
      document.removeEventListener('click', this.fun)
    },
      true
    )
  },
  methods: {
    async changeHoverClick () {
      if (this.action === 'hover') {
        return
      }
      this.hover = !this.hover
      if (this.hover) {
        this.handlerHover(true)
        document.addEventListener('click', this.fun)
      } else {
        document.removeEventListener('click', this.fun)
      }
    },
    async changeHover (val) {
      if (this.action === 'click') {
        return
      }
      this.hover = val
      this.handlerHover(val)
    },
    handlerHover (val) {
      if (val) {
        const el = this.$refs[this.uuid]
        const sty = el.getBoundingClientRect() || {}
        this.style = { position: 'fixed', maxWidth: this.width }

        const W = window.innerWidth
        // const H = window.innerHeight

        switch (this.placement) {
          case 'top':
            this.$set(this.style, 'left', (sty.left + sty.right) / 2 + 'px')
            this.$set(this.style, 'top', sty.top + 'px')
            break
          case 'left':
            this.$set(this.style, 'left', sty.left - 10 + 'px')
            this.$set(this.style, 'top', (sty.top + sty.bottom) / 2 + 'px')
            break
          case 'right':
            this.$set(this.style, 'left', sty.right + 'px')
            this.$set(this.style, 'top', (sty.top + sty.bottom) / 2 + 'px')
            break
          case 'bottom':
            this.$set(this.style, 'left', (sty.left + sty.right) / 2 + 'px')
            this.$set(this.style, 'top', sty.bottom + 'px')
            break
          case 'topLeft':
            this.$set(this.style, 'left', sty.left - 10 + 'px')
            this.$set(this.style, 'top', sty.top + 'px')
            break
          case 'topRight':
            this.$set(this.style, 'left', sty.right + 10 + 'px')
            this.$set(this.style, 'top', sty.top + 'px')
            break
          case 'leftTop':
            this.$set(this.style, 'left', sty.left + 'px')
            this.$set(this.style, 'top', sty.top - 10 + 'px')
            break
          case 'leftBottom':
            this.$set(this.style, 'left', sty.left + 'px')
            this.$set(this.style, 'top', sty.bottom + 10 + 'px')
            break
          case 'bottomLeft':
            this.$set(this.style, 'left', sty.left - 10 + 'px')
            // this.$set(this.style, 'top', sty.bottom + 10 + 'px')
            this.$set(this.style, 'top', sty.bottom + 'px')
            break
          case 'bottomRight':
            this.$set(this.style, 'right', W - sty.right - 10 + 'px')
            // this.$set(this.style, 'top', sty.bottom + 10 + 'px')
            this.$set(this.style, 'top', sty.bottom + 'px')
            break
          case 'rightTop':
            this.$set(this.style, 'left', sty.right + 'px')
            this.$set(this.style, 'top', sty.top - 10 + 'px')
            // this.$set(this.style, 'top', sty.top + 'px')
            break
          case 'rightBottom':
            this.$set(this.style, 'left', sty.right + 'px')
            this.$set(this.style, 'top', sty.bottom + 10 + 'px')
            // this.$set(this.style, 'top', sty.bottom + 'px')
            break
        }
      }
    },
    fun () {
      this.hover = false
      document.removeEventListener('click', this.fun)
    }
  }
}
</script>

<style lang="scss">
.ipub-tooltip {
  display: inline-block;
  position: relative;
  &__content {
    display: block;
    border-radius: 4px;
    padding: 10px;
    position: absolute;
    font-size: 14px;
    color: $font_color;
    font-weight: 400;
    width: max-content;
    z-index: 999;
    max-width: 400px;
    > div {
      padding: 6px 16px;
      border-radius: 2px;
      border: 1px solid $main-color;
      // @include ipub-shadow;
      box-sizing: border-box;
      background: $content_color;
      position: relative;
      &::before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
      }
      &::after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
      }
    }
  }
  &--dark {
    > div {
      background: $main_color;
      color: #fff;
    }
    &.ipub-tooltip--top,
    &.ipub-tooltip--topLeft,
    &.ipub-tooltip--topRight {
      > div {
        &::after {
          border-top: 10px solid $main_color;
        }
      }
    }
    &.ipub-tooltip--bottom,
    &.ipub-tooltip--bottomLeft,
    &.ipub-tooltip--bottomRight {
      > div {
        &::after {
          border-bottom: 10px solid $main_color;
        }
      }
    }
    &.ipub-tooltip--left,
    &.ipub-tooltip--leftTop,
    &.ipub-tooltip--leftBottom {
      > div {
        &::after {
          border-left: 10px solid $main_color;
        }
      }
    }
    &.ipub-tooltip--right,
    &.ipub-tooltip--rightTop,
    &.ipub-tooltip--rightBottom {
      > div {
        &::after {
          border-right: 10px solid $main_color;
        }
      }
    }
  }
  &--top {
    transform: translateY(-100%) translateX(-50%);
    > div {
      &::before {
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 10px solid $main_color;
        border-bottom: 10px solid transparent;
        left: calc(50% - 5px);
        bottom: -20px;
      }
      &::after {
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 10px solid $content_color;
        border-bottom: 10px solid transparent;
        left: calc(50% - 5px);
        bottom: -18px;
      }
    }
    &Left {
      transform: translateY(-100%);
      > div {
        &::before {
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          border-top: 10px solid $main_color;
          border-bottom: 10px solid transparent;
          left: 20px;
          bottom: -20px;
        }
        &::after {
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          border-top: 10px solid $content_color;
          border-bottom: 10px solid transparent;
          left: 20px;
          bottom: -18px;
        }
      }
    }
    &Right {
      transform: translateX(-100%) translateY(-100%);
      > div {
        &::before {
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          border-top: 10px solid $main_color;
          border-bottom: 10px solid transparent;
          right: 20px;
          bottom: -20px;
        }
        &::after {
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          border-top: 10px solid $content_color;
          border-bottom: 10px solid transparent;
          right: 20px;
          bottom: -18px;
        }
      }
    }
  }
  &--bottom {
    transform: translateX(-50%);
    > div {
      &::before {
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 10px solid transparent;
        border-bottom: 10px solid $main_color;
        left: calc(50% - 3px);
        top: -20px;
      }
      &::after {
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 10px solid transparent;
        border-bottom: 10px solid $content_color;
        left: calc(50% - 3px);
        top: -18px;
      }
    }
    &Left {
      > div {
        &::before {
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          border-top: 10px solid transparent;
          border-bottom: 10px solid $main_color;
          left: 20px;
          top: -20px;
        }
        &::after {
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          border-top: 10px solid transparent;
          border-bottom: 10px solid $content_color;
          left: 20px;
          top: -18px;
        }
      }
    }
    &Right {
      > div {
        &::before {
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          border-top: 10px solid transparent;
          border-bottom: 10px solid $main_color;
          right: 20px;
          top: -20px;
        }
        &::after {
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          border-top: 10px solid transparent;
          border-bottom: 10px solid $content_color;
          right: 20px;
          top: -18px;
        }
      }
    }
  }
  &--left {
    transform: translateX(-100%) translateY(-50%);
    > div {
      &::before {
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 10px solid $main_color;
        border-right: 10px solid transparent;
        top: calc(50% - 3px);
        right: -20px;
      }
      &::after {
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 10px solid $content_color;
        border-right: 10px solid transparent;
        top: calc(50% - 3px);
        right: -18px;
      }
    }
    &Top {
      transform: translateX(-100%);
      > div {
        &::before {
          border-top: 5px solid transparent;
          border-bottom: 5px solid transparent;
          border-left: 10px solid $main_color;
          border-right: 10px solid transparent;
          top: 10px;
          right: -20px;
        }
        &::after {
          border-top: 5px solid transparent;
          border-bottom: 5px solid transparent;
          border-left: 10px solid $content_color;
          border-right: 10px solid transparent;
          top: 10px;
          right: -18px;
        }
      }
    }
    &Bottom {
      transform: translateX(-100%) translateY(-100%);
      > div {
        &::before {
          border-top: 5px solid transparent;
          border-bottom: 5px solid transparent;
          border-left: 10px solid $main_color;
          border-right: 10px solid transparent;
          bottom: 10px;
          right: -20px;
        }
        &::after {
          border-top: 5px solid transparent;
          border-bottom: 5px solid transparent;
          border-left: 10px solid $content_color;
          border-right: 10px solid transparent;
          bottom: 10px;
          right: -18px;
        }
      }
    }
  }
  &--right {
    transform: translateY(-50%);
    > div {
      &::before {
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 10px solid transparent;
        border-right: 10px solid $main_color;
        top: calc(50% - 3px);
        left: -20px;
      }
      &::after {
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 10px solid transparent;
        border-right: 10px solid $content_color;
        top: calc(50% - 3px);
        left: -18px;
      }
    }
    &Top {
      > div {
        &::before {
          border-top: 5px solid transparent;
          border-bottom: 5px solid transparent;
          border-left: 10px solid transparent;
          border-right: 10px solid $main_color;
          top: 10px;
          left: -20px;
        }
        &::after {
          border-top: 5px solid transparent;
          border-bottom: 5px solid transparent;
          border-left: 10px solid transparent;
          border-right: 10px solid $content_color;
          top: 10px;
          left: -18px;
        }
      }
    }
    &Bottom {
      transform: translateY(-100%);
      > div {
        &::before {
          border-top: 5px solid transparent;
          border-bottom: 5px solid transparent;
          border-left: 10px solid transparent;
          border-right: 10px solid $main_color;
          bottom: 10px;
          left: -20px;
        }
        &::after {
          border-top: 5px solid transparent;
          border-bottom: 5px solid transparent;
          border-left: 10px solid transparent;
          border-right: 10px solid $content_color;
          bottom: 10px;
          left: -18px;
        }
      }
    }
  }
}
</style>
