<template>
  <view class="floating-train-btn" v-if="trainingStore.min" @click="goToTrainingPage">
    <view class="icon-wrap">
      <up-icon name="plus-circle" color="#fff" size="24"></up-icon>
    </view>
    <view class="text-wrap">
      <text class="status-text">训练中</text>
      <text class="time-text">{{ formattedStartTime }}</text>
    </view>
  </view>
</template>

<script setup>
import { computed, watch, onMounted } from 'vue';
import { useTrainingStore } from '@/sheep/store/trainingStore';

const trainingStore = useTrainingStore();

// 格式化显示“开始时间”
const formattedStartTime = computed(() => trainingStore.trainingTimeText);

// 跳转到训练页面
const goToTrainingPage = () => {
  // 悬浮球消失
  trainingStore.min = false;
  uni.navigateTo({
    url: `/pages4/pages/xunji/xunji-dongzuo-lianxi?id=${trainingStore.id}&type=${trainingStore.type}&isTraining=true`,
  });
};

watch(() => trainingStore.min, (newVal) => {
  console.log('🟢 悬浮球组件监听到 min 变化：', newVal);
}, { immediate: true });

// 组件挂载时打印
onMounted(() => {
  console.log('🟢 悬浮球组件已挂载，当前 min 值：', trainingStore.min);
});
</script>

<style lang="scss" scoped>
.floating-train-btn {
  position: fixed;
  right: 11rpx;
  bottom: 304rpx;
  display: flex;
  align-items: center;
  background-color: #39d353;
  border-radius: 60rpx;
  padding: 16rpx 20rpx;
  box-shadow: 0 8rpx 20rpx rgba(57, 211, 83, 0.3);
  z-index: 9999;
}

.icon-wrap {
  margin-right: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-wrap {
  display: flex;
  flex-direction: column;
  color: #fff;
}

.status-text {
  font-size: 26rpx;
  font-weight: bold;
}

.time-text {
  font-size: 22rpx;
  opacity: 0.9;
}
</style>