<route lang="yaml">
style:
  navigationStyle: custom
  navigationBarTitleText: 游学日程
</route>
<script setup lang="ts">
import { getMyStudyTours } from '../../../core/libs/requests'
import { camera, map } from '../../../core/libs/svgs'
import { useUserStore } from '../../../store'
import { storeToRefs } from 'pinia'
import { group } from 'radash'
import dayjs from 'dayjs'
import NavbarEvo from '@/components/navbar-evo.vue'
import BottomAppBar from '@/components/bottom-app-bar.vue'
import ButtonEvo from '@/components/button-evo.vue'
import { useRouter } from '../../../core/utils/router'
import ImageEvo from '@/components/image-evo.vue'

const router = useRouter()
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const { data: studyTours, run: setStudyTours } = useRequest(() => getMyStudyTours(), {
  initialData: [],
})
const currentStudyTour = computed(() =>
  studyTours.value.find(
    (it) => dayjs(it.studyStartTime).isBefore(dayjs()) && dayjs(it.studyEndTime).isAfter(dayjs()),
  ),
)
const schedules = computed(
  () =>
    group(currentStudyTour.value?.studyTravelDOList || [], (it) =>
      dayjs(it?.travelTime).format('YYYY-MM-DD'),
    ) || { [dayjs().format('YYYY-MM-DD')]: [] },
)

onMounted(async () => {
  await setStudyTours()
})
</script>
<template>
  <view class="flex-grow flex flex-col">
    <NavbarEvo transparent dark></NavbarEvo>
    <view class="bg-black w-full aspect-[1.26/1]">
<!--      <ImageEvo :src="currentStudyTour?.bannerUrl"></ImageEvo>-->
      <div
        class="w-full h-full bg-[length:100%_auto]"
        :style="{ backgroundImage: `url(${currentStudyTour?.bannerUrl})` }"
      ></div>
      <div
        class="aspect-[4.17/1] bg-gradient-to-t from-black to-black/0 absolute left-0 bottom-0 w-full flex items-center"
      ></div>
    </view>
    <div class="flex-grow bg-white">
      <view class="flex-grow 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">
            {{ currentStudyTour?.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>
              {{ dayjs().format('M月D日') }}
              第{{
                Object.keys(schedules || []).findIndex(
                  (it) => it === dayjs().format('YYYY-MM-DD'),
                ) + 1
              }}天
            </div>
          </view>
        </view>
        <template
          v-for="(item, itemIndex) in schedules?.[dayjs().format('YYYY-MM-DD')]"
          :key="itemIndex"
        >
          <view class="flex flex-col mt-8">
            <!-- 左侧图标 -->
            <view class="flex items-center">
              <view class="w-[30px] h-[30px] bg-[#f6f6f6] rounded-full flex justify-center items-center">
                <wd-img width="16" height="16" :src="map"></wd-img>
              </view>
              <div class="ml-3 text-black/90 text-base font-normal">
                {{ dayjs(item?.travelTime).format('HH:mm') }}
              </div>
              <div class="ml-10 mt-1 text-black/90 text-base font-normal">
                {{ item.title }}
              </div>
            </view>

            <!-- 标题 -->


            <!-- 描述 -->
            <view class="ml-10 mt-2 border-b border-black/10 pb-5">
      <span class="text-black/60 text-sm font-normal">
        行程介绍:
      </span>
              <span class="text-black/40 text-sm font-normal">
        {{ item.travelDesc }}
      </span>
            </view>

            <!-- 打卡示例 -->
            <template v-if="item.clockExplainUrl">
              <view class="flex items-center mt-4 ml-10">
                <wd-img width="16" height="16" :src="camera"></wd-img>
                <div class="ml-1 text-black/90 text-xs font-normal">
                  打卡示例
                </div>
              </view>
              <wd-img
                v-if="(item.clockExplainUrl ?? '') !== ''"
                width="100%"
                custom-class="rounded-2xl overflow-hidden mt-4"
                :src="item.clockExplainUrl"
                mode="widthFix"
                enable-preview
              ></wd-img>
              <div
                class="mt-2.5 ml-10 text-black/40 text-xs font-normal"
              >
                {{ item.clockExplainDesc }}
              </div>
            </template>
          </view>
        </template>

      </view>
    </div>
    <BottomAppBar fixed placeholder>
      <div
        class="p-3.5 bg-white/90 rounded-2xl backdrop-blur-[20px] bottom-4 left-0 right-0 flex items-center justify-between gap-1"
      >
        <!-- <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>
          <ButtonEvo size="lg" @click="router.push('/pages-sub/publish/moment/index?circleType=1')">
            发圈子
          </ButtonEvo>
        </view>
      </div>
    </BottomAppBar>
  </view>
</template>
