<script setup lang='ts'>
import { showFailToast } from 'vant';

const props = defineProps({
  id: {
    type: String,
    required: true,
  },
})

const router = useRouter()
function onClickLeft() {
  router.back()
}

let list = $ref([])
request({
  url: "/dyaw/xlfw_xsda_dajl/index",
  data: {
    limit: 100,
    user_id: props.id,
  },
}).then(res => {
  if (res.code == "1") {
    console.log(res.data.page_data)
    list = res.data.page_data
  } else {
    showFailToast(res.msg)
  }
}).catch(error => {
  showFailToast(error)
})

</script>

<template>
  <van-nav-bar title="学生档案" left-text="" left-arrow @click-left="onClickLeft"
    style="--van-nav-bar-background:#397FF6;--van-nav-bar-icon-color:#fff;--van-nav-bar-title-text-color:#fff;--van-nav-bar-title-font-size:18px;--van-nav-bar-text-color:#fff;" />

  <div class="p-1 flex-auto">
    <van-swipe class="h-full">
      <van-swipe-item v-for="item in list" class="p-1 ">
        <archives-card :d="item" disabled></archives-card>
        <div class="mt-4">咨询时长： {{ item?.xxd_zxsc }}</div>
      </van-swipe-item>
      <template #indicator="{ active, total }">
        <div class="custom-indicator">{{ active + 1 }} / {{ total }}</div>
      </template>
    </van-swipe>
  </div>
</template>

<style scoped>
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
</style>
