<template>
    <div class="basic-param">
        <div class="control-content">
            <p class="basic-label">模式</p>
            <div class="content">
                <Checkbox class="content-list" v-model="form['developerEnable']">开发者模式</Checkbox>
                <Checkbox class="content-list" v-model="form['patternEnable']">由机群确认模式</Checkbox>
                <div class="content-list">
                    <Checkbox v-model="form['isAutoSwitchPattern']">自动切换无人模式</Checkbox>
                    <InputNumber v-model="form['autoSwitchPatternInterval']" 
                        :min="0"
                        :disabled="!form['isAutoSwitchPattern']" 
                        controls-outside></InputNumber>
                </div>
                <Checkbox class="content-list" v-model="form['unmanPatternSwitch']">无安全员模式</Checkbox>
            </div>
            <p class="basic-label">速度</p>
            <div class="content">
                <InputNumber 
                    v-model="form['velocityPercent']" 
                    :min="0"
                    controls-outside></InputNumber>
            </div>
            <p class="basic-label">举升时间</p>
            <div class="content">
                <InputNumber 
                    v-model="form['dumpbedTime']" 
                    :min="0"
                    controls-outside></InputNumber>
            </div>
        </div>
        <div class="footer">
            <Button type="primary" @click="handleSave">保存</Button>
        </div>
    </div>
</template>

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

    const data = reactive({
        form: {}
    })
    const { form } = toRefs(data)
    const vehicleStore = useVehicleStore()
    const vehicleStoreToRefs = storeToRefs(vehicleStore)
    const { basicinfo } = vehicleStoreToRefs

    const emits = defineEmits(['sendMsg'])

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

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

<style lang="less" scoped>
    .basic-param {
        padding: 0 10px;
        .basic-label {
            margin: 10px 0 5px;
            &:nth-child(1) {
                margin-top: 0;
            }
        }
        .content {
            padding: 10px 20px;
            background: #111521;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            .content-list {
                padding: 10px 0;
                border-bottom: 2px solid rgba(63,69,86,0.6);
                &:nth-last-child(1) {
                    border: 0;
                }
            }
        }
        .footer {
            margin-top: 10px;
            justify-content: end;
            text-align: end;
        }
    }
</style>