<template>
  <movable-area class="fixed-box">
    <movable-view class="fixed-button" direction="all" :inertia="true" y="100px">
      <view class="menuBox">
        <view class="mainMenu iconfont oaIcon-jiahao menu-item-icon" :style="{ background: themesColor }" @click="declick"></view>
        <view class="posi" :animation="animationData">
          <slot name="content"> </slot>
        </view>
      </view>
    </movable-view>
  </movable-area>
</template>
<script setup>
import { onReady, onLoad, onShow, onNavigationBarButtonTap, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, reactive, getCurrentInstance, watchEffect, toRefs, toRef, watch } from "vue";

const emit = defineEmits(["load", "refresh"]);
const props = defineProps({
  //主题颜色
  themesColor: {
    type: String,
    default: "#3f99ff",
  },
});

const defaultArray = reactive({
  off: true,
  animation: null,
  animationData: {},
});

const { themesColor } = toRefs(props);
const { off, animation, animationData } = toRefs(defaultArray);

// 悬浮按钮
function declick() {
  if (off.value) {
    //使用动画
    rotateAndScale();
  } else {
    norotateAndScale();
  }
  off.value = !off.value;
}

//定义动画内容
function rotateAndScale() {
  animation.value.rotate(0).translateY(-1).step();
  //导出动画数据传递给data层
  animationData.value = animation.value.export();
}

//当!off的时候动画回到原始位置
function norotateAndScale() {
  animation.value.rotate(0).translateY(150).step();
  animationData.value = animation.value.export();
}

onLoad((option) => {
  animation.value = uni.createAnimation();
});

onShow(() => {
  var animation1 = uni.createAnimation({
    duration: 500,
    trmingFunction: "ease",
  });
  animation.value = animation1;
});
</script>

<style lang="scss" scoped>
.fixed-box {
  pointer-events: none;
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 100000;
}

.fixed-button {
  right: 0;
  top: 60vh;
  left: auto;
  width: 50px;
  height: 150px;
  display: flex;
  padding: 5px 5px;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
}

.menuBox {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-radius: 25px;
}

.mainMenu {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
}

:deep(.iconfont) {
  color: #fff;
  font-size: 28px;
}

.posi {
  width: 50px;
  position: relative;
  z-index: -1;
  transform: rotate(0deg) translateY(150px);
  background-color: #fff;
  border-radius: 50rpx;
  padding-bottom: 50px;

  :deep(.iconfont) {
    width: 50px;
    height: 50px;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333333 !important;
  }
}

/* 适配iphonex 有底部横条的 */
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
  .fixed-box {
    bottom: constant(safe-area-inset-bottom);
    bottom: env(safe-area-inset-bottom);
  }
}
</style>
