<template>
    <div class="information-box">
        <ul>
            <li v-for="item in list" :key="item.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({
        list: []
    })
    const { list } = toRefs(data)
    const vehicleStore = useVehicleStore()
    const vehicleStoreToRefs = storeToRefs(vehicleStore)
    const { getCommand } = vehicleStoreToRefs

    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;
            }
            li:nth-child(1) {
                color: #02d9df;
            }
        }
    }
    @media screen and (min-width: 1700px) {
        .information-box {
            max-height: 300px;
            // height: 40vh;
            padding: 0 10px 10px;
            flex: 0 0 18vh;
        }
    }

</style>