<template>
  <view class="ml-tooltip" :class="[className || '', `placement-${placement || 'bottom'}`]">
    <view class="ml-tooltip-content" @click="toggleVisible">
      <slot></slot>
    </view>
    <view v-if="showTip" class="ml-tooltip-popup" :style="tipPopupStyles">
      <ml-tooltip-view :title="title" :placement="placement" width="100%" showClose @close="closeEvent"></ml-tooltip-view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'MlTooltip',
  options: {
    virtualHost: true
  },
  props: {
    value: Boolean,
    title: String,
    width: String,
    placement: String,
    trigger: String,
    className: String
  },
  data () {
    return {
      showTip: false,
      top: '',
      bottom: '',
      left: '',
      right: ''
    }
  },
  computed: {
    tipPopupStyles () {
      const topSys = this.top ? `top: ${this.top};` : ''
      const bottomSys = this.bottom ? `bottom: ${this.bottom};` : ''
      const leftSys = this.left ? `left: ${this.left};` : ''
      const rightSys = this.right ? `right: ${this.right};` : ''
      const wSys = this.width ? `width: ${this.width};` : ''
      return `${topSys}${bottomSys}${leftSys}${rightSys}${wSys}`
    }
  },
  watch: {
    value (value) {
      this.showTip = value
    }
  },
  created () {
    this.showTip = this.value
    this.updateStyle()
  },
  methods: {
    open () {
      this.top = ''
      this.bottom = ''
      this.left = ''
      this.right = ''
      const value = true
      this.showTip = value
      this.updateStyle()
      this.$emit('input', value)
    },
    close () {
      const value = false
      this.showTip = value
      this.$emit('input', value)
    },
    updateStyle () {
      if (['top-start', 'bottom-start'].includes(this.placement)) {
        this.left = '0'
      }
      if (['top-end', 'bottom-end'].includes(this.placement)) {
        this.right = '0'
      }
    },
    toggleVisible () {
      if (!this.trigger || ['tap', 'click'].includes(this.trigger)) {
        if (this.showTip) {
          this.close()
        } else {
          this.open()
        }
      }
    },
    closeEvent () {
      this.close()
    }
  }
}
</script>

<style lang="scss">
.ml-tooltip {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  .ml-tooltip-content {
    display: inline-block;
    vertical-align: middle;
  }
  &.placement-bottom,
  &.placement-top {
    .ml-tooltip-popup {
      left: 50%;
      transform: translateX(-50%);
    }
  }
  &.placement-bottom-start,
  &.placement-top-start {
    .ml-tooltip-popup {
      text-align: left;
    }
  }
  &.placement-bottom-end,
  &.placement-top-end {
    .ml-tooltip-popup {
      text-align: right;
    }
  }
  &.placement-bottom,
  &.placement-bottom-start,
  &.placement-bottom-end {
    .ml-tooltip-popup {
      top: 100%;
    }
  }
  &.placement-top,
  &.placement-top-start,
  &.placement-top-end {
    .ml-tooltip-popup {
      bottom: 100%;
    }
  }
}
.ml-tooltip-popup {
  position: absolute;
  z-index: 900;
  width: 80vw;
  padding: 15rpx 0;
  pointer-events: none;
}
</style>
