<route lang="yaml">
style:
  navigationStyle: custom
  navigationBarTitleText: 游学日程
</route>
<script setup lang="ts">
import TiltedButton from '@/components/tilted-button.vue'
import { getSchedule, getUserInfo } from '@/core/libs/requests'
import { camera, map } from '@/core/libs/svgs'

const { data, run } = useRequest(getSchedule)
const { data: userInfo, run: runUserInfo } = useRequest(getUserInfo)

onMounted(() => {
  run()
  runUserInfo()
})
</script>
<template>
  <view class="">
    <view class="bg-black w-full pos-relative aspect-[1.26/1]">
      <wd-img width="100%" height="100%" :src="data?.cover" />
      <div
        class="w-[375px] h-[90px] bg-gradient-to-t from-black to-black/0 absolute left-0 bottom-0 w-full flex items-center"
      >
        <view class="mx-7">
          <wd-button plain custom-class="bg-transparent! border-white! text-white!">
            02:30
          </wd-button>
        </view>
      </div>
    </view>
    <view class="bg-white relative bottom-4 rounded-t-2xl p-6.5">
      <view class="border-b border-black/10 border-b-solid pb-5">
        <div class="text-black/90 text-2xl font-normal font-['PingFang SC'] leading-normal">
          {{ data?.name }}
        </div>
        <view class="flex mt-5">
          <wd-img
            custom-class="rounded-full overflow-hidden mr-1"
            width="22"
            height="22"
            :src="userInfo?.avatar"
          />
          <div class="text-black/40 text-base font-normal font-['PingFang SC'] leading-normal">
            {{ userInfo?.nickname }}
          </div>
          <div class="flex text-black/40 text-base font-normal font-['PingFang SC'] leading-normal">
            <view class="mx-3.5">|</view>
            6月26日 第二天
          </div>
        </view>
      </view>
      <template v-for="(it, index) in data.items" :key="index">
        <view class="grid grid-gap-2 mt-8">
          <view class="col-start-1 row-start-1 flex items-center justify-center">
            <view
              class="w-[27px] h-[27px] bg-[#f6f6f6] rounded-full flex justify-center items-center"
            >
              <wd-img width="16" height="16" :src="map"></wd-img>
            </view>
          </view>
          <view class="col-start-2 row-start-1 flex">
            <div
              class="text-black/90 text-base font-normal font-['PingFang SC'] leading-normal mr-5"
            >
              {{ it.time }}
            </div>
            <div class="text-black/90 text-base font-normal font-['PingFang SC'] leading-normal">
              {{ it.title }}
            </div>
          </view>
          <view class="col-start-2 row-start-2 border-b border-black/10 border-b-solid pb-5">
            <div class="">
              <span class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-[23px]">
                行程介绍:
              </span>
              <span class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-[23px]">
                {{ it.content }}
              </span>
            </div>
            <view class="flex items-center my-4">
              <wd-img width="16" height="16" :src="camera"></wd-img>
              <div
                class="ml-1 text-black/90 text-xs font-normal font-['PingFang SC'] leading-normal"
              >
                打卡示例
              </div>
            </view>
            <img class="w-[285px] h-[157px] rounded-lg" :src="it.momentExample" />
            <div
              class="mt-2.5 text-black/40 text-xs font-normal font-['PingFang SC'] leading-normal"
            >
              {{ it.monentHint }}
            </div>
          </view>
        </view>
      </template>
    </view>
    <div
      class="mx-3.5 p-3.5 bg-white/90 rounded-2xl backdrop-blur-[20px] fixed bottom-4 left-0 right-0 flex items-center justify-between"
    >
      <div class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-[34px]">
        发布圈子可得
      </div>
      <div class="text-[#ef4343] text-[22px] font-normal font-['D-DIN Exp'] leading-normal">
        16000
      </div>
      <div class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-[34px]">积分</div>
      <view class="flex-1"></view>
      <view>
        <TiltedButton size="large" custom-class="">
          <view class="px-3">发圈子</view>
        </TiltedButton>
      </view>
    </div>
  </view>
</template>
