<template>
  <BasicLayout>
    <view class="p-15">
      <!-- 顶部蓝色背景横幅 -->
      <view class="banner-section">
        <view class="banner-placeholder">
          <view class="banner-content">
            <text class="banner-title">兴趣课程</text>
            <text class="banner-school">泸州市实验小学城西学校</text>
          </view>
        </view>
      </view>
      
      <!-- 课程类型选项卡 -->
      <view class="my-course-section">
        <view class="section-title">
          <u-icon name="calendar" size="18" color="#1976d2"></u-icon>
          <text class="title-text">我的课程</text>
        </view>
        
        <view class="tabs-container">
          <view 
            class="tab-item" 
            :class="{ 'active': activeTab === 'basketball' }"
            @click="switchTab('basketball')"
          >
            <text>篮球</text>
          </view>
          <view 
            class="tab-item"
            :class="{ 'active': activeTab === 'football' }"
            @click="switchTab('football')"
          >
            <text>足球</text>
          </view>
        </view>
        
        <!-- 篮球课程信息卡片 -->
        <view class="course-card" v-if="activeTab === 'basketball'">
          <view class="course-image-placeholder"></view>
          <view class="course-info">
            <text class="course-name">篮球</text>
            <view class="course-detail">
              <text class="detail-label">开课老师：</text>
              <text class="detail-value">叶老师</text>
            </view>
            <view class="course-detail">
              <text class="detail-label">上课地点：</text>
              <text class="detail-value">教学楼3楼</text>
            </view>
          </view>
        </view>
        
        <!-- 足球课程信息卡片 -->
        <view class="course-card" v-if="activeTab === 'football'">
          <view class="course-image-placeholder"></view>
          <view class="course-info">
            <text class="course-name">足球</text>
            <view class="course-detail">
              <text class="detail-label">开课老师：</text>
              <text class="detail-value">王老师</text>
            </view>
            <view class="course-detail">
              <text class="detail-label">上课地点：</text>
              <text class="detail-value">操场</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 教学计划 -->
      <view class="teaching-plan-section">
        <view class="section-title-bar">
          <text class="title-text">教学计划</text>
        </view>
        
        <!-- 篮球教学计划 -->
        <view class="plan-content" v-if="activeTab === 'basketball'">
          <view class="plan-item">
            <text class="plan-phase">第一阶段：</text>
            <text class="plan-desc">了解机器人的组成，知道每个零件的名称及用途，认识机器人的结构。</text>
          </view>
          
          <view class="plan-item">
            <text class="plan-phase">第二阶段：</text>
            <text class="plan-desc">在老师的引导下，分组搭建机器人，注意引导幼儿理解机器人的数据线连接和遥控器方向的关系。</text>
          </view>
          
          <view class="plan-item">
            <text class="plan-phase">第三阶段：</text>
            <text class="plan-desc">学会操控机器人的移动方向，并练习把魔方根据要求推到指定位置。</text>
          </view>
          
          <view class="plan-item">
            <text class="plan-phase">第四阶段：</text>
            <text class="plan-desc">组织幼儿参加创客机器人比赛。</text>
          </view>
        </view>
        
        <!-- 足球教学计划 -->
        <view class="plan-content" v-if="activeTab === 'football'">
          <view class="plan-item">
            <text class="plan-phase">第一阶段：</text>
            <text class="plan-desc">基础训练，包括传球、控球和基本规则学习。</text>
          </view>
          
          <view class="plan-item">
            <text class="plan-phase">第二阶段：</text>
            <text class="plan-desc">进阶技巧学习，包括带球跑动、射门和防守基础。</text>
          </view>
          
          <view class="plan-item">
            <text class="plan-phase">第三阶段：</text>
            <text class="plan-desc">团队配合训练，学习简单的战术配合和位置意识。</text>
          </view>
          
          <view class="plan-item">
            <text class="plan-phase">第四阶段：</text>
            <text class="plan-desc">小型比赛实践，培养学生的团队协作能力和比赛经验。</text>
          </view>
        </view>
      </view>
      
      <!-- 课堂随拍 -->
      <view class="class-photos-section">
        <view class="section-title-bar">
          <text class="title-text">课堂随拍</text>
        </view>
        
        <!-- 篮球课堂照片 -->
        <view class="photos-grid" v-if="activeTab === 'basketball'">
          <view class="photo-placeholder"></view>
          <view class="photo-placeholder"></view>
          <view class="photo-placeholder"></view>
          <view class="photo-placeholder"></view>
        </view>
        
        <!-- 足球课堂照片 -->
        <view class="photos-grid" v-if="activeTab === 'football'">
          <view class="photo-placeholder football-photo"></view>
          <view class="photo-placeholder football-photo"></view>
          <view class="photo-placeholder football-photo"></view>
          <view class="photo-placeholder football-photo"></view>
        </view>
      </view>
    </view>
    <template #bottom>
      <view class="white-bg-color py-5">
        <view class="flex-row items-center pb-10 pt-5">
          <u-button text="取消" class="ml-15 mr-7" :plain="true" @click="navigateBack"/>
          <u-button text="退课申请" class="mr-15 mr-7" type="primary" @click="submit"/>
        </view>
      </view>
    </template>
  </BasicLayout>
