<template>
    <div class="order-container" @click="handleCardClick">
        <div v-if="guideText" class="guide-text">{{ guideText }}</div>

        <div class="order-info-container">
            <img v-if="imageUrl" :src="imageUrl" alt="" class="order-image">
            <div v-else class="order-image order-image--placeholder"></div>

            <div class="order-main-info">
                <div class="order-name">{{ orderName }}</div>
                <div class="order-desc">{{ orderDesc }}</div>
            </div>
        </div>

        <div class="custom-field-container">
            <div v-for="(item, index) in normalizedCustomFields" :key="`${item.name}-${item.value}-${index}`"
                class="custom-field-item">
                <div class="custom-field-name">{{ item.name }}</div>
                <div class="custom-field-value" :style="{ color: item.valueColor || undefined }">
                    {{ item.value }}
                </div>
            </div>
        </div>
    </div>
</template>

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

import AIDeskCoreInstance, { type IMessageModel } from '@tencentcloud/ai-desk-core'
import type { customerServicePayloadType } from '../../../../../utils'

interface NormalizedOrderCustomFieldItem {
    name: string
    value: string
    valueColor: string
    customValue: string
}

interface Props {
    payload?: customerServicePayloadType
    message: IMessageModel
}

const props = defineProps<Props>()

const safeToString = (input: unknown): string => {
    if (typeof input === 'string') {
        return input
    }

    if (typeof input === 'number' || typeof input === 'boolean') {
        return String(input)
    }

    return ''
}

const guideText = computed(() => {
    return safeToString(props.payload?.content?.guide)
})

const orderName = computed(() => {
    return safeToString(props.payload?.content?.name)
})

const orderDesc = computed(() => {
    return safeToString(props.payload?.content?.desc)
})

const imageUrl = computed(() => {
    return safeToString(props.payload?.content?.pic)
})

const normalizedCustomFields = computed<NormalizedOrderCustomFieldItem[]>(() => {
    const customField = props.payload?.content?.customField
    if (!Array.isArray(customField)) {
        return []
    }

    return customField.map((item) => {
        return {
            name: safeToString(item?.name),
            value: safeToString(item?.value),
            valueColor: safeToString(item?.valueColor),
            customValue: safeToString(item?.customValue),
        }
    })
})

const handleCardClick = () => {
    if (!props.payload?.isCustomerClick) {
        return
    }

    AIDeskCoreInstance.SDKInstance.emit('onChatMessageClick', { message: props.message })
}
</script>

<style scoped>
.order-container {
    max-width: 400px;
    width: 400px;
    background-color: #fff;
    border: 1px solid #999;
    border-radius: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    cursor: pointer;
    box-sizing: border-box;
}

.order-info-container {
    display: flex;
    background: #f9f9f9;
    padding: 10px;
}

.guide-text {
    font-size: 18px;
    color: #000;
    font-weight: bold;
    word-break: break-all;
    padding: 10px;
}

.order-image {
    width: 60px;
    height: 60px;
    object-fit: fill;
    flex-shrink: 0;
}

.order-image--placeholder {
    background: #f0f0f0;
}

.order-main-info {
    margin-left: 5px;
    min-width: 0;
}

.order-name {
    font-size: 16px;
    color: #000;
    font-weight: bold;
    word-break: break-all;
}

.order-desc {
    font-size: 14px;
    color: #999;
    font-weight: bold;
    word-break: break-all;
}

.custom-field-container {
    display: block;
}

.custom-field-item {
    display: flex;
    padding: 10px;
}

.custom-field-name {
    font-size: 14px;
    font-weight: bold;
    word-break: keep-all;
}

.custom-field-value {
    word-break: break-all;
    font-size: 14px;
    font-weight: bold;
}
</style>
