<template>
    <div class="pairings">
        <p>
            <img :src="`/image/${loadThread > 10 ? 'heavyTruck' : 'emptyTruck'}.png`" alt="">
            <span>{{pairingsMsg['truckId']}}</span>
        </p>
        <p v-for="item in pairingsVehicle" :key="item.index">
            <img :src="`/image/${item.icon}.png`" alt="">
            <span>{{pairingsMsg[item.name]}}</span>
        </p>
        <p class="loading-type">{{ loadingType }}</p>
    </div>
</template>

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

    const PAIRINGS_VEHICLE = [
        {
            icon: 'excaSign',
            name: 'excaId'
        },
        {
            icon: 'dumpSign',
            name: 'dumpId'
        }
    ]
    const pairingsVehicle = markRaw(PAIRINGS_VEHICLE)
    const vehicleStore = useVehicleStore()
    const { currentLoadthread, pairinfo, statusinfo } = storeToRefs(vehicleStore)
    const loadThread = computed(() => currentLoadthread.value)
    const pairingsMsg = computed(() => pairinfo.value)
    const loadingType = computed(() => {
        return statusinfo.value.currAssignment ? `(${statusinfo.value.currAssignment})` : ''
    })
</script>

<style lang="less" scoped>
    .pairings {
        background: rgba(12,14,19,0.7);
        flex: 0 0 .5rem;
        display: flex;
        align-items: center;
        color: #fff;
        p {
            display: flex;
            align-items: center;
            margin: 0 10px;
            img {
                width: 50px;
                height: auto;
            }
            img:nth-child(1) {
                width: 40px;
            }
        }
        p:nth-child(1) {
            color: #eaba37
        }
        .loading-type {
            color: #eaba37;
            font-weight: 700;
        }
    }
</style>