<template>
  <view class="ezy-xuanke-page">
    <!-- 返回区域 -->
    <view class="icon-title-navBar-box">
      <text class="nav-bar-title">选课</text>
    </view>
    <view class="ezy-page-body">
      <!-- 头部区域 -->

      <view class="xuanke-tab-box">
        <!-- 动画按钮 -->
        <ezyActiveVue class="ezy-btn-active tab-item" v-for="item in data.list" :key="item.value"
                      :class="{active: item.value == data.chanpinActiveSelect}" @aclick="handleSelectChanpin(item)">
          {{item.name}}</ezyActiveVue>
      </view>
      <!-- 英语列表 -->
      <template v-if="data.chanpinActiveSelect == 1">
        <view class="ezy-no-sj" v-if="data.list.length">
          <icon></icon>
          <text>暂无数据</text>
        </view>
      </template>
      <!-- 数学列表 -->
      <shuxueListVue v-if="data.chanpinActiveSelect == 2" :list="data.shuxueList"></shuxueListVue>
      <!-- 语文列表 -->
      <template v-if="data.chanpinActiveSelect == 3">
        <view class="ezy-no-sj" v-if="data.list.length">
          <icon></icon>
          <text>暂无数据</text>
        </view>
      </template>
    </view>
  </view>
  <custom-tab-bar :show="true" :current-index="currentTabIndex" />
</template>

<script setup>
import {
  reactive, ref
} from "vue";
import shuxueListVue from "./components/shuxueList.vue";
import {
  onLoad,
  onShow
} from "@dcloudio/uni-app"
import * as shuxueHttp from "@/api/chanpinShuxue.js"
import CustomTabBar from "@/components/custom-tabbar/index.vue";
import ezyActiveVue from "@/components/ezyActive/ezyActive.vue";

let currentTabIndex = ref(0)
const data = reactive({
  list: [{
    name: '英语',
    value: 1
  },
    {
      name: '数学',
      value: 2
    },
    {
      name: '语文',
      value: 3
    },
  ],
  chanpinActiveSelect: 2,

  shuxueList: [],
})

function getShuxueList() {
  shuxueHttp.getShuxueChanpinList().then(res => {
    data.shuxueList = res.data;
  })
}

function handleSelectChanpin(item) {
  data.chanpinActiveSelect = item.value
}
onShow(() => {
  currentTabIndex.value = 0;
})
onLoad(() => {
  uni.hideTabBar()
  getShuxueList()
})
</script>