<template>
  <div class="v_aside" @touchmove.prevent v-clickoutside="handleoutside">
    <ul>
      <!-- 待完善 -->
      <li @click.stop="onShowIntro" v-show="0">
        <i class="iconfont icon-jianjie"></i>
      </li>
      <li @click="isBgm=!isBgm">
        <i class="iconfont" :class="!isBgm?'icon-yinleguan':'icon-yinlekai'"></i>
      </li>
      <li @click.stop="onShowShare">
        <i class="iconfont icon-fenxiang"></i>
      </li>
    </ul>
    <vIntro v-if="isShowIntro" @close="isShowIntro = false" />
    <vShare v-if="isShowShare" @close="isShowShare = false" />

  </div>
</template>
<script>
import vIntro from "./intro";
import vShare from "./share";

export default {
  components: {vIntro, vShare },
  data() {
    return {
      showMore: false,
      isShowIntro: false,
      isShowShare: false,
      isBgm: true
    };
  },

  watch:{
    isBgm(newVal){
       this.$bus.$emit('toggleBgm',newVal)
    }
  },

  methods: {
    handleoutside() {
      this.showMore = false;
    },
    onShowIntro() {
      this.showMore = false;
      this.isShowIntro = true;
    },
    onShowShare() {
      this.showMore = false;
      this.isShowShare = true;
    },
    onShowMore() {
      this.showMore = !this.showMore;
    },
  },

  mounted() {},
};
</script>
<style lang="less" scoped>
@bkc: rgba(32, 32, 32, 0.6);
.v_aside {
  font-size: 16px;
  top: 50%;
  position: fixed;
  right: 20px;
  color: #fff;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
  z-index: 2004;
  >ul{
    transform: translateY(-50%);
    >li{
      cursor: pointer;
      background: rgba(0, 0, 0, 0.4);
      border-radius: 50%;
      padding: 8px;
      cursor: pointer;
      margin: 10px 0;
      >i{
        font-size: 28px;
        cursor: pointer;
      }
    }
  }
  
}
</style>
<style lang="less">
.animated.short {
  transition: 0.3s ease all;
  &.faster {
    animation-duration: 0.3s;
  }
  @keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translate3d(0, 1rem, 0);
    }
    to {
      opacity: 1;
      transform: translateZ(0);
    }
  }
  @keyframes fadeOutDown {
    0% {
      opacity: 1;
    }
    to {
      opacity: 0;
      transform: translate3d(0, 1rem, 0);
    }
  }
}
</style>
