<template>
	<slot name="header"></slot>
	<view class="content">
		<view v-for="(item,index) in items" :key="item.label" class="content-box" @tap="handleTo(item)">
			<view class="content-box-value">
				{{ item.count }}
			</view>
			<view class="content-box-title">
				{{ item.label }}
			</view>
		</view>
	</view>
	
</template>

<script setup>
import { ref, watch } from 'vue';
import { getRecommendCount } from '@/api/position.js'
import { getDict } from '@/hooks/useDictionaries.js'
import { onShow } from '@dcloudio/uni-app'
// const props = defineProps({
// 	type: {
// 		type: String,
// 		default: 'menduner_hire_job_cv_status'
// 	}
// })

import { userStore } from '@/store/user'
const useUserStore = userStore()

// 监听登录状态
watch(() => useUserStore.refreshToken, (newVal, oldVal) => {
	const reset = Boolean(!newVal)
	recommendCount(reset)
})

onShow(() => {
	recommendCount()
})

const items = ref([])

const handleTo = (item) => {
	uni.navigateTo({
		url: `/pagesA/recommendation/index?id=${item.value}`
	})
}

async function recommendCount (reset = false) {
	try {
		const { data: dict } = await getDict('menduner_hire_job_cv_status')
		if (!dict?.data) {
			return
		}
		items.value = dict.data.map(e => {
			return {
				...e,
				count: 0
			}
		})
		// console.log(items)
		if (reset) {
			return
		}
		const { data } = await getRecommendCount()
		if (!data) {
			return
		}
		items.value.forEach(e => {
			e.count = data.find(_e => _e.key === e.value)?.value || 0
		})
	} catch (error) {
		// console.log(error)
	}
}

</script>

<style scoped lang="scss">
.content {
	display: flex;
	justify-content: space-around;
	padding: 36rpx 12rpx;
	&-box {
		font-size: 24rpx;
		color: #999;
		text-align: center;
		&-value {
			font-size: 1.8em;
			color: #000;
		}
	}
}
</style>