<template>
  <ie-page :fix-height="true" bg-color="#F6F8FA" :safe-area-inset-bottom="false">
    <ie-navbar :title="pageTitle" />
    <ie-auto-resizer>
      <ie-tabs-swiper v-model="current" :list="tabs" :scrollable="false">
        <template #career-overview>
          <career-overview v-if="code" :code="code" @change-job="handleChangeJob" />
        </template>
        <template #related-jobs>
          <related-jobs v-if="code" :code="code" :name="jobName" />
        </template>
      </ie-tabs-swiper>
    </ie-auto-resizer>
  </ie-page>
</template>
<script lang="ts" setup>
import { SwiperTabItem } from '@/types';
import { useTransferPage } from '@/hooks/useTransferPage';
import CareerOverview from './components/career-overview.vue';
import RelatedJobs from './components/related-jobs.vue';

const current = ref(0);
const tabs = ref<SwiperTabItem[]>([
  {
    name: '职业介绍',
    slot: 'career-overview'
  },
  {
    name: '就业岗位',
    slot: 'related-jobs'
  },
]);
const { prevData } = useTransferPage();
const code = ref('');
const jobName = ref('');
const pageTitle = computed(() => {
  return prevData.value.name || '职业详情';
});

const handleChangeSwiper = (e: any) => {
  current.value = e.detail.current;
}
const handleChangeJob = (name: string) => {
  current.value = 1;
  jobName.value = name;
}

onLoad(() => {
  code.value = prevData.value.code;
});
</script>
<style lang="scss" scoped></style>