<template>
  <a-card>
    <a-row>
        <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 8 }" :key="index" v-for="(item, index) in allList" >
          <div class="ketangCard ketangCardcol"  >
            <div class="rjkcTopDiv">
              <div style="text-align: left;"><span>{{ toWeek(item.week) }}，第{{ item.hh }}节</span></div>
            </div>
            <div class="rjkcBodyDiv">
              <div class="kcmcDiv">{{ item.kcmc }}</div>
              <div class="skddDiv" style="margin-top:20px;">{{ item.skdd }}</div>
              <div class="xkrsDiv">{{ item.xkrs }}人选课&nbsp;&nbsp;&nbsp;<a-button class="buttonClass" @click="openKechengDetail(item)">进入课程</a-button></div>
            </div>
          </div>
        </a-col>
      </a-row>
  </a-card>
</template>

<script lang="ts" setup>
  import { ref, onMounted  } from 'vue';

  import { getUserSf,getSysConfig } from '/@/views/site/utils/index';
  import { defHttp } from '/@/utils/http/axios';
const allList = ref<any>([]);
 

const weebMap = {
  '1': '星期一',
  '2': '星期二',
  '3': '星期三',
  '4': '星期四',
  '5': '星期五',
  '6': '星期六',
  '7': '星期日',
}
function toWeek(week){
  return weebMap[week];
}
  //进入就加载
  onMounted(() => {
    defHttp.get({ url: '/ktgl/kcKechengbiao/getKechengbiaolist',params:{checkType:'0'}}).then((res) => {
      console.log(res);
      allList.value = res.records;
    });
  });
 
 function openKechengDetail(item){
 console.log(`🚀 ~ openKechengDetail ~ item:`, item)
  window.open(`/site/dqkcDetail?kechengbiaoid=`+item.id,"_blank");
 }
</script>
<style lang="less" scoped>
.ketangCard {
  margin: .5rem;
}
.ketangCardcol{
  background-color: #f3f3f3;
  padding: 1px;
}
.rjkcTopDiv {
  background: #fff;
  padding: .9rem;
  color: #1ab394;
  font-size: 18px;
  font-weight: bold;
  text-align:right;
}
.nDayDiv {
  top: -14px;
  right: -14px;
  position: relative;
  background: #1ab394;
  color: #fff;
  font-weight: 200;
  padding: 2px 6px 2px 6px;
  border-radius: 0 0 0 5px;
  text-align:left;
}
.rjkcBodyDiv {
  margin-top: 1px;
  background: #fff;
  padding: 1rem 2rem 2rem 2rem;
}
.kcmcDiv {
  font-size: 24px;
  font-weight: bold;
}
.skddDiv {
  color: #1c84c6;
  font-size: 16px;
  // font-weight: bold;
}
.xkrsDiv {
  padding-top: 2.5rem;
  font-size: 18px;
  font-weight: bold;
  text-align: right;
}
.buttonClass {
  background: #1c84c6;
  font-weight: 600;
  color: #fff;
  border-radius: 5px;
  line-height: 23px;

  &[disabled] {
    background: #6cafda;
  }
}
</style>