<template>
  <view
    v-if="show"
    class="mask"
    :style="{ backgroundColor: backgroundColor }"
    @click="toggleMask"
    @touchmove.stop.prevent="stopPrevent"
  >
    <view
      class="mask-content"
      :style="[
        {
          height: config.height,
          transform: transform
        }
      ]"
      @click.stop.prevent="stopPrevent"
    >
      <scroll-view class="view-content" scroll-y>
        <view class="share-header">
          分享至
        </view>
        <view class="share-list">
          <view
            v-for="(item, index) in shareList"
            :key="index"
            class="share-item"
            @click="shareToFriend(item.text)"
          >
            <image :src="item.icon" mode="" />
            <text>{{ item.text }}</text>
          </view>
        </view>
      </scroll-view>
      <view class="bottom b-t" @click="toggleMask">取消</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    contentHeight: {
      type: Number,
      default: 0
    },
    //是否是tabbar页面
    hasTabbar: {
      type: Boolean,
      default: false
    },
    shareList: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  data() {
    return {
      transform: "translateY(50vh)",
      timer: 0,
      backgroundColor: "rgba(0,0,0,0)",
      show: false,
      config: {}
    };
  },
  created() {
    const height = uni.upx2px(this.contentHeight) + "px";
    this.config = {
      height: height,
      transform: `translateY(${height})`,
      backgroundColor: "rgba(0,0,0,.4)"
    };
    this.transform = this.config.transform;
  },
  methods: {
    toggleMask() {
      console.log(this.shareList);
      //防止高频点击
      if (this.timer == 1) {
        return;
      }
      this.timer = 1;
      setTimeout(() => {
        this.timer = 0;
      }, 500);

      if (this.show) {
        this.transform = this.config.transform;
        this.backgroundColor = "rgba(0,0,0,0)";
        setTimeout(() => {
          this.show = false;
          this.hasTabbar && uni.showTabBar();
        }, 200);
        return;
      }

      this.show = true;
      //等待mask重绘完成执行
      if (this.hasTabbar) {
        uni.hideTabBar({
          success: () => {
            setTimeout(() => {
              this.backgroundColor = this.config.backgroundColor;
              this.transform = "translateY(0px)";
            }, 10);
          }
        });
      } else {
        setTimeout(() => {
          this.backgroundColor = this.config.backgroundColor;
          this.transform = "translateY(0px)";
        }, 10);
      }
    },
    //防止冒泡和滚动穿透
    stopPrevent() {},
    //分享操作
    shareToFriend(type) {
      console.loga("分享操作", type);
      this.$api.msg(`分享给${type}`);
      this.toggleMask();
    }
  }
};
</script>

<style lang="scss">
.mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 998;
  transition: 0.3s;
  .bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 90rpx;
    background: #fff;
    z-index: 9;
    font-size: $font-base + 2rpx;
    color: $font-color-dark;
  }
}

.mask-content {
  width: 100%;
  height: 580rpx;
  transition: 0.3s;
  background: #fff;
  &.has-bottom {
    padding-bottom: 90rpx;
  }
  .view-content {
    height: 100%;
  }
}
.share-header {
  height: 110rpx;
  font-size: $font-base + 2rpx;
  color: font-color-dark;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 10rpx;
  &:before,
  &:after {
    content: "";
    width: 240rpx;
    border-top: 1px solid $border-color-base;
    transform: scaleY(0.5);
    margin-right: 30rpx;
  }
  &:after {
    margin-left: 30rpx;
    margin-right: 0;
  }
}
.share-list {
  display: flex;
  flex-wrap: wrap;
}
.share-item {
  min-width: 33.33%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 180rpx;
  image {
    width: 80rpx;
    height: 80rpx;
    margin-bottom: 16rpx;
  }
  text {
    font-size: $font-base;
    color: $font-color-base;
  }
}
</style>
