<template>
  <a-card class="rowGutter" id="rkjcDom">
    <template #title>
      <span style="font-size: 24px;font-weight: bold;">任教课程</span>
      <span style="margin-left: 10px;"><a href="javascript:void(0);" @click="openChangeKcPage">修改课程提醒</a></span>
    </template>
    <!-- <template #extra></template> -->
    <div class="cardBody">
      <a-tabs>
        <a-tab-pane key="teacherjjskList" tab="即将上课" >
          <a-row>
            <a-col :span="8" :key="index" v-for="(item, index) in teacherjjskList">
              <div class="ketangCard">
                <div class="rjkcTopDiv">
                  <span>{{ item.skrq }}&nbsp;{{ toWeek(item.WEEK) }}&nbsp;第{{ item.hh }}节</span>
                  <span class="nDayDiv">即将上课</span>
                </div>
                <div class="rjkcBodyDiv">
                  <div class="kcmcDiv">{{ item.kcmc }}</div>
                  <div><a-rate v-model:value="item.stars" disabled/></div>
                  <div class="skddDiv">{{ item.skdd }}</div>
                  <div class="xkrsDiv">{{ item.xkrs }}人选课&nbsp;&nbsp;&nbsp;<a-button @click="toLivePage(item)" :disabled="!item.jsbh" class="buttonClass">进入课堂</a-button></div>
                </div>
              </div>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="teacherzzskList" tab="正在上课" >
          <a-row>
            <a-col :span="8" :key="index" v-for="(item, index) in teacherzzskList">
              <div class="ketangCard">
                <div class="rjkcTopDiv">
                  <span>{{ item.skrq }}&nbsp;{{ toWeek(item.WEEK) }}&nbsp;第{{ item.hh }}节</span>
                  <span class="nDayDiv">正在上课</span>
                </div>
                <div class="rjkcBodyDiv">
                  <div class="kcmcDiv">{{ item.kcmc }}</div>
                  <div><a-rate v-model:value="item.stars" disabled/></div>
                  <div class="skddDiv">{{ item.skdd }}</div>
                  <div class="xkrsDiv">{{ item.xkrs }}人选课&nbsp;&nbsp;&nbsp;<a-button @click="toLivePage(item)" :disabled="!item.jsbh" class="buttonClass">进入课堂</a-button></div>
                </div>
              </div>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="teacherdskcList" tab="待上课程" >
          <a-row>
            <a-col :span="8" :key="index" v-for="(item, index) in teacherdskcList">
              <div class="ketangCard">
                <div class="rjkcTopDiv">
                  <span>{{ item.skrq }}&nbsp;{{ toWeek(item.WEEK) }}&nbsp;第{{ item.hh }}节</span>
                  <span class="nDayDiv">待上课程</span>
                </div>
                <div class="rjkcBodyDiv">
                  <div class="kcmcDiv">{{ item.kcmc }}</div>
                  <div><a-rate v-model:value="item.stars" disabled/></div>
                  <div class="skddDiv">{{ item.skdd }}</div>
                  <div class="xkrsDiv">{{ item.xkrs }}人选课&nbsp;&nbsp;&nbsp;<a-button @click="toLivePage(item)" :disabled="!item.jsbh" class="buttonClass">进入课堂</a-button></div>
                </div>
              </div>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="teacheryskcList" tab="已上课程" >
          <a-row>
            <a-col :span="8" :key="index" v-for="(item, index) in teacheryskcList">
              <div class="ketangCard">
                <div class="rjkcTopDiv">
                  <span>{{ item.skrq }}&nbsp;{{ toWeek(item.WEEK) }}&nbsp;第{{ item.hh }}节</span>
                  <span class="nDayDiv">已上课程</span>
                </div>
                <div class="rjkcBodyDiv">
                  <div class="kcmcDiv">{{ item.kcmc }}</div>
                  <div><a-rate v-model:value="item.stars" disabled/></div>
                  <div class="skddDiv">{{ item.skdd }}</div>
                  <div class="xkrsDiv">{{ item.xkrs }}人选课&nbsp;&nbsp;&nbsp;<a-button @click="toLivePage(item)" :disabled="!item.jsbh" class="buttonClass">进入课堂</a-button></div>
                </div>
              </div>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="teacherjlrkcbList" tab="近6日课程表" >
          <a-row>
            <a-col :span="8" :key="index" v-for="(item, index) in teacherjlrkcbList">
              <div class="ketangCard">
                <div class="rjkcTopDiv">
                  <span>{{ item.skrq }}&nbsp;{{ toWeek(item.WEEK) }}&nbsp;第{{ item.hh }}节</span>
                  <span class="nDayDiv">{{ item.nth }}天后</span>
                </div>
                <div class="rjkcBodyDiv">
                  <div class="kcmcDiv">{{ item.kcmc }}</div>
                  <div><a-rate v-model:value="item.stars" disabled/></div>
                  <div class="skddDiv">{{ item.skdd }}</div>
                  <div class="xkrsDiv">{{ item.xkrs }}人选课&nbsp;&nbsp;&nbsp;<a-button @click="toLivePage(item)" :disabled="!item.jsbh" class="buttonClass">进入课堂</a-button></div>
                </div>
              </div>
            </a-col>
          </a-row>
        </a-tab-pane>
      </a-tabs>
      <a hidden @click="initData">刷新</a>
    </div>
  </a-card>
  <baseModal ref="registerForm"/>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import baseModal from './baseModal.vue';
