<template>
    <div class="signal-track">
        <div class="content control-content">
            <Checkbox class="single-list" v-model="form['singleTrackEnable']"><span>单机循迹使能</span></Checkbox>
            <RadioGroup class="single-track-type" v-model="form['singleTrackType']">
                <div class="c-box">
                    <Radio :label="0">
                        <span>单路径多卸载点</span>
                    </Radio>
                    <div :class="['max-unload-counts', form['singleTrackType'] == 0 ? '' : 'disable']">
                        最大的卸载次数
                        <InputNumber :disabled="form['singleTrackType'] != 0" v-model="form['maxUnloadCounts']" controls-outside></InputNumber>
                    </div>
                </div>
                <Radio :label="1" class="c-box">
                    <span>多路径</span>
                </Radio>
            </RadioGroup>
        </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 { singleTrackAck } = vehicleStoreToRefs

    const emits = defineEmits(['sendMsg'])

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

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

<style lang="less" scoped>
    .signal-track .content {
        display: flex;
        flex-direction: column;
        padding: 10px 20px;
        background: #111521;
        border-radius: 8px;
        .single-track-type {
            display: flex;
            flex-direction: column;
        }
        .single-list, .c-box {
            padding: 10px 0;
            border-bottom: 2px solid rgba(63,69,86,0.6);
            .max-unload-counts {
                margin-top: 10px;
            }
            .disable {
                opacity: .5;
            }
        }
        .c-box:nth-last-child(1) {
            border: 0;
        }
    }
    .signal-track .footer {
        justify-content: end;
        margin-top: 10px;
        text-align: end;
    }
</style>