<script setup>
import {ref, watch, onMounted, onBeforeUnmount} from "vue";
import {RoundGoldImages} from "@/constants";

const props = defineProps({
  tips: {
    type: String,
    default: "",
  },
  total: {
    type: Number,
    default: 15,
  },
  currentRound: {
    type: String,
    default: "round1",
  },
});

const barColor = ref("");
const remain = ref(15);
const timer = ref(null);
const loading = ref(false);
const transitionStyle = ref("all 1s linear");
const currentTeam = ref(null);

const updateRemain = (value) => {
  if (value.stop) {
    if (timer.value) clearInterval(timer.value);
    return
  }
  loading.value = false;
  currentTeam.value = value.team
  if (value.team === 'red')
    barColor.value = "linear-gradient( 180deg, #FFA0A0 0%, #FF6060 100%)";
  if (value.team === 'blue')
    barColor.value = "linear-gradient( 180deg, #9AB3FF 0%, #4288FF 100%)";
  if (value.reset) {
    remain.value = value.value;
    return;
  }
  const newVal = Math.round(value.value);
  // 如果剩余时间增加（如轮次切换重置），瞬间变化无动画；否则保持动画
  if (newVal >= remain.value) {
    transitionStyle.value = "none";
    remain.value = newVal;
    setTimeout(() => {
      transitionStyle.value = "all 1s linear";
    }, 50);
  } else {
    remain.value = newVal;
  }

  timer.value = setInterval(() => {
    loading.value = remain.value === 0;
    if (remain.value > 0) remain.value--;
  }, 1000);
};

watch(
    () => props.tips,
    (newVal) => {

    },
    {
      immediate: true,
    }
);

onMounted(() => {
  uni.$on("update-remain", updateRemain);
});

onBeforeUnmount(() => {
  uni.$off("update-remain", updateRemain);
  if (timer.value) clearInterval(timer.value);
});
</script>

<template>
  <view class="container">
    <image :src="RoundGoldImages[props.currentRound]" mode="widthFix"/>
    <view
        :style="{
        justifyContent: currentTeam==='red' ? 'flex-end' : 'flex-start',
      }"
    >
      <view
          :style="{
          width: `${(remain / total) * 100}%`,
          background: barColor,
          right: currentTeam==='red' ? 0 : 'unset',
          transition: transitionStyle,
        }"
      />
      <text v-if="!loading">剩余{{ remain }}秒</text>
      <text v-else>···</text>
    </view>
  </view>
</template>

<style scoped>
.container {
  width: 50vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container > image {
  width: 380rpx;
  height: 80rpx;
  transform: translateY(18rpx);
}

.container > view:last-child {
  width: 100%;
  text-align: center;
  background-color: #444444;
  border-radius: 20px;
  height: 24rpx;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.container > view:last-child > view {
  height: 24rpx;
  border-radius: 15px;
}

.container > view:last-child > text {
  font-size: 18rpx;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
