<template>
    <card className="mb-3">
        <view class="flex flex-col mb-[24rpx]" @click="handleCardClick">
            <view class="flex items-center p-[24rpx] gap-[24rpx]">
                <view
                    class="bg-primary rounded-full text-white w-[120rpx] h-[120rpx] flex items-center justify-center"
                >
                    张三
                </view>
                <view class="flex-1 flex flex-col gap-[12rpx]">
                    <text>张三</text>
                    <text class="text-muted">湛江团队-A组 . {{ parsePostionText }}</text>
                </view>
            </view>
            <view class="flex gap-[12rpx] flex-wrap" v-if="!containPostIds">
                <view
                    class="w-[30%] flex justify-center items-center flex-col gap-[12rpx]"
                    v-for="(item, index) in data"
                    :key="`unique_${index}`"
                >
                    <text class="text-muted">{{ item.label }}</text>
                    <text class="font-bold text-[40rpx]">{{ item.value }}</text>
                </view>
            </view>
            <view v-else class="flex gap-[12rpx] flex-wrap">
                <view
                    class="w-full flex flex-col gap-[24rpx] mb-[24rpx]"
                    v-for="(value, key) in cardMap"
                    :key="key"
                >
                    <view class="flex justify-between items-center px-[24rpx]">
                        <text>{{ parseText(key) }}数据</text>
                        <text class="text-primary" @click="handleMore(key)">查看</text>
                    </view>
                    <view class="flex gap-[12rpx] flex-wrap bg-[#f1f1f1] mx-[24rpx] py-[24rpx]">
                        <view
                            class="w-[30%] flex justify-center items-center flex-col gap-[12rpx]"
                            v-for="(item, indey) in value"
                            :key="`unique_${indey}`"
                        >
                            <text class="text-muted">{{ item.label }}</text>
                            <text class="font-bold text-[40rpx]">{{ item.value }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </card>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import card from '../../card.vue'

const props = defineProps({
    item: {
        type: Object,
        default: () => {}
    }
})
const emit = defineEmits(['handleCardClick'])

const parsePostionText = computed(() => {
    const { postId } = props.item
    const ids = postId?.split(',')
    const positionsList = [
        { name: '电销老师', id: 5 },
        { name: '招生老师', id: 6 }
    ]
    const findItems = positionsList.filter(item => ids.includes(String(item.id)))
    return findItems.map(item => item.name).join('/')
})

const cardMap: Record<number, Array<{ label: string; value: number }>> = {
    5: [
        { label: '新增跟进', value: 368 },
        { label: '未领取', value: 368 },
        { label: '已领取', value: 100 },
        { label: '异常待处理', value: 368 }
    ],
    6: [
        { label: '转化中', value: 368 },
        { label: '已添加', value: 100 },
        { label: '异常待处理', value: 368 },
        { label: '成交客户', value: 368 },
        { label: '战败客户', value: 368 }
    ]
}
const parseText = computed(() => (key: number) => key == 5 ? '电销' : '招生')
const data = computed(() => {
    const { postId } = props.item
    return cardMap[postId]
})
const parsePostIds = computed(() => {
    const { postId } = props.item
    return postId?.split(',').map(Number)
})
const containPostIds = computed(() => {
    return parsePostIds.value.includes(5) && parsePostIds.value.includes(6)
})

const handleCardClick = () => {
    if (containPostIds.value) return
    const type =
        parsePostIds.value.length == 1 && parsePostIds.value.includes(5)
            ? 'telesale'
            : 'recruitsale'
    emit('handleCardClick', type, props.item)
}
const handleMore = (key: number) => {
    const type = key == 5 ? 'telesale' : 'recruitsale'
    emit('handleCardClick', type, props.item)
}
</script>
<style scoped></style>
