<template>
  <div
    v-if='show'
    :class='{"fixed safe-area-fixed-top": fixed}'
    class='c-tip'
    @click.stop.prevent='emptyFunc'
  >
    <div class='c-tip-cnt'>
      <div class='tip-text'><slot/></div>
      <i
        class='icon icon-close'
        @click='handleClickClose'
      />
    </div>
  </div>
</template>

<script>
import { setCache, getCache } from 'src/util'

export default {
  props: {
    id: {
      type: String,
      default: '',
    },
    fixed: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      show: false,
    }
  },

  computed: {
    cacheKey() {
      return 'hide-tip-' + this.id
    },
  },

  mounted() {
    if (this.id) {
      getCache(this.cacheKey)
        .then(flag => {
          this.show = !flag
        })
        .catch(() => {
          this.show = true
        })
    } else {
      this.show = true
    }
  },

  methods: {
    emptyFunc() {},

    handleClickClose() {
      setCache(this.cacheKey, true)
      this.show = false
    },
  },
}
</script>

<style lang="postcss">
.c-tip {
  position: absolute;
  padding-top: 12px;
  white-space: nowrap;
  z-index: 10;

  $black: rgba(0, 0, 0, 0.6);

  &-cnt {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 30px;
    height: 70px;
    border-radius: 6px;
    background-color: $black;

    &::before {
      content: ' ';
      display: block;
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      border-bottom: solid 12px $black;
      border-left: solid 12px transparent;
      border-right: solid 12px transparent;
    }
  }

  .tip-text {
    color: white;
    font-size: 28px;
    line-height: 1;
  }

  .icon-close {
    font-size: 20px;
    line-height: 1;
    margin-left: 16px;
    color: rgba(255, 255, 255, 0.5);
  }

  &.fixed {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
