<template>
    <div class="set-view">
        <ul class="set-view-list">
            <li v-for="item in setList" 
                :key="item.key"
                :data-key="item.key" 
                :data-component="item.component"
                :data-type="item.type"
                :class="['set-icon-name', currentName === item.key ? 'active' : '']"
                @click="changeTab">
                <i class="active-line" v-show="currentName === item.key"></i>
                <i class="set-icon" 
                    :style="`background-image: url('/image/${item.key}${currentName === item.key ? '_white' : '_blur'}.png')`"></i>
                <span>{{item.label}}</span>
            </li>
        </ul>
        <div class="set-view-content">
            <component :is="currentComponents" :name="currentName" class="set-content" @sendMsg="sendMsg"></component>
        </div>
    </div>
</template>

<script setup>
    import { markRaw, ref, watch, shallowRef } from 'vue';
    import BasicParam from './set-tags/BasicParam.vue'
    import LightControl from './set-tags/LightControl.vue'
    import SafeControl from './set-tags/SafeControl.vue';
    import RunControl from './set-tags/RunControl.vue';
    import SignalTrack from './set-tags/SignalTrack.vue';
    import MapControl from './set-tags/MapControl.vue';

    const SET_LIST = [
        {
            label: '基本参数',
            key: 'basic',
            type: 1,
            component: BasicParam
        },
        {
            label: '灯光控制',
            key: 'light',
            type: 2,
            component: LightControl
        },
        {
            label: '安全控制',
            key: 'safe',
            type: 3,
            component: SafeControl
        },
        {
            label: '启动控制',
            key: 'run',
            type: 4,
            component: RunControl
        },
        {
            label: '地图管理',
            key: 'cmap',
            type: 5,
            component: MapControl
        },
        {
            label: '单机循迹',
            key: 'signal_track',
            type: 6,
            component: SignalTrack
        }
    ] 

    const props = defineProps({
        isShow: Boolean
    })
    const setList = markRaw(SET_LIST)
    const currentName = shallowRef(SET_LIST[0].key)
    const currentComponents = shallowRef(SET_LIST[0].component)

    const emits = defineEmits(['handleSend'])

    function changeTab(e) {
        const target = e.currentTarget
        initData(target.dataset)
    }

    function initData(data) {
        const {key, type} = data
        emits('handleSend', {
            type: '/setting/req',
            msg: {type: Number(type)}
        })
        currentName.value = key
        const currentTag = SET_LIST.find(item => item.key === key)
        const {component} = currentTag
        currentComponents.value = component
    }

    function sendMsg(data) {
        emits('handleSend', data)
    }

    function init() {
        let current = SET_LIST[0]
        initData(current)
    }

    watch(() => props.isShow, (value) => {
        if (value) {
            init()
        }
    }, {
        immediate: true
    })
</script>

<style lang="less" scoped>
    .set-view {
        display: flex;
        height: 60vh;
        .set-icon {
            background-repeat: no-repeat;
            display: inline-block;
            width: 20px;
            height: 20px;
            background-size: contain;
            margin-right: 10px;
        }
        .set-view-list {
            flex: 0 0 20vw;
            color: #63A9FB;
            overflow: auto;
            li {
                display: flex;
                align-items: center;
                padding: 10px 20px;
                position: relative;
                cursor: pointer;
                &.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;
                }
                .set-icon-name {
                    display: flex;
                    align-items: center;
                    i {
                        margin-right: 10px;
                    }
                }
            }
        }
        .set-view-content {
            display: flex;
            flex-direction: column;
            flex: auto;
            padding: 10px;
            border-left: 1px solid #3F4556;
            // min-height: 500px;
            // height: 75vh;
            overflow: auto;
            .single-list {
                margin-bottom: 10px;
            }
            .single-track-type {
                display: flex;
                flex-direction: column;
            }
            .max-unload-counts {
                border: 2px solid #07f;
                padding: 10px;
                margin: 10px 0;
            }
        }
    }
    /deep/.ivu-input-number-controls-outside-btn {
        background: rgba(99,169,251,1);
        color: #fff;
        i {
            font-size: 20px;
            font-weight: 600;
        }
    }
    /deep/.ivu-input-number {
        border: 2px solid #63A9FB;
    }
    /deep/.ivu-input-number-controls-outside .ivu-input-number-input {
        background: #3F4556;
        color: #fff;
        text-align: center;
    }
    /deep/.ivu-input-number-disabled {
        border: 2px solid #707070;
        opacity: .6;
        .ivu-input-number-controls-outside-btn {
            background: rgba(112,112,112,1);
        }
    }
</style>