<template>
  <view class="time-cycle" v-if="timeList[currentTime]">
    <view class="label">督学周期</view>
    <view class="time">
      <wd-icon name="arrow-left" size="30rpx" :color="isPrev ? '' : '#A9AAB5'" @click="prevTime"></wd-icon>
      <view class="time-text">{{timeList[currentTime]?.start}} - {{timeList[currentTime]?.end}}</view>
      <wd-icon name="arrow-right" size="30rpx" :color="isNext ? '' : '#A9AAB5'" @click="nextTime"></wd-icon>
    </view>
  </view>
</template>

<script setup lang=ts>
import {computed, ref, watch} from "vue";

const props = defineProps<{
  list: Array<{
    start: string;
    end: string;
  }>
}>()

const emit = defineEmits(['change'])

const currentTime = ref<number>(0)
// 是否能点击上一次、下一次
const isPrev = computed(() => {
  return currentTime.value > 0
})

const timeList = ref<Array<{
  start: string;
  end: string;
}>>([])

watch(() => props.list, value => {
  timeList.value = value
}, {immediate: true})


const isNext = computed(() => {
  return currentTime.value < timeList.value.length - 1
})

const timeChange = () => {
  emit('change', timeList.value[currentTime.value])
}
// 上一周期
const prevTime = () => {
  if (isPrev.value) {
    currentTime.value--
    timeChange()
  }
}
// 下一周期
const nextTime = () => {
  if (isNext.value) {
    currentTime.value++
    timeChange()
  }
}
timeChange()
</script>

<style scoped lang="scss">
.time-cycle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 108rpx;
  border-radius: 20rpx;
  background-color: #fff;
  padding: 0 30rpx;
  margin-bottom: 30rpx;
  box-sizing: border-box;
  .time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10rpx;
    .time-text {
      font-size: 30rpx;
      color: #0A1F13;
    }
  }
  .label {
    font-size: 32rpx;
    font-weight: 500;
    color: #0A1F13;
  }
}
</style>
