<template>
  <view style="touch-action: none;" :style="viewColor">
    <view class="home" style="position:fixed;" :style="{ top: top + 'px', bottom: bottom }" id="right-nav"
      @touchmove.stop.prevent="setTouchMove">
      <view class="homeCon" :class="homeActive === true ? 'on' : ''" v-if="homeActive">
        <navigator hover-class='none' url='/pages/index/index' open-type='switchTab'
          class='iconfont icon-shouye-xianxing'></navigator>
        <navigator hover-class='none' url='/pages/order_addcart/order_addcart' open-type='navigate'
          class='iconfont icon-caigou-xianxing'></navigator>
        <navigator hover-class='none' url='/pages/user/index' open-type='switchTab' class='iconfont icon-yonghu1'>
        </navigator>
      </view>
      <view @click="open" class="pictrueBox">
        <view class="pictrue">
          <image :src="homeActive === true ? '/static/images/navbtn_open.gif' : '/static/images/navbtn_close.gif'"
            class="image pictruea" />
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  import { mapGetters } from "vuex";
  import { HTTP_REQUEST_URL } from '@/config/app';
  export default {
    name: "Home",
    props: {},
    data: function() {
      return {
        domain: HTTP_REQUEST_URL,
        top: "",
        bottom: ""
      };
    },
    computed: mapGetters(["homeActive", "viewColor", "keyColor"]),
    methods: {
      setTouchMove(e) {
        var that = this;
        if (e.touches[0].clientY < 545 && e.touches[0].clientY > 66) {
          that.top = e.touches[0].clientY
          that.bottom = "auto";
        }
      },
      open: function() {
        this.homeActive ? this.$store.commit("CLOSE_HOME") : this.$store.commit("OPEN_HOME");
      }
    },
    created() {
      this.bottom = "50px";
    }
  };
</script>

<style scoped>
  .pictrueBox {
    width: 130rpx;
    height: 120rpx;
  }

  /*返回主页按钮*/
  .home {
    position: fixed;
    color: white;
    text-align: center;
    z-index: 9999;
    right: 15rpx;
    display: flex;
  }

  .home .homeCon {
    border-radius: 50rpx;
    opacity: 0;
    height: 0;
    color: #e93323;
    width: 0;
  }

  .home .homeCon.on {
    opacity: 1;
    animation: bounceInRight 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000);
    width: 300rpx;
    height: 86rpx;
    margin-bottom: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--view-theme);
  }

  .home .homeCon .iconfont {
    font-size: 48rpx;
    color: #fff;
    display: inline-block;
    margin: 0 auto;
  }

  .home .pictrue {
    width: 86rpx;
    height: 86rpx;
    border-radius: 50%;
    margin: 0 auto;
    background-color: var(--view-theme);
    box-shadow: 0 5rpx 12rpx rgba(0, 0, 0, 0.5);
  }

  .home .pictrue .image {
    width: 100%;
    height: 100%;
  }

  .pictruea {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    vertical-align: middle;
  }
</style>