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

<template>
  <view class="h-screen flex flex-col">
    <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 :scroll-y="true" class="pb-safe flex-1">
      <view class="flex flex-col px-32rpx">
        <text class="text-[36rpx] text-[#000] font-bold mt-[24rpx] mb-[22rpx]">
          {{ professionInfo.career }}
        </text>
        <image
          class="w-full h-[264rpx] rounded-[8rpx]"
          :src="professionInfo.img_url"
          mode="aspectFill"
        />
      </view>
      <view class="h-[18rpx] bg-[#F8F8F8] mt-[24rpx] mb-[16rpx]"></view>
      <view class="">
        <z-tabs
          :current="currentTab"
          :list="tabsList"
          :scrollCount="4"
          inactive-color="#BFBFBF"
          active-color="#303030"
          :bar-style="{ backgroundColor: '#1580FF', width: '500rpx' }"
          :tabsStyle="{ position: 'sticky', top: '0', zIndex: '9' }"
          bottom-space="1rpx"
          @change="handleTabChange"
          v-bind="{} as any"
        />
        <CareerInfo
          :career-info="{ intro: professionInfo.intro, definition: professionInfo.definition }"
          v-show="currentTab === 0"
        />
        <KnowledgeBackground
          :knowledge-info="professionInfo.json_knowledge"
          :jsonCurriculum="professionInfo.json_curriculum"
          v-show="currentTab === 1"
        />
        <VocationalSkill
          :pro-skill="professionInfo.json_skill"
          :qualification="professionInfo.json_qualification"
          :ethics="professionInfo.ethics"
          v-show="currentTab === 2"
        />
        <DevelopmentProspect
          :prospect="professionInfo.json_prospect"
          :salary="professionInfo.json_salary"
          v-show="currentTab === 3"
        />
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { getProfessionInfo } from '@/service/index/api'

import Navbar from '@/pages-sub/components/navbar/Navbar.vue'
import zTabs from '@/pages-sub/uni_modules/z-tabs/components/z-tabs/z-tabs.vue'
import CareerInfo from './components/CareerInfo.vue'
import KnowledgeBackground from './components/KnowledgeBackground.vue'
import VocationalSkill from './components/VocationalSkill.vue'
import DevelopmentProspect from './components/DevelopmentProspect.vue'

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

const tabsList = ['职业概况', '知识背景', '职业技能', '发展前景']
const currentTab = ref(0)

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

type ProfessionInfo = {
  career: string
  img_url: string
  intro: string
  definition: string
  json_knowledge: {
    diplomas: string
    pro: string
    trade: string
  }
  json_curriculum: {
    important: string
  }
  json_skill: {
    skill_general: string
    skill_pro: string
  }
  json_qualification: {
    necessary: string
    addition: string
  }
  ethics: string
  json_prospect: {
    career: string
    industry: string
    person: string
  }
  json_salary: {
    structure: string
    satisfaction: string
    welfare: string
  }
}

const professionInfo = ref<ProfessionInfo>({
  career: '',
  img_url: '',
  intro: '',
  definition: '',
  json_knowledge: {
    diplomas: '',
    pro: '',
    trade: '',
  },
  json_curriculum: {
    important: '',
  },
  json_skill: {
    skill_general: '',
    skill_pro: '',
  },
  json_qualification: {
    necessary: '',
    addition: '',
  },
  ethics: '',
  json_prospect: {
    career: '',
    industry: '',
    person: '',
  },
  json_salary: {
    structure: '',
    satisfaction: '',
    welfare: '',
  },
})
const professionId = ref('')

onLoad((options) => {
  professionId.value = options?.id
  getProfessionInfo({ id: professionId.value }).then((resp) => {
    if (resp.code === 200) {
      professionInfo.value = resp.result as ProfessionInfo
    }
  })
})
</script>

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