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

    <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"
    />
    <view class="flex-1 pb-safe flex flex-col overflow-y-auto">
      <MajorList
        class="h-full"
        :type="1050"
        :keyword="searchValue"
        v-show="currentTab === 0"
      ></MajorList>
      <MajorList
        class="h-full"
        :type="1070"
        :keyword="searchValue"
        v-show="currentTab === 1"
      ></MajorList>
      <MajorList
        class="h-full"
        :type="1060"
        :keyword="searchValue"
        v-show="currentTab === 2"
      ></MajorList>
    </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>
