<template>
    <div class="person_box">
        <div style="width: 33%;height: 50%;" v-for="(item, index) in dropData">
            <waterdrop circleBackGround="rgb(5, 26, 52)" :birderColor="item.color" :color="item.color"
                :heightTop="item.heightTop" :dropTitle="employData[index]"></waterdrop>
        </div>
    </div>
</template>

<script setup>
import waterdrop from '@/components/waterdrop'
const props = defineProps({
    resultData: {
        type: Array,
        default: []
    }
})
const dropData = ref([{
    color: 'rgb(42, 139, 247)',
    heightTop: '-80%',
}, {
    color: 'rgb(250, 139, 31)',
    heightTop: '-25%',
}, {
    color: 'rgb(138, 136, 27)',
    heightTop: '-20%',
}, {
    color: 'rgb(140, 229, 41)',
    heightTop: '-15%',
}, {
    color: 'rgb(131, 255, 233)',
    heightTop: '-15%',
}])
const employData = ref([])

watch(() => props.resultData, (newVal) => {
    let arrData = newVal
    employData.value = []
    arrData.forEach((item) => {
        let nameTitle = ''
        let originalString = item.name;
        let insertString = "\n";
        let maxLength = 6; // 指定插入位置
        // 检查是否需要插入
        if (originalString.length > maxLength) {
            let newString = `${originalString.slice(0, maxLength)}${insertString}${originalString.slice(maxLength)}`;
            nameTitle = newString
        } else {
            nameTitle = originalString
        }
        let arr = item.hours + '\n' + nameTitle
        employData.value.push(arr)
    })
}, { deep: true, immediate: true } // 开启深度监听
)
// 生命周期
onMounted(() => {
});
onUnmounted(() => {
})
</script>

<style scoped lang="scss">
.person_box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
</style>