<template>
    <span class="seat-status" :style="seatStatusStyle">{{ displayLabel }}</span>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';

const props = defineProps<{
    seatStatus?: string;
    restReason?: string;
}>();

const { t } = useI18n();

const backColorMap: Record<string, string> = {
    '0': '#E6E9F0',
    '100': '#E1F7EB',
    '200': '#FFE7E5',
    '300': '#FFEEDB',
    '400': '#FFE7E5',
    '500': '#FFE7E5',
    '700': '#FFE7E5',
};

const fontColorMap: Record<string, string> = {
    '0': '#54565C',
    '100': '#078F59',
    '200': '#E54545',
    '300': '#E05D00',
    '400': '#E54545',
    '500': '#E54545',
    '700': '#E54545',
};

const displayLabel = computed(() => {
    const status = String(props.seatStatus ?? '');

    if (status === '300') {
        return props.restReason || t('小休');
    }

    const statusMap: Record<string, string> = {
        '0': t('离线'),
        '100': t('示闲'),
        '200': t('忙碌'),
        '300': t('小休'),
        '400': t('话后整理'),
        '500': t('话后整理'),
        '700': t('示忙'),
    };

    return statusMap[status] || t('未知');
});

const seatStatusStyle = computed(() => {
    const status = String(props.seatStatus ?? '');
    return {
        backgroundColor: backColorMap[status] || '#E6E9F0',
        color: fontColorMap[status] || '#54565C',
    };
});
</script>

<style scoped>
.seat-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 2px 4px;
    border-radius: 2px;
    font-size: 10px;
    line-height: 14px;
    white-space: nowrap;
    flex-shrink: 0;
}
</style>