</template>

<script lang="ts" setup>
import { navigateBack } from "@/utils/uniapp";
import { ref } from "vue";
import { xkFindDqXsApi } from "@/api/base/server";
import { useUserStore } from "@/store/modules/user";
const { getCurXs } = useUserStore();

// 当前激活的选项卡，默认为篮球
const activeTab = ref('basketball');

// 切换选项卡
function switchTab(tab: string) {
  activeTab.value = tab;
}

function submit() {
  const courseName = activeTab.value === 'basketball' ? '篮球' : '足球';
  
  uni.showModal({
    title: '确认退课',
    content: `确定要退出${courseName}课程吗？`,
    success: (res) => {
      if (res.confirm) {
        uni.showToast({
          title: `${courseName}退课申请已提交`,
          icon: 'none'
        });
      }
    }
  });
}

onMounted(async () => {
  // Make onMounted async
  xkFindDqXsApi({
		xsId: getCurXs.id,
		xklxId: '816059832'
	}).then(res => {
    // 根据接口返回的result判断是否已报名
    if (res && res.resultCode === 1) {
			console.log(res)
    } else {
      // 接口调用成功但返回错误
      console.warn("检查获取当前学期俱乐部接口返回错误:", res);
    }
  })
  .catch((error) => {
	// 接口调用失败
	console.error("调用获取当前学期俱乐部接口失败:", error);
  });
});
</script>

<style lang="scss" scoped>
/* 顶部蓝色背景横幅 */
.banner-section {
  margin-bottom: 15px;
  
  .banner-placeholder {
    height: 120px;
    background-color: #3986FF;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    .banner-content {
      text-align: center;
      
      .banner-title {
        font-size: 22px;
        color: #ffffff;
        font-weight: 500;
        margin-bottom: 8px;
        display: block;
      }
      
      .banner-school {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.9);
      }
    }
  }
}

/* 我的课程 */
.my-course-section {
  margin-bottom: 15px;
  
  .section-title {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    
    .title-text {
      font-size: 16px;
      font-weight: 500;
      color: #303133;
      margin-left: 6px;
    }
  }
  
  .tabs-container {
    display: flex;
    border-bottom: 1px solid #ebeef5;
    margin-bottom: 15px;
    
    .tab-item {
      padding: 12px 0;
      margin-right: 20px;
      position: relative;
      
      text {
        color: #606266;
        font-size: 15px;
      }
      
      &.active {
        text {
          color: #1976d2;
          font-weight: 500;
        }
        
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 2px;
          background-color: #1976d2;
        }
      }
    }
  }
  
  .course-card {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    align-items: center;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
    
    .course-image-placeholder {
      width: 120px;
      height: 100px;
      background-color: #f0f0f0;
      border-radius: 6px;
      margin-right: 15px;
      flex-shrink: 0;
    }
    
    .course-info {
      flex: 1;
      
      .course-name {
        font-size: 18px;
        font-weight: 500;
        color: #303133;
        margin-bottom: 10px;
      }
      
      .course-detail {
        display: flex;
        margin-bottom: 6px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .detail-label {
          color: #606266;
          font-size: 14px;
        }
        
        .detail-value {
          color: #303133;
          font-size: 14px;
        }
      }
    }
  }
}

/* 教学计划 */
.teaching-plan-section {
  margin-bottom: 15px;
  background-color: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
  
  .section-title-bar {
    padding: 12px 15px;
    border-bottom: 1px solid #f2f2f2;
    
    .title-text {
      font-size: 16px;
      font-weight: 500;
      color: #303133;
    }
  }
  
  .plan-content {
    padding: 15px;
    
    .plan-item {
      margin-bottom: 15px;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
    
    .plan-phase {
      font-size: 15px;
      font-weight: 500;
      color: #303133;
    }
    
    .plan-desc {
      font-size: 14px;
      color: #606266;
      line-height: 1.5;
    }
  }
}

/* 课堂随拍 */
.class-photos-section {
  background-color: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
  margin-bottom: 60px;
  
  .section-title-bar {
    padding: 12px 15px;
    border-bottom: 1px solid #f2f2f2;
    
    .title-text {
      font-size: 16px;
      font-weight: 500;
      color: #303133;
    }
  }
  
  .photos-grid {
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
    
    .photo-placeholder {
      width: calc(50% - 8px);
      height: 110px;
      background-color: #f0f0f0;
      border-radius: 6px;
      margin-right: 8px;
      margin-bottom: 8px;
      
      &:nth-child(2n) {
        margin-right: 0;
      }
      
      &:nth-child(3), &:nth-child(4) {
        margin-bottom: 0;
      }
      
      &.football-photo {
        background-color: #f5f5f5;
      }
    }
  }
}
</style>
