<template>
    <div class="basic-information">
        <div class="basic-title">
            <p>
                <span>调试信息</span>
                <Icon class="basic-close" type="ios-close-circle-outline" @click="handleClose" />
            </p>
            <i class="basic-title-line"></i>
        </div>
        <ul class="basic-info">
            <li v-for="list in lists" :key="list.index">
                <p v-for="item in list" :key="item.index">
                    <template v-if="Object.keys(debug).includes(item.name)">
                        <span>{{item.label}}：</span>
                        <span v-if="['target_velocity', 'VechicleSpd', 'gasBrake', 'soc', 'mechBrakeCmd', 'mechBrakeStatus'].includes(item.name)">{{Number(debug[item.name]).toFixed(1)}}</span>
                        <span v-else-if="['obstacleFrontDistance', 'obstacleFrontFlag', 'obstacleBackBarriDistance'].includes(item.name)">{{Number(debug[item.name]).toFixed(2)}}</span>
                        <span v-else-if="item.name === 'vehicleLoad'">{{vehicleLoad}}</span>
                        <span v-else-if="item.name === 'oil'">{{surplusOil}}</span>
                        <span v-else>{{debug[item.name]}}</span>
                    </template>
                </p>
            </li>
            <template v-if="debug['followVisible']">
                <li v-for="item in followLists" :key="item.index">
                    <p>
                        <span>{{item.label}}：</span>
                        <span v-if="item.name === 'followVehicleId'">{{debug[item.name]}}</span>
                        <span v-else>{{Number(debug[item.name].toFixed(1))}}</span>
                    </p>
                </li>
            </template>
        </ul>
    </div>
</template>

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

    const lists = markRaw(INFORMATION_MESSAGE)
    const followLists = markRaw(FOLLOW_DETAILS)
    const emits = defineEmits(['handleClose'])

    const vehicleStore = useVehicleStore()
    const vehicleStoreToRefs = storeToRefs(vehicleStore)

    const debug = computed(() => {
        const {debuginfo} = vehicleStoreToRefs
        return debuginfo.value
    })

    const surplusOil = computed(() => {
        const {vehicleBasic} = vehicleStoreToRefs
        if (!vehicleBasic.value) return 0
        const {oil} = vehicleBasic.value
        return (100 - oil).toFixed(2)
    })

    const vehicleLoad = computed(() => {
        const {currentBasic} = vehicleStoreToRefs
        const {vehicleLoad} = currentBasic.value
        return vehicleLoad ? vehicleLoad.toFixed(2) : 0
    })

    function handleClose() {
        emits('handleClose')
    }
</script>

<style lang="less" scoped>
    .basic-information {
        .basic-title {
            padding: 5px 20px 10px;
            color: #fff;
            position: relative;
            p {
                display: flex;
                align-items: center;
                justify-content: space-between;
                span:nth-child(1) {
                    margin-left: 10px;
                }
            }
            .basic-close {
                color: #63A9FB;
                cursor: pointer;
            }
            .basic-title-line {
                display: inline-block;
                background: url('/image/basic-title.png') no-repeat;
                background-size: cover;
                width: 100%;
                height: 10px;
                position: absolute;
            }
        }
        .basic-info {
            color: #fff;
            overflow-y: auto;
            height: calc(100% - 40px);
            li {
                display: flex;
                max-height: 3.5vh;
                line-height: 3.5vh;
                // min-height: 30px;
                p {
                    padding: 0 10px;
                    min-width: 50%;
                    white-space: nowrap;
                    span:nth-child(1) {
                        color: #5490D6;
                    }
                }
            }
        }
    }
</style>