<script lang="ts" setup>
import SectionHeading from '@/components/section-heading.vue'
const data = ref([{ title: '意大利' }, { title: '日本' }, { title: '苏州' }, { title: '北京' }])
const current = ref(0)
</script>
<template>
  <div
    class="relative flex flex-col justify-between aspect-[1.73/1] box-border pt-3 pb-6 px-6 bg-[url(https://image.zhuchaohui.com/zhucaohui/582dbfa59a3dc840839322108ae52adf6e9665b40f34dfbfd553ab8cf55af11f.png)] bg-[length:100%]"
  >
    <SectionHeading
      title="游学时间表"
      end-text="查看全部"
      end-class="text-white!"
      path="/pages/home/study-tour/list"
    >
      <template #append>
        <div class="flex items-center">
          <div class="text-right text-white text-xs font-normal font-['PingFang SC']">查看全部</div>
          <wd-icon name="arrow-right" color="#ffffff" size="12"></wd-icon>
        </div>
      </template>
    </SectionHeading>
    <div class="overflow-x-auto whitespace-nowrap">
      <template v-for="(it, i) in data" :key="i">
        <div class="inline-block w-[calc(25%-0rpx)] box-border">
          <div class="flex flex-col gap-2 items-center">
            <div class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-[10.18px]">
              3月
            </div>
            <div class="w-full flex items-center">
              <div class="h-0.5 flex-1 bg-[#d9d9d9]"></div>
              <div class="w-[13px] h-[13px] relative">
                <div
                  class="w-[13px] h-[13px] left-0 top-0 absolute bg-[#d9d9d9] rounded-full"
                ></div>
                <div
                  class="w-[7px] h-[7px] left-[3px] top-[3px] absolute rounded-full"
                  :class="[i === current ? 'bg-black' : 'bg-[#999]']"
                ></div>
              </div>
              <div class="h-0.5 flex-1 bg-[#d9d9d9]"></div>
            </div>
            <div
              class="text-sm font-normal leading-[10.18px]"
              :class="[i === current ? 'text-black' : 'text-black/40']"
            >
              {{ it.title }}
            </div>
            <div
              class="px-2 py-1 bg-[#eaeaea] rounded justify-center items-center gap-2.5 inline-flex"
              :class="[i === current ? 'bg-black text-white' : 'text-black/40']"
            >
              <div class="text-xs font-normal">已结束</div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
