<template>
  <view class="supervision">
    <BackBar title="督学服务" />
    <wd-tabs v-model="curTab">
      <block v-for="item in tabsContent" :key="item">
        <wd-tab :title="item.title" :name="item.id">
          <view v-if="curTab === '1'" class="content">
            <serviceDes />
          </view>
          <view v-if="curTab === '2'" class="content">
            <serviceCase></serviceCase>
          </view>
          <view v-if="curTab === '3'" class="content">
            <serviceTeacher />
          </view>
          <view v-if="curTab === '4'" class="content">
            <serviceAskedQuestions></serviceAskedQuestions>
          </view>
        </wd-tab>
      </block>
    </wd-tabs>
    <view class="btn-open">
      <wd-button class="open-btn" @click="openService">开启督学</wd-button>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import router from '@/router/router';
import serviceDes from './components/serviceDes.vue';
import serviceCase from './components/serviceCase.vue';
import serviceTeacher from './components/serviceTeacher.vue';
import serviceAskedQuestions from './components/serviceAskedQuestions.vue';

const curTab = ref('1');
const tabsContent = ref([
  {
    id: '1',
    title: '服务介绍',
  },
  {
    id: '2',
    title: '学习案例',
  },
  {
    id: '3',
    title: '师资力量',
  },
  {
    id: '4',
    title: '常见疑问',
  },
]);

const openService = () => {
  console.log('openService');

  router.navigateTo({
    path: `/pages/parents/supervisionService/buyService`,
  });
};
function back() {
  router.navigateBack();
}
</script>
<style scoped lang="scss">
.supervision {
  background-color: #f7f8fa;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 50px;
  .btn-open {
    position: fixed;
    width: 100%;
    height: 50px;
    background-color: #fff;
    bottom: 0;
    padding-top: 10px;
    border-top: 1px solid #eee;
    .open-btn {
      display: block;
      width: 220px;
      border-radius: 10px !important;
      margin: auto;
      margin-bottom: calc(20px + env(safe-area-inset-bottom));
    }
  }
}
::v-deep .wd-tabs__nav {
  height: 60px;
}
::v-deep .wd-tabs__nav-container {
  padding: 12px;
}
::v-deep .wd-tabs__container {
  padding: 0 12px;
}
::v-deep .wd-tabs {
  background-color: transparent;
}

::v-deep .wd-tabs__nav-item {
  box-sizing: border-box;
  margin: 0 3px;
  height: 35px;
  line-height: 35px;
  border-radius: 5px;
  transition: none;
  background-color: #f9f9fb;
}
::v-deep .wd-tabs__line {
  display: none;
}

::v-deep .wd-tabs__nav-item.is-active {
  background-color: #615dff;
  color: #f1f1f1;
  position: relative;
  z-index: 1;
  &::after {
    display: block;
    content: ' ';
    width: 13px;
    height: 13px;
    background-color: #615dff;
    border-radius: 1px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0) rotateZ(45deg);
    bottom: -3px;
    z-index: 2;
  }
}
</style>
