<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>
            <p>
                <span class="light-label">梯子下降</span>
                <i-switch :disabled="drivingPattern == 0" v-model="form['ladderDownSwitch']" size="large" @on-change="handleChange($event, 'ladderDownSwitch')">
                    <template #open>
                        <span>开启</span>
                    </template>
                    <template #close>
                        <span>关闭</span>
                    </template>
                </i-switch>
                <span style="margin-left: 10px;">下降状态：{{ ladderDownStatus == 0 ? '未下降到位' : '下降到位' }}</span>
            </p>
            <p>
                <span class="light-label">梯子上升</span>
                <i-switch :disabled="drivingPattern == 0" v-model="form['ladderUpSwitch']" size="large" @on-change="handleChange($event, 'ladderUpSwitch')">
                    <template #open>
                        <span>开启</span>
                    </template>
                    <template #close>
                        <span>关闭</span>
                    </template>
                </i-switch>
                <span style="margin-left: 10px;">上升状态：{{ ladderUpStatus == 0 ? '未上升到位' : '上升到位' }}</span>
            </p>
        </div>
        <div class="footer">
            <Button type="primary" @click="handleSave">保存</Button>
        </div>
    </div>
</template>

<script setup>
    import { reactive, toRefs, watch, markRaw, computed, ref } 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, getVehicleDebug, statusinfo } = vehicleStoreToRefs
    const ladderUpStatus = ref(0)
    const ladderDownStatus = ref(0)
    // 软件层面有人-0；无人-1
    const drivingPattern = computed(() => {
        let pattern = statusinfo.value['softDrivingPattern']
        return pattern
    })

    const emits = defineEmits(['sendMsg'])

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

    function handleChange(value, name) {
        if (value) {
            data.form[name === 'ladderUpSwitch' ? 'ladderDownSwitch' : 'ladderUpSwitch'] = false
        }
    }

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

    watch(getVehicleDebug, (debugValue) => {
        if (debugValue) {
            ladderUpStatus.value = debugValue.ladderUpStatus
            ladderDownStatus.value = debugValue.ladderDownStatus
        }
    }, {
            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: 5.5vw;
                min-width: 55px;
            }
        }
        .footer {
            justify-content: end;
            margin-top: 10px;
            text-align: end;
        }
    }
</style>