<template>
    <view class="supervision-service">
        <view class="service-tabs">
          <view class="tabs-item" v-for="(item, index) in serviceTabs" :class="{'active': activeIndex === index}" @click="changeTabActive(index)">
            <view class="item-text">{{ item }}</view>
          </view>
        </view>
        <view class="tabs-content">
          <course-table v-if="activeIndex === 0" />
          <report v-else-if="activeIndex === 1" />
          <order v-else-if="activeIndex === 2" />
        </view>

      <view class="superintendent-renewal" v-if="[0, 1].includes(activeIndex)">
        <wd-button :round="false" class="btn" @click="toRenewal">督学续期</wd-button>
      </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import CourseTable from "./components/CourseTable.vue";
import Report from "./components/Report.vue";
import Order from "./components/Order.vue";

const serviceTabs = ref<Array<string>>(["课表", "报告", "订单"]);

const activeIndex = ref<number>(0);

const changeTabActive = (index: number) => {
  activeIndex.value = index;
}

const toRenewal = () => {
  uni.navigateTo({
    url: '/pages/parents/supervisionService/buyService'
  })
}

</script>

<style scoped lang="scss">
.supervision-service {
  min-height: 100vh;
  background-color: #f7f8fa;
  .service-tabs {
    height: 110rpx;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 88rpx;
    padding: 24rpx 0 8rpx 0;
    .tabs-item {
      height: 80rpx;
      .item-text {
        height: 66rpx;
        width: 100rpx;
        line-height: 66rpx;
        text-align: center;
        border-radius: 10rpx;
        background-color: #F9F9FB;
        font-size: 30rpx;
        color: #0A1F13;
      }
      &.active {
        .item-text {
          background-color: #615DFF;
          color: #fff;
          position: relative;
          &::after {
            content: "";
            position: absolute;
            bottom: -14rpx;
            left: 50%;
            transform: translateX(-50%) rotate(45deg);
            width: 28rpx;
            height: 28rpx;
            background-color: #615DFF;
          }
        }
      }
    }
  }
  .tabs-content {
    padding: 30rpx;
    height: auto;
  }
}
.superintendent-renewal {
  height: 122rpx;
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  .btn {
    width: 440rpx;
    height: 90rpx;
    font-size: 30rpx;
    font-weight: 500;
    background-color: #615DFF;
  }
}
</style>
