<script setup lang="ts" name="index">
import { ref, reactive, watchEffect } from 'vue'
import Tabbar from '@/components/Tabbar.vue'
import planIcon from '@/static/image/train/plan.png'
import courseIcon from '@/static/image/train/course.png'
import examIcon from '@/static/image/train/exam.png'
import partArrow from '@/static/image/train/partArrow.png'
import teacher from '@/static/image/train/teacher.png'
import topBack from '@/static/image/train/back.png'
import { myCourselist, publicCourselist } from '@/api/train/course.ts'
import { useDict } from '@/common/utils/dict'
import { useUserStore } from '../../store'
const { course_type } = useDict('course_type')
const userStore = useUserStore()



const partList = ref([
  {
    title: '我的培训计划',
    titleEn: 'Training Plan',
    path: '/plan/list',
    img: planIcon
  },
  {
    title: '我的课程计划',
    titleEn: 'Training Course',
    path: '/course/list',
    img: courseIcon
  },
  {
    title: '我的考试',
    titleEn: 'Exam',
    path: '/exam/list',
    img: examIcon
  }
])

function handleCourseDetail(item:any) {
  if(!userStore.accessToken) {
    uni.showModal({
      title: '提示',
      content: `暂未登录，请先登录`,
      success: (res) => {
        if (res.confirm) {
          uni.switchTab({
            url:'/pages/mine/index',
          })
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
    return
  }

  uni.navigateTo({
    url: '/course/sectionList?courseId='+item.id
  })
}
function pagePart(item:any) {
  if(!userStore.accessToken) {
    uni.showModal({
      title: '提示',
      content: `暂未登录，请先登录`,
      success: (res) => {
        if (res.confirm) {
          uni.switchTab({
            url:'/pages/mine/index',
          })
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      }
    })
    return
  }
  uni.navigateTo({
    url: item.path
  })
}

const queryParams = reactive({
  pageNum: 1,
  pageSize: 99,
  coursePublic: '1',
  courseType: ''
})
const active = ref(0)

function queryListByTrainType(type:any) {
  if(!userStore.accessToken) return
  queryParams.courseType = type
  publicCourselist(queryParams).then(res => {
    console.log(res.rows)
    if (res.rows) {
      hotCourseList.value = res.rows
    }
  })
}

const hotCourseList:any = ref([])
const handleChangeTab = (e) =>{
   console.log('active',active.value)
  console.log('e',e)

queryListByTrainType(course_type.value[e.detail.index].value )

}
watchEffect(() => {
  console.log('active',active.value)
  // if (course_type.value  && course_type.value.length > 0 && userStore.accessToken) {
  //   console.log('coursetype', course_type.value)
  //   queryListByTrainType(course_type.value[active.value].value)
  // }
})


</script>

<template>
  <div class="container train-container">
    <img class="back-img" :src="topBack" alt="">
    <div class="part-container">
      <div class="page-text">员工培训教育</div>
      <div
        class="part-item"
        v-for="(item,index) in partList"
        :key="index"
        @click="pagePart(item)">
        <div class="left">
          <div class="icon-container">
            <img class="item-img" :src="item.img" alt="">
          </div>
          <div class="title-container">
            <div class="top">{{ item.title }}</div>
            <div class="bottom">{{ item.titleEn }}</div>
          </div>
        </div>
        <div class="right">
          <img class="arrow-icon" :src="partArrow" alt="">
        </div>
      </div>
    </div>


    <div class="hot-course-container">
      <div class="hot-title">
        公共课程
        <div class="linear-line"/>
      </div>

      <template v-if="course_type.length > 0">
        <van-tabs
          v-model:active="active"
          class="tab-container"
          :ellipsis="false"
          line-height="0"
          @change="handleChangeTab"
        >
          <van-tab
            v-for="(item,index) in course_type"
            :key="index"
            :title="item.label"
          >
            

          </van-tab>
        </van-tabs>
        <div class="tab-container">
          <div class="list" v-if="hotCourseList && hotCourseList.length > 0">

            <div style="display: flex;flex-wrap: wrap;justify-content: space-between;">
              <div
                style="width: 48%;margin-bottom: 40rpx;"
                v-for="(item,index) in hotCourseList"
                :key="index"
                @tap="handleCourseDetail(item)"
              >
                <div class="course-card-container">
                  <img class="course-logo" :src="item.courseImage" alt="">
                  <div class="item-title">{{ item.courseName }}</div>
                  <div class="people-time">
                    <div class="teacher-logo-name">
                      <img class="teacher-logo" :src="teacher" alt="">
                      <span class="teacher-name">{{ item.coursePeople }}</span>
                    </div>
                    <span>{{ item.courseTime }}</span>
                  </div>
                </div>

              </div>

            </div>

          </div>
          <div v-else style="padding-bottom: 8rem;">
            <van-empty style="padding: 0;" description="暂无数据" />
          </div>
          <div style="height: 200rpx;"></div>
        </div>
        
      </template>

    </div>
  </div>
  <Tabbar :selected="3"/>
</template>

<style lang="less" scoped>

.train-container {
  padding-bottom: calc(12rpx + env(safe-area-inset-bottom) + 20rpx); /* 移除重复的safe-area-inset-bottom */
}

.container {
  min-height: 100vh;
  padding: 0 30rpx; /* 1.5rem→30rpx */
  // background-image: url('@/static/image/train/back.png');
  // background-size: contain;
  // background-repeat: no-repeat;
  position: relative;
  .back-img {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 616rpx;
    object-fit: contain;
  }
  .part-container {
    .page-text {
      color: #fff;
      margin-top: 93rpx; /* 4.65rem→93rpx */
      font-size: 44rpx;  /* 2.2rem→44rpx */
    }
    .part-item {
      background-color: #fff;
      margin-top: 30rpx;
      border-radius: 24rpx;
      border-bottom-right-radius: 90rpx;
      padding: 30rpx;
      display: flex;
      align-items: center;
      box-shadow: 0 4rpx 40rpx rgba(64, 103, 251, 0.14);
      background: linear-gradient(180deg, rgba(230, 235, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
      .left{
        flex: 1;
        display: flex;
        align-items: center;
        .icon-container {
          .item-img {
            height:118rpx;
            width:118rpx;
          }
        }
        .title-container {
          margin-left: 34rpx;
          .top {
            font-size: 36rpx;
            font-weight: 500;
            color: rgba(37, 37, 37, 1);
          }
          .bottom {
            font-size: 30rpx;
            color: rgba(37, 37, 37, 0.45);
          }
        }
      }
      .right{
        width: 70rpx;
        .arrow-icon {
          width: 46rpx;
          height: 46rpx;
        }
      }
    }
  }

  
.hot-course-container {
    margin-top: 46rpx;
    padding-bottom: calc(var(--footer-height) + var(--container-pd));
    .hot-title {
      font-size: 36rpx;
      font-weight: 500;
      color: rgba(37, 37, 37, 1);
      display: inline-block;
      position: relative;
      .linear-line {
        position: absolute;
        left: 0;
        bottom: 6rpx;
        width: 100%;
        height: 8rpx;
        opacity: 1;
        background: linear-gradient(270deg, rgba(0, 121, 255, 1) 0%, rgba(0, 161, 255, 0) 100%);
      }
    }
    .tab-container {
      margin-top: 34rpx;
      .list {
        margin-top: 26rpx;
        .course-card-container {
          
          padding: 10rpx;
          background-color: #fff;
          border-radius: 16rpx;
          background: rgba(255, 255, 255, 1);
          box-shadow: 0rpx 4rpx 40rpx rgba(64, 103, 251, 0.14);
          .course-logo {
            border-radius: 12rpx;
            border: 2rpx solid rgba(240, 239, 239, 1);
            width: 100%;
            height: 168rpx;
            object-fit: cover;
          }
          .item-title {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            font-size: 28rpx;
            font-weight: 500;
            color: rgba(62, 62, 62, 1);
          }
          .people-time {
            margin-top: 16rpx;
            font-size: 20rpx;
            color: rgba(37, 37, 37, 0.45);
            display: flex;
            align-items: center;
            justify-content: space-between;
            .teacher-logo-name {
              display: flex;
              align-items: center;
              .teacher-logo {
                height: 16rpx;
                width: 16rpx;
              }
              .teacher-name {
                margin-left: 8rpx;
              }
            }
          }
        }
      }
    }
    :deep(.van-tabs__nav){
      background-color: transparent;
    }
    :deep(.van-tab){
      background-color: #fff;
      padding: 0 var(--van-padding-sm);
      margin: 0 var(--van-padding-sm);
      border-radius: 8rpx;
      &:first-child{
        margin-left: 0;
      }
      &:last-child{
        margin-right: 0;
      }
      &--active{
        background-color: rgba(232, 242, 255, 1);
        color: rgba(55, 108, 220, 1);
      }
    }
  }

}


</style>
