<template>
    <div>
        <ul class="status-info">
            <li v-for="item in statusInfoList" :key="item.index">
                <span class="status-title">{{ item.label }}:</span>
                <span class="status-content" :style="`color: ${statusInfoResult[item.name] === 2 && '#FFCE1F'}`" v-if="item.name === 'pattern'">{{ pattern }}</span>
                <span class="status-content" v-else>{{ statusInfoResult[item.name] }}</span>
            </li>
        </ul>
    </div>
</template>

<script setup>
    import { markRaw, computed } from 'vue';
    import { useVehicleStore } from '../../store/VehicleStore';
    import { storeToRefs } from 'pinia';

    const STATUS_INFO = [
        {
            label: '驾驶模式',
            name: 'pattern'
        },
        {
            label: '工作状态',
            name: 'deviceStatus'
        },
        {
            label: '物料',
            name: 'material'
        },
        {
            label: '作业状态',
            name: 'workStatus'
        }
    ]

    const pattern_map = {
        0: '有人驾驶',
        1: '无人驾驶-有安全员',
        2: '无人驾驶-无安全员'
    }
    const statusInfoList = markRaw(STATUS_INFO)
    const vehicleStore = useVehicleStore()
    const { statusinfo } = storeToRefs(vehicleStore)
    const statusInfoResult = computed(() => statusinfo.value)
    const pattern = computed(() => {
        let patternMsg = statusinfo.value['pattern']
        return pattern_map[patternMsg]
    })
</script>

<style lang="less" scoped>
    .status-info {
        position: absolute;
        top: 10px;
        left: 10px;
        background: #0C0E13;
        padding: 5px;
        display: flex;
        flex-wrap: wrap;
        z-index: 999;

        li {
            margin-right: 10px;

            .status-title {
                color: #63A9FB;
            }

            .status-content {
                color: #fff;
            }
        }
    }
</style>