<template>
    <div class="basic-message">
        <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>
        <div class="basic">
            <div class="basic-top">
                <i :class="['vehicle-state', vehicleState]" @click="showStates"></i>
                <span class="vehicle-msg">
                    <span>{{pattern == 0 ? '司机' : '安全员'}}：{{name}}</span>
                    <span>工号：{{number}}</span>
                </span>
            </div>
            <ul class="basic-middle">
                <li v-for="item in list" :key="item.index">
                    <span class="middle-img" :style="`background-image: url('/image/ic_${item.name}.png')`">
                        {{basicMid[item.title] || 0}}{{item.unit}}
                    </span>
                    <span>{{item.title == 'oil' ? basicMid.isOil ? '油量' : '电量' : item.label}}</span>
                </li>
            </ul>
        </div>
        <ul class="basic-info">
            <li v-for="item in infos" :key="item.index">
                <p v-for="list in item" :key="list.name">
                    <span class="label">{{list.label}}：</span>
                    <span v-if="list.fixed">{{ debug[list.name] ? debug[list.name].toFixed(list.fixed) : list.default }}</span>
                    <span v-else>{{debug[list.name] || list.default}}</span>
                </p>
            </li>
        </ul>
    </div>
</template>

<script setup>
    import { reactive, markRaw, ref, watch, computed } from 'vue';
    import { useVehicleStore } from '@/store/VehicleStore.js'
    import { useStateStore } from '@/store/StateStore.js'
    import { storeToRefs } from 'pinia'

    const BASIC_MESSAGE_INFO = [
        [
            {
                name: 'target_velocity',
                label: '速度(线控)',
                default: 0,
                fixed: 1,
            },
            {
                name: 'steerangle',
                label: '转向',
                default: '——',
            },
        ],
        [
            {
                name: 'dump_bed',
                label: '举升',
                default: '——',
            },
            {
                name: 'throttlecmd',
                label: '油门',
                default: '——',
            },
        ],
        [
            {
                name: 'Retarder_cmd',
                label: '制动',
                default: '——',
            }, 
        ],
        [
            {
                name: 'lateralDeviation',
                label: '横向偏差',
                default: 0.00,
            },
        ],
        [
            {
                name: 'courseDeviation',
                label: '航向偏差',
                default: 0.00,
            },
        ],
        [
            {
                name: 'obstacleFrontDistance',
                label: '前向障碍物距离',
                fixed: 2,
                default: 0.00,
            },
        ],
        [
            {
                name: 'obstacleBackDistance',
                label: '后向障碍物距离',
                fixed: 2,
                default: 0.00,
            },
        ],
        [
            {
                name: 'obstacleBackBarriDistance',
                label: '后向挡墙距离',
                fixed: 2,
                default: 0.00,
            },
        ],
    ]

    const VEHICLE_TIRES = [
        {
            name: 'front_right',
            icon: 'ic_tireLeft',
            tire: 'tire0'
        },
        {
            name: 'back_right_inside',
            icon: 'ic_tireMiddle',
            tire: 'tire1'
        },
        {
            name: 'back_right_outside',
            icon: 'ic_tireRight',
            tire: 'tire2'
        },
        {
            name: 'front_left',
            icon: 'ic_tireLeft',
            tire: 'tire3'
        },
        {
            name: 'back_left_inside',
            icon: 'ic_tireMiddle',
            tire: 'tire4'
        },
        {
            name: 'back_left_outside',
            icon: 'ic_tireRight',
            tire: 'tire5'
        }
    ]

    const BASIC_MESSAGE = [
        {
            label: '载重量',
            name: 'weight',
            title: 'vehicleLoad',
            unit: 'T'
        },
        {
            label: '时速(rosbeacon)',
            name: 'speed',
            title: 'vehicleSpeed',
            unit: 'Km/h'
        },
        {
            label: '油量',
            name: 'oil',
            title: 'oil',
            unit: '%'
        },
    ]

    const list = markRaw(BASIC_MESSAGE)
    const infos = markRaw(BASIC_MESSAGE_INFO)
    const debug = ref({})
    const name = ref('')
    const number = ref('')
    let basicMid = reactive({})
    const vehicleStore = useVehicleStore()
    const vehicleStoreToRefs = storeToRefs(vehicleStore)
    const { getVehicleDebug, getVehicleBasic, getCurrentBasic} = vehicleStoreToRefs
    const stateStore = useStateStore()
    const stateStoreToRefs = storeToRefs(stateStore)
    const { getLoginAck } = stateStoreToRefs

    const emits = defineEmits(['handleClose', 'showModal'])

    const vehicleState = computed(() => {
        const {isError} = vehicleStoreToRefs
        return isError.value
    })

    const pattern = computed(() => {
        const {softDrivingPattern} = vehicleStoreToRefs
        return softDrivingPattern.value
    })

    function handleClose() {
        emits('handleClose')
    }

    function showStates() {
        if (vehicleState.value === 'normal') return

        emits('showModal', {name: 'states'})
    }

    watch([getVehicleDebug, getLoginAck, getVehicleBasic, getCurrentBasic], ([debugValue, loginAckValue, vehicleBasic, currentBasic]) => {
        if (debugValue) {
            debug.value = debugValue
        }
        if (loginAckValue) {
            name.value = loginAckValue.name
            number.value = loginAckValue.number
        }
        if (vehicleBasic) {
            const {oil, isOil} = vehicleBasic
            basicMid['oil'] = oil ? oil.toFixed(2) : 0
            basicMid['isOil'] = isOil
        }
        if (currentBasic) {
            const {vehicleLoad, vehicleSpeed} = currentBasic
            let result = {
                vehicleLoad: vehicleLoad ? vehicleLoad.toFixed(2) : 0,
                vehicleSpeed: vehicleSpeed ? vehicleSpeed.toFixed(2) : 0,
                oil: basicMid.oil
            }
            basicMid = Object.assign(basicMid, result)
        }
    }, {
        immediate: true
    })

