<template>
    <el-space style="width: 100%" direction="vertical" alignment="normal" :size="24" v-loading="loading">
        <el-descriptions v-for="item in baseInfo" :key="item.title" :title="item.title" direction="vertical" :column="4" border>
            <el-descriptions-item v-for="(itemy, indey) in item.data" :key="indey" :label="itemy.label">
                <span v-if="itemy.custom">{{ formatValue(itemy.field, itemy.value) }}</span>
                <span v-else>{{ itemy.value }}</span>
            </el-descriptions-item>
        </el-descriptions>
    </el-space>
</template>

<script setup lang="ts">
import { clueDetail } from '@/api/clue'
import { ClueSourceMap, conversionMap, conversitionMap, stateMap } from '@/enums'

const optionsMap: Record<string, any> = {
    listSource: ClueSourceMap,
    situation: conversionMap,
    isConversion: conversitionMap,
    state: stateMap
}

const props = defineProps({
    modelValue: {
        type: String,
        default: 'baseInfo'
    },
    id: {
        type: Number
    }
})
const loading = ref(false)
const baseInfo = ref<any[]>([])
const formatValue = computed(() => (field: string, value: number) => optionsMap[field][value] ?? '--')

const fetchClueDetail = async () => {
    const { id } = props
    loading.value = true
    try {
        const result = await clueDetail({ id })
        assemData(result)
    } catch (error) {}
    loading.value = false
}
// 组装数据格式
const assemData = (result: any) => {
    type ClueBaseInfoKeys = keyof typeof clueBaseInfo

    const clueBaseInfo = {
        线索基本信息: { listSource: '线索来源', studentName: '学生名字', phone: '联系电话', basicInformation: '基本情况' },
        电销信息: { telemarketingTeacherName: '负责人', telemarketingOrganization: '所属组织', situation: '线索状态', followUpTime: '跟进时间' },
        招生信息: {
            recruitTeacherName: '负责人',
            recruitOrganization: '所属组织',
            state: '状态',
            getTime: '领取时间',
            isConversion: '是否转化成功',
            remark: '备注',
            accomplishTime: '成交时间'
        }
    }
    Object.keys(clueBaseInfo).forEach((key: ClueBaseInfoKeys) => {
        const data = clueBaseInfo[key]
        const list = Object.keys(data).map(item => {
            const value = result[item]
            return {
                label: data[item],
                value: value ?? '--',
                custom: ['listSource', 'situation', 'isConversion', 'state'].includes(item),
                field: item
            }
        })
        baseInfo.value.push({
            title: key,
            data: list
        })
    })
    console.log(baseInfo.value)
}
watch(
    () => props.modelValue,
    () => {
        fetchClueDetail()
    },
    { immediate: true }
)
watch(
    () => props.id,
    (newVal, oldVal) => {
        if (newVal !== oldVal) {
            baseInfo.value = []
            fetchClueDetail()
        }
    }
)
</script>
<style scoped></style>
