<template>
    <div class="run-control">
        <div class="content">
            <div v-for="item in topList" :key="item.index" class="c-box">
                <Button type="primary" @click="handleSave(item.key, item.value)">{{item.btn}}</Button>
                <p>
                    <span class="desc">{{item.des}}</span>
                    <InputNumber v-model="form[item.value]" controls-outside></InputNumber>
                </p>
            </div>
        </div>
        <div class="run-middle">
            <div class="content" v-for="item in middleList" :key="item.index">
                <p class="c-box" v-for="list in item" :key="list.key">
                    <span>{{list.label}}</span>
                    <i-switch size="large" v-model="form[list.key]" @on-change="handleChange($event, list.type)">
                        <template #open>
                            <span>开启</span>
                        </template>
                        <template #close>
                            <span>关闭</span>
                        </template>
                    </i-switch>
                </p>
            </div>
        </div>
        <div class="content">
            <p class="c-box b-box">
                <Button type="primary" @click="boxDown(10)">货箱回落</Button>
                <span>仅在0/1级故障下且货箱功能正常时点击</span>
            </p>
            <p class="c-box b-box">
                <Button type="primary" @click="handleSave(6)">解锁</Button>
                <span>解锁上次异常退出导致的路权锁定</span>
            </p>
            <p class="c-box b-box">
                <Button type="primary" @click="handleSave(7)">加载参数</Button>
                <span>触发控制模块重新加载参数</span>
            </p>
        </div>
        <Modal v-model="isShow"
          
            :mask-closable="true"
            @on-ok="handleSave(10)"
            @on-cancel="boxCancel()">
            <p style="text-align: center;">是否执行货箱回落指令</p>
        </Modal>
    </div>
</template>

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

    const RUN_CONTROL_TOP = [
        {
            btn: '打火',
            key: '1',
            des: '打火持续时间',
            value: 'engineStartTime'
        },
        {
            btn: '熄火',
            key: '2',
            des: '熄火持续时间',
            value: 'engineStallTime'
        },
        {
            btn: '上电',
            key: '3',
            des: '上电持续时间',
            value: 'powerOnTime'
        },
    ]
    const RUN_CONTROL_MIDDLE = [
        [
            {
                label: '举升',
                key: 'liftSwitch',
                type: 4
            },
            {
                label: '防滑',
                key: 'antiSlideSlip',
                type: '5'
            }
        ],
        [
            // {
            //     label: '感知屏蔽',
            //     key: 'perceptionShielding',
            //     type: 8
            // },
            {
                label: '绕障',
                key: 'obstaclesBypassingEnable',
                type: 9
            }
        ]
    ]

    const topList = markRaw(RUN_CONTROL_TOP)
    const middleList = markRaw(RUN_CONTROL_MIDDLE)
    const data = reactive({
        form: {}
    })
    const { form } = toRefs(data)
    const vehicleStore = useVehicleStore()
    const vehicleStoreToRefs = storeToRefs(vehicleStore)
    const { controlInfo } = vehicleStoreToRefs

    const isShow=ref(false);

    const emits = defineEmits(['sendMsg'])

    function handleSend(msg) {
        emits('sendMsg', {
            type: '/setting/controlSetting',
            msg: JSON.parse(JSON.stringify(msg))
        })
    }

    function handleChange(value, key) {
        let data = value ? 1 : 2
        handleSend({
            value: data,
            type: Number(key)
        })
    }

    function handleSave(type, key) {
        let value = 1
        if (key) {
            value = form.value[key] || 1
        }
        let data = {
            type: Number(type),
            value
        }

        handleSend(data)
    }

    function boxDown(){
        isShow.value=true;
    }
    function boxCancel(){
        isShow.value=false;
    }
    watch(controlInfo, (value) => {
        data.form = {...value}
    }, {
        immediate: true,
        deep: true
    })
</script>

<style lang="less" scoped>
    .run-control {
        overflow: auto;
        .content {
            padding: 10px 20px;
            background: #111521;
            border-radius: 8px;
            .c-box {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px 0;
                border-bottom: 2px solid rgba(63,69,86,0.6);
                &:nth-last-child(1) {
                    border: 0;
                }
                .desc {
                    margin-right: 5px;
                }
                /deep/.ivu-btn-primary {
                    width: 88px;
                }
            }
            .b-box {
                justify-content: flex-start;
                span {
                    margin-left: 10px;
                }
            }
        }
        .run-middle {
            display: flex;
            margin: 10px 0;
            .content {
                width: 50%;
                &:nth-child(1) {
                    margin-right: 10px;
                }
            }
        }
    }
</style>