<template>
    <div class="log-details">
        <ul class="log-list">
            <li v-for="item in list.arr" 
                :class="currentType == item.type ? 'active' : ''"
                :key="item.type" 
                :data-type="item.type"
                @click="changeTab">
                <i class="active-line" v-show="currentType == item.type"></i>
                <span>{{item.name}}模块</span>
            </li>
        </ul>
        <div class="log-content-detail">
            <ul class="log-content">
                <li v-for="cont in content.arr" :key="cont.index">{{cont}}</li>
            </ul>
        </div>
    </div>
</template>

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

    const props = defineProps({
        isShow: Boolean
    })

    const emits = defineEmits(['handleSend'])

    const currentType = ref(1)
    // 如果定义为数组直接赋值，会丢失响应性
    const list = reactive({
        arr: []
    })
    let content = reactive({
        arr: []
    })
    const vehicleStore = useVehicleStore()
    const vehicleStoreToRefs = storeToRefs(vehicleStore)
    const { terminal, terminalDetails } = vehicleStoreToRefs

    function closeCurrentType() {
        emits('handleSend', {
            type: '/setting/terminalSetting',
            msg: {
                type: currentType.value,
                status: 2
            }
        })
    }

    function changeTab(e) {
        const target = e.currentTarget
        const { type } = target.dataset
        if (currentType.value) {
            closeCurrentType()
        }
        emits('handleSend', {
            type: '/setting/terminalSetting',
            msg: {
                type,
                status: 1
            }
        })
        currentType.value = type
        let detail = terminalDetails[type]
        content.arr = detail ? detail.split('\n') : []
    }

    watch(() => props.isShow, (value) => {
        if (value) {
            emits('handleSend', {
                type: '/setting/req',
                msg: {
                    type: 7
                }
            })
        } else {
            closeCurrentType()
        }
    }, {
        immediate: true
    })

    watch(terminal, (terminalList) => {
        if (!terminalList.length) return
        
        list.arr = terminalList
        currentType.value = terminalList[0].type
        emits('handleSend', {
            type: '/setting/terminalSetting',
            msg: {
                type: terminalList[0].type,
                status: 1
            }
        })
    }, {
        deep: true,
    })

    watch(terminalDetails, (value) => {
        let data = value[currentType.value]
        content.arr = data.split('\n')
    }, {
        deep: true
    })
</script>

<style lang="less" scoped>
    .log-details {
        display: flex;
        .log-list {
            flex: 0 0 15vw;
            overflow: auto;
            height: 60vh;
            li {
                padding: 10px 20px;
                color: #63A9FB;
                cursor: pointer;
                position: relative;
                &.active {
                    color: #fff;
                    background: linear-gradient(90deg, #111521 0%, rgba(17,21,33,0) 100%);
                }
                .active-line {
                    display: inline-block;
                    width: 2px;
                    height: 20px;
                    position: absolute;
                    left: 0;
                    background: #fff;
                }
            }
        }
        .log-content-detail {
            flex: auto;
            padding: 16px;
            border-left: 1px solid #3F4556;
            overflow: auto;
            .log-content {
                width: 100%;
                height: 100%;
                background: #111521;
                color: #fff;
                border-radius: 8px;
                max-height: 50vh;
                overflow: auto;
            }
        }
    }
</style>