<template>
  <picker-view 
    class="picker-body" 
    :value="timeIndex" 
    @change="handleTimeChange"
  >
    <!-- 分钟列 -->
    <picker-view-column>
      <view 
        v-for="min in minutes" 
        :key="min"
        class="item"
        :class="{ active: timeIndex[0] === minutes.indexOf(min) }"
      >{{ min }}分</view>
    </picker-view-column>
    
    <!-- 秒数列 -->
    <picker-view-column>
      <view 
        v-for="sec in seconds" 
        :key="sec"
        class="item"
        :class="{ active: timeIndex[1] === seconds.indexOf(sec) }"
      >{{ sec }}秒</view>
    </picker-view-column>
  </picker-view>
</template>

<script>
export default {
  name: "TimePicker",
  props: {
    // 初始时间（格式：{ minutes: '02', seconds: '30' }）
    defaultTime: {
      type: Object,
      default: () => ({ minutes: '00', seconds: '00' })
    }
  },
  data() {
    return {
      minutes: Array.from({ length: 60 }, (_, i) => i.toString().padStart(2, '0')), // 00-59
      seconds: Array.from({ length: 60 }, (_, i) => i.toString().padStart(2, '0')), // 00-59
      timeIndex: [0, 0], // 当前选中索引
      selectedTime: { minutes: '00', seconds: '00' } // 当前选择的时间
    };
  },
  created() {
    // 初始化默认时间
    const minIndex = this.minutes.indexOf(this.defaultTime.minutes);
    const secIndex = this.seconds.indexOf(this.defaultTime.seconds);
    this.timeIndex = [minIndex, secIndex];
    this.selectedTime = { ...this.defaultTime };
  },
  methods: {
    // 时间变化时更新选中值
    handleTimeChange(e) {
      this.timeIndex = e.detail.value;
      const [minIdx, secIdx] = this.timeIndex;
      this.selectedTime = {
        minutes: this.minutes[minIdx],
        seconds: this.seconds[secIdx]
      };
      this.$emit("change", this.selectedTime); // 实时通知父组件
    },
    
    // 提供给父组件的方法：获取当前时间
    getCurrentTime() {
      return this.selectedTime;
    }
  }
};
</script>

<style scoped>
.picker-body {
  height: 180px;
  background: #3A3A3A;
  border-radius: 10px;
}
.item {
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  padding: 10px 0;
}
.item.active {
  color: #A3FF00; /* 选中项高亮 */
}
</style>