<script setup lang="ts">
import SectionHeading from '@/components/section-heading.vue'
import { scheduleCardBg } from '../../../core/libs/pngs'
import { MyStudyTour, StudyTour } from '../../../core/libs/models'
import { group } from 'radash'
import dayjs from 'dayjs'

const props = withDefaults(defineProps<{ customClass?: string; items?: MyStudyTour[] }>(), {
  items: () => [],
})
const data = ref()
const dates = computed(() => {
  const a = props.items.at(0)?.studyTravelDOList
  // 使用radash将studyTravelDOList 中的travelTime字段按天分组
  const b = group(a, (it) => dayjs(it?.travelTime).format('YYYY-MM-DD'))
  console.log(b)
  return b
})
const pull = () => {
  data.value = props.items.at(0)?.studyTravelDOList.slice(0, 3)
}
const push = () => {
  data.value = props.items.at(0)?.studyTravelDOList.slice(0, 2)
}
const handleClick = async () => {
  uni.navigateTo({ url: '/pages/home/schedule/index' })
}
onMounted(() => {
  push()
})
</script>
<template>
  <view class="flex flex-col items-center aspect-[1.28/1]" :class="[customClass]">
    <SectionHeading title="我的游学日程" custom-class="w-full"></SectionHeading>
    <div
      class="w-full my-3.5 text-[#acacac] text-sm font-normal font-['PingFang_SC'] leading-normal"
    >
      <!-- 6月26日 第二天 -->
      <!-- {{ dates }} -->
      <!-- {{ items?.at(0)?.studyTravelDOList?.at(0)?.travelTime }} -->
      {{ Object.keys(dates).at(0) }}
      第{{ 1 }}天
    </div>
    <div
      class="w-80 bg-gradient-to-r from-[#141414] to-[#4b4949] rounded-tl-2xl rounded-tr-2xl p-6 box-border"
    >
      <template v-for="(it, index) in Object.values(dates)" :key="index">
        <view class="relative mb-4">
          <view class="flex items-center">
            <div class="w-2 h-2 left-0 top-0 rounded-full border-2 border-solid border-white"></div>

            <div
              class="w-12 ml-3.5 text-white text-base font-normal font-['PingFang_SC'] leading-normal"
            >
              <!-- 9:00 -->
              {{ dayjs(it.at(0)?.travelTime).format('HH:mm') }}
            </div>
            <div class="text-white text-base font-normal font-['PingFang_SC'] leading-normal">
              <!-- 早稻田大学课程 -->
              {{ it.at(0)?.title }}
            </div>
          </view>
          <div class="ml-6.5 text-white/40 text-sm font-normal font-['PingFang_SC'] leading-normal">
            <!-- 学习灯光设计师课程 -->
            {{ it.at(0)?.travelDesc }}
          </div>
          <div
            v-if="index !== data?.length - 1"
            class="absolute left-1.25 top-6 bottom--4 border border-dashed border-gray bg-gray-500"
          ></div>
        </view>
      </template>
    </div>
    <view class="w-full relative bottom-7 mb--9">
      <wd-img :src="scheduleCardBg" width="100%" mode="widthFix"></wd-img>
      <view class="absolute bottom-0 left-0 right-0 px-3.5 py-7 flex flex-col items-center">
        <wd-icon
          custom-class="relative bottom-6"
          :name="data?.length > 2 ? 'arrow-up' : 'arrow-down'"
          size="22px"
          color="#4f4f4f"
          @click="data?.length > 2 ? push() : pull()"
        ></wd-icon>
        <view class="w-full">
          <wd-button block size="large" custom-class="rd!" @click="handleClick">
            查看全部行程
          </wd-button>
        </view>
      </view>
    </view>
  </view>
</template>
