<template>
  <ie-page>
    <z-paging ref="paging" v-model="list" :safe-area-inset-bottom="true" @query="loadData">
      <template #top>
        <ie-navbar title="职业库" />
        <ie-search v-model="keyword" placeholder="输入职业名称" @search="handleSearch" @clear="handleSearch" />
      </template>
      <view class="">
        <career-list :data="list" :search-mode="searchMode" @node-click="handleNodeClick" />
      </view>
    </z-paging>
  </ie-page>
</template>

<script lang="ts" setup>
import { Career } from '@/types';
import CareerList from './components/career-list.vue';
import { getCareerTree } from '@/api/modules/career';
import { useTransferPage } from '@/hooks/useTransferPage';

const { transferTo, routes } = useTransferPage();

const list = ref<Career.CareerItem[]>([]);
const keyword = ref('');
const searchMode = ref(false);
const paging = ref<ZPagingInstance>();
const loadData = (page: number, size: number) => {
  uni.$ie.showLoading();
  getCareerTree({ name: keyword.value }).then(res => {
    searchMode.value = keyword.value.trim() !== '';
    paging.value?.completeByNoMore(res.data, true);
  }).catch(() => paging.value?.complete(false))
    .finally(() => uni.$ie.hideLoading());
}
const handleSearch = () => {
  paging.value?.reload();
}
const handleNodeClick = (item: Career.CareerItem) => {
  transferTo(routes.careerDetail, {
    data: {
      code: item.code,
      name: item.name,
    }
  });
}
</script>

<style lang="scss" scoped></style>
