<route lang="json5" type="page">
{
  style: {
    navigationStyle: 'custom',
  },
  needLogin: true,
}
</route>
<template>
  <view class="flex flex-col h-screen">
    <Navbar
      safeAreaInsetTop
      bg-color="transparent"
      :bordered="false"
      left-arrow
      title="查职业"
      @click-left="navigatorBack"
      content-class="justify-start"
    >
      <template #title>
        <SearchInput placeholder="搜索专业" @confirm="handleChange"></SearchInput>
      </template>
    </Navbar>

    <scroll-view class="flex-1 pb-safe flex flex-col" :scroll-y="true">
      <z-tabs
        :current="currentTab"
        :list="tabsList"
        :scrollCount="4"
        inactive-color="#BFBFBF"
        active-color="#303030"
        :bar-style="{ backgroundColor: '#1580FF' }"
        :tabsStyle="{ position: 'sticky', top: '0', zIndex: '99' }"
        @change="handleTabChange"
        v-bind="{} as any"
      />

      <MajorList :type="1050" :keyword="searchValue" v-show="currentTab === 0"></MajorList>
      <MajorList :type="1070" :keyword="searchValue" v-show="currentTab === 1"></MajorList>
      <MajorList :type="1060" :keyword="searchValue" v-show="currentTab === 2"></MajorList>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import MajorList from './components/MajorList.vue'
import zTabs from '@/pages-sub/uni_modules/z-tabs/components/z-tabs/z-tabs.vue'
import Navbar from '@/pages-sub/components/navbar/Navbar.vue'
import SearchInput from '@/pages-sub/components/input/SearchInput.vue'

const searchValue = ref('')

const navigatorBack = () => {
  uni.navigateBack()
}

const handleChange = (value: string) => {
  searchValue.value = value
}

const tabsList = ['普通本科', '职教本科', '高职专科']
const currentTab = ref(0)

const handleTabChange = (index: number) => {
  currentTab.value = index
}
</script>

<style lang="scss" scoped>
@import '../styles/navbar_search.scss';
@import '@/pages-sub/home/styles/navbar-custom.scss';
</style>
