<template>
  <!-- 纯固定黄色圆形悬浮按钮 -->
  <view class="float-btn" @click="openAddTrainPopup">
    <view class="column" hover-class="none" hover-stop-propagation="false">
      <view class="add" hover-class="none">+</view>
      <view class="btn-text">训练</view>
    </view>

    <AddTrainPopup v-model:visible="showAddTrainPopup" />
  </view>
</template>

<script setup>
import { ref, onMounted, watch, computed, nextTick } from 'vue';
import AddTrainPopup from '@/pages/xunji/components/rili-components/add-train-popup.vue'

const showAddTrainPopup = ref(false);

const emit = defineEmits(['click'])
const onClick = () => {
  emit('click')
}

// 弹窗控制
const openAddTrainPopup = () => {
  showAddTrainPopup.value = true;
};
const closeAddTrainPopup = () => {
  showAddTrainPopup.value = false;
};
</script>

<style lang="scss" scoped>
.float-btn {
  position: fixed;
  right: 30rpx;
  bottom: 10rpx;
  width: 100rpx;
  height: 100rpx;
  background-color: #ffcc00;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 16rpx rgba(255, 204, 0, 0.3);
  z-index: 999;

  .column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .add {
    font-size: 32rpx;
    font-weight: bold;
  }

  .btn-text {
    font-size: 28rpx;
    font-weight: 200;
    line-height: 1;
    margin-top: 4rpx;
  }
}
</style>