<template>
  <view class="page">
    <BackBar title="学员详情" custom @back="back" />
    <isp-data-load :loading="loadingData" empty-text="暂无数据~" :empty="!studentInfo?.id">
      <view style="padding-top: 30rpx">
        <detail-student-info />
        <view class="student-detail-data-view" style="margin-top: 30rpx">
          <student-detail-data />
        </view>
        <view class="add-plan-view" @click="toAddPlan">
          <svgs-add-plan />
        </view>
      </view>
    </isp-data-load>
  </view>
</template>

<script setup lang="ts">
import { onReachBottom } from '@dcloudio/uni-app'
import DetailStudentInfo from '@/pages/inspector/student-detail/detail-student-info.vue'
import StudentDetailData from '@/pages/inspector/student-detail/student-detail-data.vue'
import { getCurrentInstance, onMounted, provide, ref } from 'vue'
import { getStudentDetail } from '@/api/inspector/student-detail'
import dayjs from '@/plugins/dayjs'
import IspDataLoad from '@/components/inspector/isp-data-load.vue'
import SvgsAddPlan from '@/components/svgs/svgs-add-plan.vue'
import { removeCache, getCache } from '@/utils'
import db from '@/utils/db'
const studentInfo = ref<any>({})
const routeData = ref({})
const loadingData = ref(true)

provide('studentInfo', studentInfo)
provide('routeData', routeData)

const queryData = async _params => {
  loadingData.value = true
  try {
    const { data } = await getStudentDetail(_params)
    studentInfo.value = data
  } finally {
    loadingData.value = false
  }
}

const orderId = ref('')

const toAddPlan = () => {
  uni.setStorageSync('user', {
    userId: studentInfo.value.userId,
    userName: `${studentInfo.value.name} ${studentInfo.value.gradeName}`,
    gradeId: studentInfo.value.gradeId,
    orderId: orderId.value,
    // courseDate: routeData.value.courseDate,
  })
  uni.navigateTo({
    url: `/pages/inspector/releasePlan/index`,
  })
}
const back = () => {
  let info = db.get('student_detail')
  uni.navigateTo({
    url: `${
      info.backType === 1 ? '/pages/inspector/schedule/index' : '/pages/inspector/student/index'
    }`,
  })
  removeCache('student_detail')
}
onReachBottom(() => {
  console.log('触底加载')
})
onMounted(() => {
  const data = getCurrentInstance().proxy.$page.options
  routeData.value = data
  orderId.value = data.orderId
  queryData({
    orderId: data.orderId,
    courseDate: data.courseDate ? dayjs(data.courseDate).format('YYYY-MM-DD') : '',
  })
})
</script>

<style scoped lang="scss">
.page {
  height: 101vh;
}
.student-detail-data-view {
  width: 690rpx;
  box-sizing: border-box;
  //padding: 30rpx 30rpx 20rpx 30rpx;
  border-radius: 20rpx;
  margin: 0 auto;

  :deep(.wd-tabs) {
    background-color: var(--UI-BG-0) !important;

    .wd-tabs__nav {
      background-color: var(--UI-BG-0) !important;
    }
  }
}

.add-plan-view {
  position: fixed;
  right: 30rpx;
  bottom: 270rpx;
  width: 100rpx;
  height: 100rpx;

  svg {
    width: 100%;
    height: 100%;
  }
}
</style>
