<template>  
  <view class="time-picker">  
      <scroll-view scroll-y="true" :scroll-into-view="minuteIntoView" scroll-with-animation="true" class="scroll-view">  
        <view   
          v-for="(minute, index) in minutes"   
          :key="index"   
          :id="'minute-' + index"   
          :class="['minute-item', { selected: selectedMinute === index - 1}]"   
          @click="selectMinute(index - 1)"  
        >  
          {{selectedMinute === index - 1 ? formatNumber(minute) + '分' : formatNumber(minute)}}  
        </view>  
      </scroll-view>  
      <scroll-view scroll-y="true" :scroll-into-view="secondIntoView" scroll-with-animation="true" class="scroll-view">  
        <view   
          v-for="(second, index) in seconds"   
          :key="index"   
          :id="'second-' + index"   
          :class="['second-item', { selected: selectedSecond === index - 1}]"   
          @click="selectSecond(index - 1)"  
        >  
          {{ selectedSecond === index - 1 ? formatNumber(second) + '秒' : formatNumber(second) }}  
        </view>  
      </scroll-view>  
    </view>
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      minutes: Array.from({ length: 60 }, (_, i) => i),  
      seconds: Array.from({ length: 60 }, (_, i) => i),  
      selectedMinute: 0,  
      selectedSecond: 0,  
      minuteIntoView: 'minute-0',  
      secondIntoView: 'second-0'  
    };  
  },  
  methods: {  
    formatNumber(num) {  
      return num < 10 ? '0' + num : num;  
    },  
    selectMinute(index) {  
      this.selectedMinute = index;  
      this.minuteIntoView = 'minute-' + index;  
      this.$emit('change-minute', this.selectedMinute);  
    },  
    selectSecond(index) {  
      this.selectedSecond = index;  
      this.secondIntoView = 'second-' + index;  
      this.$emit('change-second', this.selectedSecond);  
    }  
  }  
};  
</script>  
  
<style>  
.time-picker {  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  height: 350rpx;  
  width: 590rpx;
  background-color: #fff;
  border-radius: 20rpx;
}  
.selected {  
  font-size: 44rpx;
  color: #3D3D3D;
  font-weight: 600;
}  
.scroll-view {  
  width: 260rpx;  
  height: 140px; /* Adjust height as needed */  
  margin: 10px 0;  
}  
  
.minute-item, .second-item {  
  height: 50px; /* Adjust height as needed */  
  line-height: 50px;  
  text-align: center;  
  border-bottom: 1px solid rgba(80,86,90, .1);  
}  
</style>