</script>

<style lang="less" scoped>
.basic-message {
    .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 {
        color: #fff;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .basic-top {
            display: flex;
            align-items: center;
            width: 100%;
            padding-left: 10px;
            margin-bottom: 10px;
            .vehicle-state {
                display: inline-block;
                width: 6vw;
                height: 6vw;
                background-size: contain;
                background-repeat: no-repeat;
                margin-right: 10px;
                cursor: pointer;
            }
            @media screen and (min-width: 1400px) {
                .vehicle-state {
                    width: 5vw;
                    height: 5vw;
                }  
            }
            .normal {
                background-image: url('/image/heal_normal.png');
            }
            .fault {
                background-image: url('/image/heal_fault.png');
            }
            .warning {
                background-image: url('/image/heal_warning.png');
            }
            .vehicle-msg {
                display: flex;
                flex-direction: column;
                span {
                    line-height: 5vh;
                    display: inline-block;
                }
            }
        }
        .basic-middle {
            display: flex;
            width: 100%;
            justify-content: space-between;
            li {
                text-align: center;
                padding: 10px;
                display: flex;
                flex-direction: column;
                align-items: center;
                .middle-img {
                    display: block;
                    width: 6vw;
                    height: 6vw;
                    min-width: 50px;
                    min-height: 50px;
                    background-size: cover;
                    line-height: 7vw;
                    text-align: center;
                }
                @media screen and (min-width: 1400px) {
                    .middle-img {
                        width: 5vw;
                        height: 5vw;
                        line-height: 5vw;
                    }
                }
                @media screen and (max-width: 631px) {
                    .middle-img {
                        line-height: 9vw;
                    }
                }
            }
        }
    }
    .basic-info {
        color: #fff;
        padding: 10px 20px;
        margin-top: 10px;
        li {
            display: flex;
            p {
                min-width: 50%;
                white-space: nowrap;
            }
            .label {
                color: #63A9FB;
            }
        }
        
    }
}

</style>