<script setup>
import { getCountDownTime } from '~/utils/day';
import { paddingLeft } from '~/utils/string';
import { child } from '~/store/child';
// import { children } from '~/store/children';
import getTeamInfo from '~/store/team';

const children = JSON.parse(sessionStorage.getItem('children'))
console.log('children :>> ', children);

function handleNavLeftClick() {
  router.replace('/home')
}

function handleNavRightClick() {
  router.push('/stxk/jz/wd')
}
if (location.search) {
  location.search = "";
}

const router = useRouter()
function handleClickCard(item) {
  router.push(`/stxk/jz/kcxq/${item.kk_id}`)
}

let loading = $ref(true)
let kxq_code = $ref()
getTeamInfo.then(
  (res) => {
    kxq_code = res.kxq_code
    loading = false
  }
)

function test(item) {
  return JSON.parse(item.kk_teacher)?.name ?? '-'
}
</script>

<template>
  <van-sticky>
    <van-nav-bar title="社团选课" right-text="我的社团课程" @click-right="handleNavRightClick" left-arrow
      @click-left="handleNavLeftClick">
    </van-nav-bar>
  </van-sticky>


  <van-skeleton :row="3" :loading="loading">
    <remote-list url="/khfw/kcgl/index"
      :d="{ token: child.token, kxq_code, grade: children?.map(child => child.cm_info.map(({ grade }) => grade).join(','))?.join(',') }">
      <template #default="{ row: item }">
        <!--  :desc="item.desc" -->
        <van-card :price="item.kk_kcfy" :desc="`讲师：${test(item)}`" :title="item.kk_name" :thumb="item.kk_img"
          @click="handleClickCard(item)">
          <template #tag>
            <van-count-down :time="getCountDownTime(item.kk_bmkssj)">
              <template #default="timeData">
                <span class="bg-opacity-50 text-light-900 bg-dark-900 px-1">
                  {{ paddingLeft(timeData.days * 24 + timeData.hours) }}:{{ paddingLeft(timeData.minutes)
                  }}:{{ paddingLeft(timeData.seconds) }}
                </span>
              </template>
            </van-count-down>
          </template>
          <template #num>
            <span>{{ item.khfw_kcbmxx.count }}人报名</span>
          </template>
        </van-card>
      </template>
    </remote-list>
  </van-skeleton>
</template>
