<template>
  <view class="ml-tooltip-view" :class="[className || '', `placement-${placement || 'bottom'}`, {'show-close': showClose}]" :style="tipStyles">
    <view class="ml-tooltip-warpper">
      <view class="ml-tooltip-title">
        <slow name="title">
          <text>{{ title }}</text>
        </slow>
      </view>
      <view v-if="showClose" class="ml-tooltip-close-btn" @tap="closeEvent">
        <ml-icon name="close" />
      </view>
      <view class="ml-tooltip-arrows">
        <ml-icon v-if="placement === 'bottom-start'" name="arrow-up-filling" />
        <ml-icon v-else-if="placement === 'bottom'" name="arrow-up-filling" />
        <ml-icon v-else-if="placement === 'bottom-end'" name="arrow-up-filling" />
        <ml-icon v-else-if="placement === 'top-start'" name="arrow-down-filling" />
        <ml-icon v-else-if="placement === 'top'" name="arrow-down-filling" />
        <ml-icon v-else-if="placement === 'top-end'" name="arrow-down-filling" />
        <ml-icon v-else-if="placement === 'right-start'" name="arrow-left-filling" />
        <ml-icon v-else-if="placement === 'right'" name="arrow-left-filling" />
        <ml-icon v-else-if="placement === 'right-end'" name="arrow-left-filling" />
        <ml-icon v-else-if="placement === 'left-start'" name="arrow-right-filling" />
        <ml-icon v-else-if="placement === 'left'" name="arrow-right-filling" />
        <ml-icon v-else-if="placement === 'left-end'" name="arrow-right-filling" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'MlTooltipView',
  props: {
    title: String,
    width: String,
    position: String,
    top: String,
    left: String,
    bottom: String,
    right: String,
    showClose: Boolean,
    placement: String,
    className: String
  },
  computed: {
    tipStyles () {
      const posSys = this.position ? `position: ${this.position};` : ''
      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 `${posSys}${topSys}${bottomSys}${leftSys}${rightSys}${wSys}`
    }
  },
  methods: {
    closeEvent () {
      this.$emit('close', {})
    }
  }
}
</script>

<style lang="scss">
.ml-tooltip-view {
  position: relative;
  z-index: 900;
  width: 80vw;
  pointer-events: none;
  .ml-tooltip-warpper {
    position: relative;
    display: inline-block;
    color: #FFFFFF;
    white-space: nowrap;
    text-align: left;
    pointer-events: auto;
    padding: $ml-page-interval-margin 24rpx;
    background-color: rgba(69, 72, 74, 0.9);
    border-radius: $ml-border-radius;
  }
  .ml-tooltip-title {
    white-space: pre-wrap;
  }
  .ml-tooltip-arrows {
    position: absolute;
    color: rgba(69, 72, 74, 0.9);
    font-size: 32rpx;
  }
  .ml-tooltip-close-btn {
    position: absolute;
    width: 40rpx;
    height: 40rpx;
    line-height: 40rpx;
    color: #ffffff;
    text-align: center;
    font-size: 32rpx;
  }
  &.show-close {
    &.placement-top,
    &.placement-top-start,
    &.placement-top-end,
    &.placement-bottom,
    &.placement-bottom-start,
    &.placement-bottom-end {
      .ml-tooltip-warpper {
        padding-right: 60rpx;
      }
      .ml-tooltip-close-btn {
        right: 10rpx;
        top: 10rpx;
      }
    }
  }
  &.placement-bottom,
  &.placement-bottom-start,
  &.placement-bottom-end {
    .ml-tooltip-title {
      top: calc(100% + 20rpx);
    }
    .ml-tooltip-arrows {
      top: -22rpx;
    }
  }
  &.placement-bottom-start {
    .ml-tooltip-arrows {
      left: 10rpx;
    }
  }
  &.placement-bottom {
    .ml-tooltip-arrows {
      left: 50%;
      transform: translateX(-50%);
    }
  }
  &.placement-bottom-end {
    .ml-tooltip-arrows {
      right: 10rpx;
    }
  }
  &.placement-top,
  &.placement-top-start,
  &.placement-top-end {
    .ml-tooltip-title {
      bottom: calc(100% + 20rpx);
    }
    .ml-tooltip-arrows {
      bottom: -22rpx;
    }
  }
  &.placement-top-start {
    .ml-tooltip-arrows {
      left: 10rpx;
    }
  }
  &.placement-top {
    .ml-tooltip-arrows {
      left: 50%;
      transform: translateX(-50%);
    }
  }
  &.placement-top-end {
    .ml-tooltip-arrows {
      right: 10rpx;
    }
  }
  &.placement-left {
    .ml-tooltip-title {
      top: 0;
      right: calc(100% + 20rpx);
    }
    .ml-tooltip-arrows {
      right: -20rpx;
      top: 10rpx;
    }
  }
  &.placement-right {
    .ml-tooltip-title {
      top: 0;
      left: calc(100% + 20rpx);
    }
    .ml-tooltip-arrows {
      left: -20rpx;
      top: 10rpx;
    }
  }
}
</style>
