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

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

const items = ref([])

// 获取状态

async function recommendCount () {
	try {
		const { data: dict } = await getDict(props.type)
		items.value = dict.data.map(e => {
			return {
				...e,
				count: 0
			}
		})
		console.log(items)
		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)
	}
}
recommendCount()
</script>

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