<template>
  <a-card class="rowGutter" id="kxstkktDom">
    <template #title>
      <span class="titleName">可线上听课课堂</span>
    </template>
    <a-tabs type="card">
      <a-tab-pane key="zzsk">
        <template #tab>
          <div style="font-weight: 600;font-size: 16px;">{{ zzskTitle }}</div>
        </template>
        <zzsk></zzsk>
      </a-tab-pane>
      <a-tab-pane key="xyjk">
        <template #tab>
          <div style="font-weight: 600;font-size: 16px;">下一节课</div>
        </template>
        <xyjk></xyjk>
      </a-tab-pane>
      <a-tab-pane key="rkb">
        <template #tab>
          <div style="font-weight: 600;font-size: 16px;">日课表</div>
        </template>
        <rkb></rkb>
      </a-tab-pane>
      <a-tab-pane key="wdyy">
        <template #tab>
          <div style="font-weight: 600;font-size: 16px;">我的预约</div>
        </template>
        <wdyy></wdyy>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script lang="ts" setup>
import zzsk from './zzsk.vue';
import xyjk from './xyjk.vue';
import rkb from './rkb.vue';
import wdyy from './wdyy.vue';
import { defHttp } from '/@/utils/http/axios';
import { ref, onMounted  } from 'vue';

const zzskTitle = ref('正在上课');
const queryParam = ref<any>({});


const jclist = (queryParam) => defHttp.get({ url: '/kcJieci/kcJieci/getIndexJcList', params:queryParam });
  //进入就加载
onMounted(() => {

  jclist(queryParam.value).then(res=>{
    var list = res
    let sjsksj = list[0].sjsksj
    console.log(`🚀 ~ file: index.vue:135 ~ jclist ~ sjsksj:`, sjsksj)
    if(sjsksj){
      let nowDate = new Date();
      let nowDate2 = new Date(sjsksj);
        console.log(`🚀 ~ file: index.vue:140 ~ jclist ~ nowDate.getTime():`, nowDate.getTime(),nowDate2.getTime())
      if(nowDate.getTime()<nowDate2.getTime()){
        zzskTitle.value = "即将上课";
      }else{
        zzskTitle.value = "正在上课";
      }
    }else{
      zzskTitle.value = "正在上课";
    }
  })
});

</script>

<style lang="less" scoped>
.titleName {
  font-size: 24px;
  font-weight: bold;
}
</style>
