<template>
    <div class="control-box">
        <div class="left">
            <div class="title">
                <img :src="require(`../assets/${img}.png`)" /><span>{{ title }}</span>
            </div>
            <div class="setspeed">
                <div class="speed">速度: {{ speed }} m/s</div>
                <!-- <el-button type="primary" class="set" @click="handleset('速度')">设置</el-button> -->
            </div>
        </div>
        <div class="left">
            <div class="setspeed" style="margin-top: 48px">
                <div class="speed">位置: {{ position }} m/s</div>
                <!-- <el-button type="primary" class="position" @click="handleset('位置')">设置</el-button> -->
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ControlBox',
    props: ['title', 'img', 'speed', 'position', 'unit'],
    methods: {
        // handleset(unit) {
        //     this.$emit('handleset',{title:this.title,unit:unit})
        // }
    }
};
</script>

<style lang="scss" scoped>
.control-box {
    width: 45%;
    display: flex;
    padding-bottom: 64px;

    .left {
        display: flex;
        flex-direction: column;
        color: #91fdb9;
        font-weight: bold;
        margin-right: 20px;
        .title {
            display: flex;
            align-items: center;

            span {
                margin-left: 8px;
                margin-top: 3px;
                font-size: 18px;
            }
        }

        .setspeed {
            display: flex;
            margin-top: 25px;
            color: #4c5d71;
            font-size: 16px;

            .speed {
                width: 365px;
                height: 40px;
                border: #263042 solid 1px;
                box-sizing: border-box;
                line-height: 40px;
                padding-left: 18px;
                margin-right: 10px;
            }

            .position {
                background-color: #111827;
                color: #fff;
                border-color: #263042;
                font-weight: 600;
                letter-spacing: 1px;
            }

            .set {
                background-color: #91fdb9;
                color: #0b111d;
                border-color: #91fdb9;
                font-weight: 600;
                letter-spacing: 1px;
            }
        }
    }
}
</style>