<template>
    <div class="panel">
        <div class="card">
            <div class="card__head">
                <h3>方向控制</h3>
                <el-tag size="small" effect="dark" type="info">长按持续移动</el-tag>
            </div>

            <div class="dpad">
                <button class="dpad__btn dpad__btn--up" @mousedown="onPress('forward')" @mouseup="onRelease"
                    @mouseleave="onRelease" @touchstart.prevent="onPress('forward')" @touchend.prevent="onRelease">
                    <svg viewBox="0 0 14 14">
                        <path d="M7 1L13 11H1Z" fill="currentColor" />
                    </svg>
                    <small>前进</small>
                </button>

                <button class="dpad__btn dpad__btn--lt" @mousedown="onPress('left')" @mouseup="onRelease"
                    @touchstart.prevent="onPress('left')" @touchend.prevent="onRelease">
                    <svg viewBox="0 0 14 14">
                        <path d="M1 7L11 1V13Z" fill="currentColor" />
                    </svg>
                    <small>左转</small>
                </button>

                <div class="dpad__core"><span /></div>

                <button class="dpad__btn dpad__btn--rt" @mousedown="onPress('right')" @mouseup="onRelease"
                    @touchstart.prevent="onPress('right')" @touchend.prevent="onRelease">
                    <svg viewBox="0 0 14 14">
                        <path d="M13 7L3 1V13Z" fill="currentColor" />
                    </svg>
                    <small>右转</small>
                </button>

                <button class="dpad__btn dpad__btn--dn" @mousedown="onPress('backward')" @mouseup="onRelease"
                    @touchstart.prevent="onPress('backward')" @touchend.prevent="onRelease">
                    <svg viewBox="0 0 14 14">
                        <path d="M7 13L1 3H13Z" fill="currentColor" />
                    </svg>
                    <small>后退</small>
                </button>
            </div>

        </div>

        <!-- Parameters -->
        <div class="card">
            <div class="card__head">
                <h3>参数设置</h3>
            </div>

            <div class="param" v-for="p in paramList" :key="p.key">
                <div class="param__head">
                    <span>{{ p.label }}</span>
                    <b class="param__val">{{ formatVal(p) }}</b>
                </div>
                <el-slider v-model="p.model" :min="p.min" :max="p.max" :step="p.step" :show-tooltip="false" />
            </div>
        </div>
    </div>

</template>
<script setup>
import {  moveRobot, stopRobot } from '@/api/inspection/robot.js'

const props = defineProps({
    robot: {
        type: Object,
        default: () => ({})
    }
})

const maxSpeed = ref(0.6)
const rotationAngle = ref(0)

const paramList = reactive([
    { key: 'speed', label: '速度', model: maxSpeed, min: 0, max: 1, step: 0.1, unit: 'm/s', digits: 1 },
    { key: 'rot', label: '旋转角速度', model: rotationAngle, min: -1, max: 1, step: 0.1, unit: 'm/s', digits: 0 },
])

function formatVal(p) {
    const v = typeof p.model === 'object' ? p.model.value : p.model
    return (typeof v === 'number' ? v.toFixed(p.digits) : v) + ' ' + p.unit
}

const moveRobotData = ref({
    vx: 0,
    vy: 0,
    vz: 0
})

/* long-press stubs */
const onPress = async (_dir) => {
    if (_dir === 'forward') {
        moveRobotData.value.vx = maxSpeed.value
    } else if (_dir === 'backward') {
        moveRobotData.value.vx = -maxSpeed.value
    } else if (_dir === 'left') {
        moveRobotData.value.vy = maxSpeed.value
    } else {
        moveRobotData.value.vy = -maxSpeed.value
    }
    moveRobotData.value.vz = rotationAngle.value
    const res = await moveRobot({
        terminalId: props.robot.terminalId,
        deviceId: props.robot.robotCode,
        ...moveRobotData.value 
    })
}

