<template>
    <div class="light-control">
        <div class="content control-content">
            <p v-for="item in lists" :key="item.key">
                <span class="light-label">{{item.label}}</span>
                <i-switch v-model="form[item.key]" size="large">
                    <template #open>
                        <span>开启</span>
                    </template>
                    <template #close>
                        <span>关闭</span>
                    </template>
                </i-switch>
            </p>
        </div>
        <div class="footer">
            <Button type="primary" @click="handleSave">保存</Button>
        </div>
    </div>
</template>

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

    const LIGHT_CONTROL_LIST = [
        {
            label: '远光灯',
            key: 'highBeamSwitch'
        },
        {
            label: '近光灯',
            key: 'lowBeamSwitch'
        },
        {
            label: '雾灯',
            key: 'fogLightSwitch'
        },
        {
            label: '照明灯',
            key: 'headLampSwitch'
        },
        {
            label: '夜行灯',
            key: 'nightLightSwitch'
        },
        {
            label: '双闪灯',
            key: 'hazardBeamSwitch'
        },
    ]
    const data = reactive({
        form: {}
    })
    const { form } = toRefs(data)
    const lists = markRaw(LIGHT_CONTROL_LIST)
    const vehicleStore = useVehicleStore()
    const vehicleStoreToRefs = storeToRefs(vehicleStore)
    const { light } = vehicleStoreToRefs

    const emits = defineEmits(['sendMsg'])

    function handleSave() {
        emits('sendMsg', {
            type: '/setting/lightSetting',
            msg: JSON.parse(JSON.stringify(data.form))
        })
    }

    watch(light, (value) => {
        data.form = {...value}
    }, {
        immediate: true,
        deep: true
    })
</script>

<style lang="less" scoped>
    .light-control {
        .content {
            padding: 10px 20px;
            background: #111521;
            border-radius: 8px;
        }
        p {
            margin: 10px 0;
            .light-label {
                display: inline-block;
                width: 4vw;
                min-width: 55px;
            }
        }
        .footer {
            justify-content: end;
            margin-top: 10px;
            text-align: end;
        }
    }
</style>