<script setup lang="ts">
import ServiceIntro from '@/page/urge/service/components/ServiceIntro.vue'
import LearningCases from '@/page/urge/service/components/LearningCases.vue'
import Faq from '@/page/urge/service/components/Faq.vue'
import TeachingStaff from '@/page/urge/service/components/TeachingStaff.vue'

import { useRouter } from 'vue-router'
import { onBeforeMount } from 'vue'

const router = useRouter()

const activeClass = ref('intro')
const classList = [
  { id: 'intro', name: '服务介绍' },
  { id: 'cases', name: '学习案例' },
  { id: 'staff', name: '师资力量' },
  { id: 'faq', name: '常见问题' },
]

/** ==============获取当前是否有购买督学服务============ */
const isInspectorIng = ref<boolean>(false)
onBeforeMount(async () => {
  // const { data } = await orderApi.getIsInspectorIng()
  // const { data: result } = data
  // isInspectorIng.value = result?.purchasedInspector ?? false
})
// 购买过直接跳转到课表页，否则跳转到开通页
const enableInspect = () => {
  if (isInspectorIng.value) {
    router.push('/urge/timetable')
  } else {
    router.push('/urge/open')
  }
}
onActivated(() => {
  activeClass.value = 'intro'
})
</script>
<template>
  <div class="page">
    <div class="head">
      <BackBar leftText="督学服务" />
      <Btn width="272" height="80" tilt @click="enableInspect">开启督学</Btn>
    </div>
    <div class="content">
      <div class="content-sidebar">
        <Sidebar v-model="activeClass" :config="classList" class="left-vbar" />
      </div>
      <div class="content-main">
        <ServiceIntro v-if="activeClass === 'intro'" />
        <LearningCases v-else-if="activeClass === 'cases'" />
        <TeachingStaff v-else-if="activeClass === 'staff'" />
        <Faq v-else-if="activeClass === 'faq'" />
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100%;
  @include main_bg;
  padding: $space-4_h $space-6;

  .head {
    display: flex;
    padding-right: 24px;

    :deep(.x-button) {
      margin-left: auto;
    }
  }
}

.content {
  display: flex;
  margin-top: 4.67vh;
}

.content-sidebar {
  width: 240px;
  flex-shrink: 0;
}

.content-main {
  margin-top: -2.67vh;
  margin-left: 48px;
}
</style>