function onRelease() {
    moveRobotData.value.vx = 0;
    moveRobotData.value.vy = 0;
    stopRobot({
        terminalId: props.robot.terminalId,
        deviceId: props.robot.robotCode,
    })
}
</script>
<style lang="scss" scoped>
.panel {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    // background: #0F1E38;

    .card {
        padding: 18px 20px;
        border-bottom: 1px solid rgba(0, 195, 255, 0.08);

        &__head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;

            h3 {
                font-family: 'Rajdhani', sans-serif;
                font-size: 14px;
                font-weight: 700;
                letter-spacing: 1.2px;
                color: #475a72;
                margin: 0;
                text-transform: uppercase;
            }
        }

        :deep(.el-tag) {
            font-size: 10px;
            height: 20px;
            background: rgba(0, 195, 255, 0.08);
            border-color: rgba(0,195,255,0.08);
            color: #00c3ff;
        }

        .dpad {
            display: grid;
            grid-template-columns: repeat(3, 76px);
            grid-template-rows: repeat(3, 64px);
            gap: 6px;
            justify-content: center;
            margin-bottom: 18px;

            &__btn {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 4px;
                border: 1px solid rgba(0, 195, 255, 0.08);
                border-radius: 8px;
                background: #0d1a3b;
                color: #c0cfdf;
                cursor: pointer;
                transition: all .15s ease;

                svg {
                    width: 14px;
                    height: 14px;
                }

                small {
                    font-size: 10px;
                    letter-spacing: .5px;
                    color: #475a72;
                }

                &:hover {
                    border-color: rgba(0, 195, 255, 0.08);
                    background: #101930;
                    color: #00c3ff;
                }

                &:active {
                    background: #00c3ff;
                    color: #060a12;
                    border-color: #00c3ff;
                    box-shadow: 0 0 24px rgba(0,195,255,0.14);
                    transform: scale(.94);

                    small {
                        color: #060a12;
                    }
                }

                &--up {
                    grid-column: 2;
                    grid-row: 1;
                }

                &--lt {
                    grid-column: 1;
                    grid-row: 2;
                }

                &--rt {
                    grid-column: 3;
                    grid-row: 2;
                }

                &--dn {
                    grid-column: 2;
                    grid-row: 3;
                }
            }

            &__core {
                grid-column: 2;
                grid-row: 2;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid rgba(0,195,255,0.08);
                border-radius: 8px;
                background: rgba(0, 195, 255, 0.03);

                span {
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    background: #00c3ff;
                    opacity: .3;
                }
            }
        }

        .estop {
            width: 100%;
            height: 42px !important;
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 1px;
            border-color: #ff2d55 !important;
            color: #ff2d55 !important;
            background: rgba(255, 45, 85, 0.06) !important;

            &:hover {
                background: rgba(255, 45, 85, 0.14) !important;
            }
        }

        .param {
            margin-bottom: 18px;

            &:last-child {
                margin-bottom: 0;
            }

            &__head {
                display: flex;
                justify-content: space-between;
                align-items: baseline;
                margin-bottom: 8px;
                font-size: 13px;
                color: #475a72;
            }

            &__val {
                font-family: 'JetBrains Mono', monospace;
                font-size: 13px;
                font-weight: 500;
                color: #00c3ff;
            }

            :deep(.el-slider) {
                .el-slider__runway {
                    height: 4px;
                    background: rgba(255, 255, 255, 0.05);
                    border-radius: 2px;
                }

                .el-slider__bar {
                    height: 4px;
                    background: #00c3ff;
                    border-radius: 2px;
                }

                .el-slider__button-wrapper {
                    top: -16px;
                }

                .el-slider__button {
                    width: 14px;
                    height: 14px;
                    border: 2px solid #00c3ff;
                    background: #0f1628;
                    box-shadow: 0 0 8px rgba(0, 195, 255, 0.3);
                    transition: box-shadow .2s;

                    &:hover {
                        box-shadow: 0 0 14px rgba(0, 195, 255, 0.35);
                    }
                }
            }
        }
    }
}
</style>