<template>
  <div>
    <div style="color:#1c84c6;font-weight: 600;font-size: 16px;">
      以下是 <span>2023-04-02</span><span>第01、02节课</span> 的课表
    </div>
    <a-row style="margin-top:20px;">
      <a-col :span="4">
        <a-form-item label="" style="padding: 10px;">
          <a-date-picker
            :showTime="false"
            valueFormat="YYYY-MM-DD"
            :placeholder="'请选择结束时间'"
            v-model:value="rkbqueryParam.endTime"
          ></a-date-picker>
        </a-form-item>
      </a-col>
      <a-col :span="4">
        <a-form-item label="" style="padding: 10px;">
          <JDictSelectTag placeholder="请选择院系" v-model:value="rkbqueryParam.szdw" :dictCode="`tkrszdw_view,college,college`"/>
        </a-form-item>
      </a-col>
      <a-col :span="4">
        <a-form-item label="" style="padding: 10px;">
          <JDictSelectTag placeholder="请选择节次" v-model:value="rkbqueryParam.kkdw" :dictCode="`kc_kkdw_view,kkdw,kkdw`" />
        </a-form-item>
      </a-col>
      <a-col :span="4">
        <a-form-item label="" style="padding: 10px;">
          <JDictSelectTag placeholder="请选择课程性质" v-model:value="rkbqueryParam.kcxz" dictCode="kc_kcxz"/>
        </a-form-item>
      </a-col>
      <a-col :span="4">
        <a-form-item label="" style="padding: 10px;">
          <a-input placeholder="请输入课程或教师名称" v-model:value="rkbqueryParam.ywmc"></a-input>
        </a-form-item>
      </a-col>
      <a-col :span="4" style="padding: 10px;">
        <a-button type="primary" @click="rkbLoadData" style="background-color:  rgb(26, 179, 148);">查询</a-button>
      </a-col>
    </a-row>
    
    <a-tabs v-model:activeKey="rkbActiveKey" type="card">
      <a-tab-pane key="1">
        <template #tab>
          <div>
            <div style="float: left;">完全线下课程</div><div style="background-color: rgb(26, 179, 148);color: rgb(255, 255, 255);border-radius: 18px;width: 22px;text-align: center;float: left;margin-left: 10px;">20</div>
          </div>
        </template>
        <a-row class="rowGutter" :gutter="[16,16]">
          <a-col :xs="{ span: 24 }" :sm="{ span: 8 }" :lg="{ span: 6 }" v-for="(item,index) in [{},{},{},{},{},{}]" :key="index" style="margin-bottom: 40px;">
            <div style="border: 2px #eef1f2 solid;">
              <div>
                <div style="width: 100%;height: 20px;background-color: #1c84c6;"></div>
                <div style="width:100%;white-space:normal; word-break:break-all;overflow:hidden;padding: 10px;height: 70px;font-weight: 600;font-size: 16px;">
                  灾害风险防范{{index}}
                </div>
              </div>
              <a-divider style="margin: 0px;color: #eef1f2;"/>
              <div style="padding: 20px;font-weight: 600;">
                <a-row>
                  <a-col :span="16">
                    <div style="height: 30px;font-size: 16px;">张继权</div>
                    <div style="height: 30px;font-size: 14px;">环境学院环境</div>
                  </a-col>
                  <a-col :span="8" style="text-align: center;height: 70px;">
                    <div style="color: #1c84c6;font-size: 24px;font-weight: 600;">30</div>
                    <div style="font-size: 14px;">选课人数</div>
                  </a-col>
                  <a-col :span="24" style="margin-top:20px;">
                    <div>
                      第<span>01、02</span>节
                    </div>
                  </a-col>
                  <a-col :span="24">
                    <div style="width:100%;text-align: center;">
                      —————线下上课地点—————
                    </div>
                  </a-col>
                  <a-col :span="24">
                    <div style="height: 60px;">
                      环境学院107室
                    </div>
                  </a-col>
                  <a-col :span="24">
                    <a-button type="primary" style="background-color: #1c84c6;float: left;font-weight: 600;">预约</a-button>
                    <a-button type="primary" style="background-color: #1c84c6;float: right;font-weight: 600;">报错</a-button>
                  </a-col>
                </a-row>
              </div>
            </div>
          </a-col>
        </a-row>
      </a-tab-pane>
      <a-tab-pane key="2">
        <template #tab>
          <div>
            <div style="float: left;">腾讯会议</div><div style="background-color: rgb(26, 179, 148);color: rgb(255, 255, 255);border-radius: 18px;width: 22px;text-align: center;float: left;margin-left: 10px;">20</div>
          </div>
        </template>
        <div>
          Content of Tab Pane 2
        </div>
        
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
  const rkbqueryParam = ref<any>({});
  const rkbActiveKey = ref('1');
  function rkbLoadData(){

  }
</script>
