<template>
  <u-mask :show="visible" @click="handleClick" :zoom="false">
    <view class="tip-view" :style="'margin-top:' + statusBarHeight + 'px'">
      <image
        class="tip-image"
        :src="imageUrl"
        :style="imageStyle"
        mode="widthFix"
      ></image>
    </view>
  </u-mask>
</template>

<script>
/**
 * @description 创建一个遮罩层，提示图片
 * @property {Boolean} show 是否显示遮罩（默认false）
 * @property {Object} imageName 图片地址名
 * @property {Object} imageStyle 自定义样式对象
 * @example <mask-tip :show="show"></mask-tip>
 */
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    imageName: {
      type: String,
      default: ''
    },
    imageStyle: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    timeout: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      statusBarHeight: 20,
      visible: false
    }
  },
  watch: {
    show(val) {
      if (!val) return
      let value = this.vuex_not_first
      if (!value[this.name]) {
        uni.getSystemInfo({
          success: (res) => {
            this.statusBarHeight = res.statusBarHeight
              setTimeout(() => {
                this.visible = true
              }, this.time)
          },
        })
        value[this.name] = true
        this.$u.vuex('vuex_not_first', value)
      }
    }
  },
  computed: {
    imageUrl() {
      return process.uniEnv.qn_base_url + this.imageName
    },
    time() {
      return this.timeout ? 1500 : 0
    }
  },
  methods: {
    handleClick() {
      this.visible = false
      this.$emit('click')
    },
  },
}
</script>

<style lang="scss" scoped>
.tip-view {
}
</style>
