<template>
    <div class="buttons">
        <!-- TODO:只有单机循迹时显示 -->
        <div v-if="singleTrackEnable" type="info" class="middle-btn" data-name="loadcomeout" @click="doSend">装载出场</div>
        <span :class="['btn-span', !isLog && 'btn-span-active']" @click="changeLog">{{ isLog ? '关' : '开' }}</span>
        <span :class="['btn-span-load', !isLoad && 'btn-span-active']" @click="changeLoad">{{ isLoad ? '空车装载' :
            '空车卸载' }}</span>
        <div type="info" class="middle-btn" data-name="unload" @click="doSend">卸载</div>
        <div type="info" class="middle-btn smiddle-btn" data-name="comeout" @click="doSend">
            <p>卸 载</p>
            <p>出 场</p>
        </div>
        <div type="info" class="large-btn stop-btn" data-name="stop" @click="doSend">急停</div>
        <div type="info" class="large-btn slow-down-btn" data-name="slow" @click="doSend">缓停</div>
        <div type="info" class="large-btn run-btn" data-name="run" @click="doSend">行驶</div>
        <!-- <div type="info" :class="['middle-btn', isShield ? '' : 'disable']" data-name="comeout" @click="handleShield">OBC</div> -->
        <div type="info" class="middle-btn" data-name="comeout" @click="handleShield">OBC</div>
        <Modal v-model="isShow" :mask-closable="false" title="提示信息" @on-ok="duSure">
            <p>{{ content }}</p>
        </Modal>
    </div>
</template>

<script setup>
    import { watch, ref } from 'vue';
    import { useVehicleStore } from '../../store/VehicleStore';
    import { useMapStore } from '../../store/MapStore';
    import { storeToRefs } from 'pinia';
    import { Message } from 'view-ui-plus';

    const mapping = {
        unload: 10,
        comeout: 11,
        stop: 0,
        run: 1,
        slow: 2,
        loadcomeout: 12,
        single_preview: 13
    }

    const porps = defineProps({
        singleTrackEnable: Boolean
    })
    const isLog = ref(true)
    const isLoad = ref(true)
    const isShow = ref(false)
    const isShield = ref(false)
    const currentName = ref('')
    const content = ref('')
    const vehicleStore = useVehicleStore()
    const { loadSwitch, logSwitch, debugack } = storeToRefs(vehicleStore)
    const mapStore = useMapStore()
    const { obstacleData } = storeToRefs(mapStore)

    const emits = defineEmits('handleSend')
    
    function sendMsg(data) {
        emits('handleSend', data)
    }

    function handleShield() {
        // if (!isShield.value) return

        isShow.value = true
        content.value = '是否清除范围内的障碍物？'
        currentName.value = 'obstacle'
    }

    function shieldObstacle() {
        if (obstacleData && obstacleData.value.length) {
            let msg = []
            obstacleData.value.map(obstacle => {
                let { typeColor, typeDescrip, ocoordinate } = obstacle
                msg.push({
                    typeColor,
                    typeDescrip,
                    coordinate: JSON.parse(JSON.stringify(ocoordinate))
                })
            })
            let data = {
                timestamp: new Date().getTime(),
                obstacle: msg
            }
            sendMsg({
                type: '/setting/ignoreObstacles',
                msg: data
            })
        }else{
            sendMsg({
                type: '/setting/ignoreObstacles',
                msg: {
                    timestamp: new Date().getTime(),
                    obstacle: []
                }
            })
        }

    }

    function duSure() {
        if (currentName.value === 'obstacle') {
            shieldObstacle()
        } else {
            sendMsg({
                type: '/command/debug',
                msg: {
                    value: mapping[currentName.value]
                }
            })
        }
    }

    function changeLoad() {
        sendMsg({
            type: '/command/debug',
            msg: {value: isLoad.value ? 7 : 6}
        })
    }

    function changeLog() {
        sendMsg({
            type: '/command/debug',
            msg: {value: isLog.value ? 8 : 9}
        })
    }

    function doSend(e) {
        const target = e.currentTarget
        const { name } = target.dataset
        currentName.value = name
        if (['unload', 'comeout', 'loadcomeout', 'run'].includes(name)) {
            let names = {
                unload: '卸载',
                comeout: '卸载出场',
                loadcomeout: '装载出场',
                run: '行驶'
            }
            isShow.value = true
            content.value = `是否确定执行${names[name]}操作？`
        } else {
            sendMsg({
                type: '/command/debug',
                msg: {value: mapping[currentName.value]}
            })
        }
    }

    watch(loadSwitch, (value) => {
        isLoad.value = value
    }, {
        deep: true
    })

    watch(logSwitch, (value) => {
        isLog.value = !value
    }, {
        deep: true
    })

    watch(debugack, (data) => {
        let value = data && data.value
        if (!value) return
        let tipsMap = {
            0: 'stop',
            1: 'run',
            10: '卸载',
            11: '出场'
        }
        let tips = tipsMap[value]
        if (tips) {
            Message.success(`执行${tips}成功！`)
        } else {
            switch(value) {
                case 6:
                    isLoad.value = true
                    break
                case 7:
                    isLoad.value = false
                    break
                case 8:
                    isLog.value = false
                    break
                case 9:
                    isLog.value = true
                    break
            }
        }
        vehicleStore.setData('debugack', null)
    }, {
        deep: true
    })

    watch(obstacleData, (value) => {
        isShield.value = value && value.length > 0
    })
</script>
<style lang="less" scoped>
    .buttons {
        position: absolute;
        top: 60px;
        right: 10px;
        z-index: 999;
        display: flex;
        align-items: center;
        .middle-btn {
            width: 5.5vw !important;
            height: 5.5vw !important;
            min-width: 44px;
            min-height: 44px;
            background: url('/image/btn-unload.png') no-repeat;
            background-size: 100% 100%;
            font-weight: 600;
            color: #000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1vw;
            cursor: pointer;
        }

        .smiddle-btn {
            flex-direction: column;
        }

        .large-btn {
            width: 5vw !important;
            height: 5vw !important;
            min-width: 50px;
            min-height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            color: #fff;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            cursor: pointer;
        }

        .disable {
            cursor: not-allowed;
            opacity: .4;
        }

        .stop-btn {
            background-image: url('/image/stop.png');
        }

        .slow-down-btn {
            background-image: url('/image/slow-down.png');
        }

        .run-btn {
            color: #4399FF;
            background-image: url('/image/run.png');
        }
        .btn-span,
        .btn-span-load {
            display: inline-block;
            padding: 5px 10px;
            color: #000;
            font-weight: 600;
            cursor: pointer;
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .btn-span {
            background-image: url('/image/btn-default.png');
        }

        .btn-span-load {
            background-image: url('/image/btn-load.png');
            min-width: 46px;
        }

        .btn-span-active {
            opacity: .6;
        }
    }
</style>