<template>
    <div class="information-box">
        <ul>
            <li class="top" v-for="item in topList" :key="item.index">{{ item }}</li>
            <li :class="index == 0 ? 'bottom' : ''" v-for="(item, index) in list" :key="index">{{ item }}</li>
        </ul>
    </div>
</template>

<script setup>
    import { watch, reactive, toRefs } from 'vue';
    import { useVehicleStore } from '../store/VehicleStore';
    import { storeToRefs } from 'pinia';

    let data = reactive({
        topList: [],
        list: []
    })
    const { topList, list } = toRefs(data)
    const vehicleStore = useVehicleStore()
    const vehicleStoreToRefs = storeToRefs(vehicleStore)
    const { getCommand, getCommandTop } = vehicleStoreToRefs

    watch (getCommandTop, (value) => {
        if (typeof value === 'string') {
            data.topList.unshift(value)
        } else {
            data.topList = JSON.parse(JSON.stringify(value)).reverse()
        }
    }, {
        deep: true
    })

    watch(getCommand, (value) => {
        if (typeof value === 'string') {
            data.list.unshift(value)
        } else {
            data.list = JSON.parse(JSON.stringify(value)).reverse()
        }
    }, {
        deep: true
    })
    
</script>

<style lang="less" scoped>
    .information-box {
        max-height: 300px;
        height: 30vh;
        padding: 0 10px 10px;
        flex: 0 0 30vh;
        ul {
            overflow: auto;
            border: 2px solid #18A8AC;
            border-radius: 10px;
            background: rgba(19,20,25,0.6);
            height: 100%;
            li {
                color: #fff;
            }
            .bottom {
                color: #02d9df !important;
            }
            li.top {
                color: #edaa57 !important;
            }
        }
    }
    @media screen and (min-width: 1700px) {
        .information-box {
            max-height: 300px;
            // height: 40vh;
            padding: 0 10px 10px;
            flex: 0 0 18vh;
        }
    }

</style>