<template>
    <div class="side-bar">
        <ul class="side-list">
            <li v-if="isBasic"
                data-name="basic_message"
                class="active"
                @click="doCheck">
                <i :style="`background-image: url('/image/Info_white.png')`"></i>
                <span>基本信息</span>
            </li>
            <li v-else
                data-name="mode_information"
                class="active"
                @click="doCheck">
                <i :style="`background-image: url('/image/debug_white.png')`"></i>
                <span>调试信息</span>
            </li>
            <li v-for="item in list" 
                :key="item.index" 
                :data-name="item.name" 
                :class="active === item.name ? 'active' : ''"
                @click="changeActive">
                <i :class="item.name === 'mode_switch' ? isDisable : ''"
                    :style="`background-image: url('/image/${item.icon}${active === item.name ? '_white' : '_blue'}.png')`"></i>
                <span :class="item.name === 'mode_switch' ? isDisable : ''">{{item.label}}</span>
            </li>
        </ul>
    </div>
</template>

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

    const SIDE_BAR = [
        {
            name: 'mode_switch',
            label: '模式切换',
            icon: 'pattern'
        },
        {
            name: 'log',
            label: '终端信息',
            icon: 'log'
        },
        {
            name: 'set',
            label: '设置',
            icon: 'set'
        },
        {
            name: 'logout',
            label: '退出',
            icon: 'quit'
        },
    ]

    /**
     * defineProps 和 defineEmits 都是只能在 <script setup> 中使用的编译器宏。
     * 他们不需要导入，且会随着 <script setup> 的处理过程一同被编译掉。
     * defineProps 接收与 props 选项相同的值，defineEmits 接收与 emits 选项相同的值
     */
    const emit = defineEmits(['changeTab'])

    const list = markRaw(SIDE_BAR)
    const active = ref('basic_message')
    const isBasic = ref(true)
    const vehicleStore = useVehicleStore()
    const vehicleStoreToRefs = storeToRefs(vehicleStore)

    const isDisable = computed(() => {
        const {isError, pattern} = vehicleStoreToRefs
        if (isError.value === 'fault' && pattern.value === 0) {
            return 'disabled'
        }
        return ''
    })

    function doCheck(evt) {
        isBasic.value = !isBasic.value
        const target = evt.currentTarget
        const {name} = target.dataset
        active.value = name === 'basic_message' ? 'mode_information' : 'basic_message'
        emit('changeTab', active.value)
    }

    function changeActive(evt) {
        const target = evt.currentTarget
        const {name} = target.dataset
        if (name === 'mode_switch' && isDisable.value === 'disabled') {
            return
        }
        active.value = name
        emit('changeTab', name)
    }

    function changeMode() {
        active.value = 'basic_message'
    }

    defineExpose({
        changeMode
    })
</script>
<style lang="less" scoped>
.side-list {
    background: #202634;
    color: #5490D6;
    height: 100%;
    overflow: auto;
    li {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: .1rem;
        cursor: pointer;
        i {
            display: inline-block;
            width: 2.5vw;
            height: 2.5vw;
            background-size: cover;
        }
        &.active {
            color: #fff;
        }
    }
    .disabled {
        cursor: not-allowed;
    }
}
</style>