<route lang="json5" type="page">
{
  style: {
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <view class="flex flex-col h-screen">
    <view class="relative">
      <Navbar
        safeAreaInsetTop
        bg-color="transparent"
        :bordered="false"
        left-arrow
        title="专业详情"
        @click-left="navigatorBack"
      ></Navbar>
      <view class="custom-background h-[200rpx] w-full absolute top-0 left-0 z-[-1]"></view>
    </view>

    <scroll-view class="flex-1 flex flex-col pb-safe" :scroll-y="true">
      <view class="flex items-start p-[32rpx]" hover-class="none">
        <view class="flex flex-col">
          <text class="text-[40rpx] text-[#303030] font-semibold">{{ majorDetail.zymc }}</text>
          <text class="text-[#303030] text-[22rpx] mt-[6rpx]">{{ majorDetail.xlcc }}</text>
        </view>
      </view>
      <view class="flex items-center justify-between gap-[50rpx] px-[32rpx]">
        <view class="flex flex-col items-center">
          <text class="name">{{ majorDetail.ml }}</text>
          <text class="title">类别</text>
        </view>
        <view class="flex flex-col items-center">
          <text class="name">{{ majorDetail.zydm }}</text>
          <text class="title">专业代码</text>
        </view>
        <view class="flex flex-col items-center">
          <text class="name">--</text>
          <text class="title">授予学位</text>
        </view>
        <view class="flex flex-col items-center">
          <text class="name">{{ majorDetail.boyPercent }}:{{ majorDetail.girlPercent }}</text>
          <text class="title">男女比例</text>
        </view>
      </view>

      <view class="h-[16rpx] bg-[#f8f8f8] mt-[30rpx]"></view>

      <z-tabs
        :current="currentTab"
        :list="tabsList"
        :scrollCount="4"
        inactive-color="#BFBFBF"
        active-color="#303030"
        :bar-style="{ backgroundColor: '#1580FF' }"
        :tabsStyle="{ position: 'sticky', top: '0', zIndex: '9' }"
        @change="handleTabChange"
        v-bind="{} as any"
      />
      <MajorBaseInfo
        :zyjx="majorDetail.zyjs"
        :spec-id="specId"
        :kyfx="majorDetail.kyfx"
        v-show="currentTab === 0"
      />
      <MajorUniversity :spec-id="specId" v-show="currentTab === 1" />
      <EmploymentProspects :zydm="majorDetail.zydm" v-show="currentTab === 2" />
    </scroll-view>
  </view>
</template>

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

import { getMajorDetail } from '@/service/index/api'

interface CollegeInfo {
  boyPercent: number
  girlPercent: number
  jyfx: string[]
  kyfx: []
  ml: string
  simileZyList: []
  specId: string
  xcspImgUrl: null | string
  xk: string
  xlcc: string
  xsgm: string
  year: string
  zydm: string
  zyjs: string
  zymyd: []
  zytjzsList: []
  _id: string
  zymc: string
}

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

const majorDetail = ref<CollegeInfo>({
  xk: '',
  zydm: '',
  specId: '',
  _id: '',
  boyPercent: 0,
  girlPercent: 0,
  year: '',
  xsgm: '',
  xlcc: '',
  ml: '',
  zyjs: '',
  jyfx: [],
  zytjzsList: [],
  zymyd: [],
  kyfx: [],
  simileZyList: [],
  xcspImgUrl: '',
  zymc: '',
})

const specId = ref('')
onLoad((options: any) => {
  specId.value = options.specId || '0'
  getMajorDetail({ SpecId: specId.value }).then((resp) => {
    if (resp.code === 200) {
      majorDetail.value = resp.result as CollegeInfo
    }
  })
})

const tabsList = ['基本信息', '开设院校', '就业前景']
const currentTab = ref(0)

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

<style lang="scss" scoped>
:deep(.custom-background) {
  background-image: linear-gradient(
    180deg,
    rgb(177, 221, 250) 0,
    rgb(177, 221, 250) 14%,
    rgb(232, 244, 252) 68%,
    rgba(255, 255, 255, 1) 86%,
    rgba(255, 255, 255, 1) 100%,
    rgba(255, 255, 255, 1) 100%
  );
  background-position: 50% 50%;
  background-origin: padding-box;
  background-clip: border-box;
  background-size: auto auto;
}

:deep(.collect-btn) {
  border: 2rpx solid #eee !important;
  color: #636363 !important;

  width: unset !important;
  min-width: unset !important;
  border-radius: 12rpx !important;
  margin-right: 0 !important;
  padding: 12rpx !important;
  line-height: 1 !important;

  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.title {
  font-weight: 400;
  font-size: 22rpx;
  color: #86909c;
}

.name {
  font-weight: 500;
  font-size: 32rpx;
  color: #333333;
  margin-bottom: 6rpx;
}
</style>
