<script setup lang="ts">
import SectionHeading from '@/components/section-heading.vue'
import { scheduleCardBg } from '@/core/libs/pngs'

const props = defineProps({
  customClass: {
    type: String,
    default: () => '',
  },
  options: {
    type: Object,
    default: () => ({
      items: [
        { date: '9:00', title: '早稻田大学课程', desc: '学习灯光设计师课程' },
        { date: '11:00', title: '早稻田大学博物馆参观', desc: '了解博物馆历史' },
        { date: '15:00', title: '早稻田大学设计交流会', desc: '交流学习设计心得' },
      ],
    }),
  },
})
const data = ref()
const pull = () => {
  data.value = props.options.items.slice(0, 3)
}
const push = () => {
  data.value = props.options.items.slice(0, 2)
}
const handleClick = async () => {
  uni.navigateTo({ url: '/pages/home/schedule/index' })
}
onMounted(() => {
  push()
})
</script>
<template>
  <view class="flex flex-col items-center" :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日 第二天
    </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 data" :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
            </div>
            <div class="text-white text-base font-normal font-['PingFang SC'] leading-normal">
              早稻田大学课程
            </div>
          </view>
          <div class="ml-6.5 text-white/40 text-sm font-normal font-['PingFang SC'] leading-normal">
            学习灯光设计师课程
          </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>
