<template>
    <div>
        <p v-for="item in content" :key="item.index" style="color: #dd1212;">
            <Icon type="ios-warning" size="24" :color="item.errLevel === 0 ? '#dd1212' : '#ead22f'" />
            <span>{{item.errCode}}</span>
            <span style="margin-right: 20px;">{{item.errLevel === 0 ? '故障' : '告警'}}</span>
            <span>{{item.errInfo}}</span>
        </p> 
    </div>
</template>

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

    const props = defineProps({
        isShow: Boolean
    })
    
    let content = reactive([])
    const vehicleStore = useVehicleStore()
    const vehicleStoreToRefs = storeToRefs(vehicleStore)
    const { vehicleErrorList } = vehicleStoreToRefs

    watch(() => props.isShow, (value) => {
        if (value) {
            content = vehicleErrorList.value
        }
    }, {
        immediate: true
    })

    watch(vehicleErrorList, (value) => {
        if (props.isShow) {
            content = value
        }
    })
</script>