import { defHttp } from '/@/utils/http/axios';
import { addTingKeLog, getUserId } from '/@/views/site/utils';
import { onMounted } from 'vue';
import { useRouter } from 'vue-router'

onMounted(() => {
  initData();
})

const registerForm = ref();
const route = useRouter();

/**
 * 打开修改课程提醒的表单
 */
function openChangeKcPage(){
  registerForm.value.add();
}

function toLivePage(item){
  // route.push({ path:'/site/liveRoom',query:{ id: item.jsbh } })
  addTingKeLog(getUserId(),item.id);
  let routeData = route.resolve({ path:'/site/liveRoom',query:{ id: item.jsbh, ktId: item.id } });
  window.open(routeData.href, '_blank');
};


const weebMap = {
  '1': '星期一',
  '2': '星期二',
  '3': '星期三',
  '4': '星期四',
  '5': '星期五',
  '6': '星期六',
  '7': '星期日',
}
function toWeek(week){
  return weebMap[week];
}


const teacherjjskList = ref<any>([]);
const teacherzzskList = ref<any>([]);
const teacherdskcList = ref<any>([]);
const teacheryskcList = ref<any>([]);
const teacherjlrkcbList = ref<any>([]);

function initData() {
  getTeacherjjsk();
  getTeacherzzsk();
  getTeacherdskc();
  getTeacheryskc();
  getTeacherjlrkcb();
}

function getTeacherjjsk() {
  let params = {
    userid: getUserId(),
  };
  defHttp.get({ url: '/ktgl/kcKetangbiao/getTeacherjjsk', params }).then(res => {
    teacherjjskList.value = res;
  });
}

function getTeacherzzsk() {
  let params = {
    userid: getUserId(),
  };
  defHttp.get({ url: '/ktgl/kcKetangbiao/getTeacherzzsk', params }).then(res => {
    teacherzzskList.value = res;
  });
}

function getTeacherdskc() {
  let params = {
    userid: getUserId(),
  };
  defHttp.get({ url: '/ktgl/kcKetangbiao/getTeacherdskc', params }).then(res => {
    teacherdskcList.value = res;
  });
}

function getTeacheryskc() {
  let params = {
    userid: getUserId(),
  };
  defHttp.get({ url: '/ktgl/kcKetangbiao/getTeacheryskc', params }).then(res => {
    teacheryskcList.value = res;
  });
}

function getTeacherjlrkcb() {
  let params = {
    userid: getUserId(),
  };
  defHttp.get({ url: '/ktgl/kcKetangbiao/getTeacherjlrkcb', params }).then(res => {
    teacherjlrkcbList.value = res;
  });
}

</script>
<style lang="less" scoped>
.cardBody {
  background: #f3f3f4;
}
.ketangCard {
  margin: .5rem;
}
.rjkcTopDiv {
  background: #fff;
  padding: .9rem;
  color: #1ab394;
  font-size: 18px;
  font-weight: bold;
}
.nDayDiv {
  top: -14px;
  right: -28px;
  position: relative;
  background: #1ab394;
  color: #fff;
  font-weight: 200;
  padding: 2px 6px 2px 6px;
  border-radius: 0 0 0 5px;
}
.rjkcBodyDiv {
  margin-top: 1px;
  background: #fff;
  padding: 1rem 2rem 2rem 2rem;
}
.skddDiv {
  color: #1c84c6;
  font-size: 18px;
  font-weight: bold;
}
.xkrsDiv {
  padding-top: 2.5rem;
  font-size: 18px;
  font-weight: bold;
  text-align: right;
}

.kcmcDiv {
  font-size: 24px;
  font-weight: bold;
}
.buttonClass {
  background: #1c84c6;
  font-weight: 600;
  color: #fff;
  border-radius: 5px;
  line-height: 23px;
  &[disabled] {
    background: #f3f3f4;
  }
}
</style>