<template>
  <div v-if="show" class="{{hide ? 'popup-container popup-container_hide' : 'popup-container popup-container_show'}}" @tap="hideMenu" >
    <div style="{{popupStyle}}" class="{{hide ? 'popup-wrapper popup-wrapper_hide': 'popup-wrapper popup-wrapper_show'}}">
      <div class="popup-item" v-for="item in menus" @tap.stop="goNextPage(item.path)">
        <image class="image" :src="item.img"></image>
        <span class="desc">{{item.title}}</span>
      </div>
      <div class="popup-item">
        <button class="help-button" open-type="contact"></button>
        <image class="image" src="/static/images/help@2x.png"></image>
        <span class="desc">问题反馈</span>
      </div>
    </div>
  </div>
</template>
<script>
  import wepy from '@wepy/core';

  wepy.component({
    props: {
      showMenus: {
        type: Boolean,
        default: false
      }
    },
    data: {
      menus: [
        { img: '/static/images/awards@2x.png', title: '我的抽奖', path: '/pages/myraffles' },
        { img: '/static/images/feedback@2x.png', title: '规则与帮助', path: '/pages/help' },
      ],
      show: false,
      popupStyle: ''
    },
    watch: {
      showMenus(v) {
        if (!v) {
          setTimeout(() => {
            this.show = false;
          }, 300);
        } else {
          this.show = true;
        }
      }
    },
    computed: {
      hide() {
        return !this.showMenus;
      }
    },
    methods: {
      hideMenu: function() {
        this.$emit('showMenu', false);
      },
      goNextPage: function(path) {
        this.$emit('showMenu', false);
        wx.navigateTo({
          url: path
        });
      }
    },
    created() {
      let statusHeight = this.$app.$options.globalData.statusBarHeight || '';
      statusHeight && (this.popupStyle = 'top:' + (statusHeight + 56) + 'px');
    }
  });
</script>
<style lang="less">
	.popup-container {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9;
    // animation: menuEnter .3s linear forwards;
    .popup-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 350rpx;
      height: 114rpx;
      position: absolute;
      left: 20rpx;
      top: 155rpx;
      background: #fff;
      border-radius: 10rpx;
      padding: 10rpx 19rpx;
      box-sizing: border-box;
      // animation: menuShow .3s linear forwards;
      &:before {
        position: absolute;
        top: -29rpx;
        left: 35rpx;
        content: "";
        width: 0;
        height: 0;
        border-top: 0;
        border-left: 15rpx solid transparent;
        border-right: 15rpx solid transparent;
        border-bottom: 30rpx solid #fff;
      }
      .popup-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        .image {
          width: 50rpx;
          height: 50rpx;
        }
        .desc {
          color: #FF5D15;
          font-size: 20rpx;
          margin-top: 9rpx
        }
      }
    }
    .help-button {
      width: 100%;
      height:100%;
      position: absolute;
      background-color: transparent;
      border:none;
      top:0;
      left:0;
    }
    .help-button::after{
      border:none;
    }
    .popup-wrapper_show{
      animation: menuShow .3s linear forwards;
    }

    .popup-wrapper_hide {
      animation: menuHides .3s linear forwards;
    }
  }
  .popup-container_hide {
    animation: menuLeave .3s linear forwards;
  }

  .popup-container_show {
    animation: menuEnter .3s linear forwards;
  }

  @keyframes menuLeave {
    from { background: rgba(0, 0, 0, 0.7); }
    to { background: rgba(0, 0, 0, 0); }
  }

  @keyframes menuHides {
    0% {
      transform: none;
      opacity: 1;
    }
    100% {
      transform: translate3d(0, -5%, 0);
      opacity: 0;
    }
  }

  @keyframes menuEnter {
    from { background: rgba(0, 0, 0, 0); }
    to { background: rgba(0, 0, 0, 0.7); }
  }

  @keyframes menuShow {
    0% {
      transform: translate3d(0, -5%, 0);
      opacity: 0;
    }
    100% {
        transform: none;
        opacity: 1;
    }
  }
</style>
