<template>
    <div class="container">
        <div class="flex-center">
            <div style="margin-right: 14px;">
                <el-input v-model="search" style="width: 342px; height: 40px;" placeholder="地名、地址、道路"
                    suffix-icon="el-icon-search" @change='handleSearch()'></el-input>
            </div>
            <div class="func-ico" :class="[is2D?'selected':'']" @click="handleIs2D()">
                <img src="../assets/一张图/icon_2d3d.png" alt="">
            </div>
            <div class="func-ico" :class="[isCamera?'selected':'']" @click="handleIsCamera()">
                <img src="../assets/一张图/icon_影像.png" alt="">
            </div>
            <div class="func-ico" :class="[isLayer?'selected':'']" @click="handleIsLayer()">
                <img src="../assets/一张图/icon_图层管理.png" alt="">
            </div>
            <div class="func-ico" :class="[isClear?'selected':'']" @click="handleIsClear()">
                <img src="../assets/一张图/icon_清除.png" alt="">
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'rightTopFunc',
        components: {},
        data() {
            return {
                search: '',
                is2D: false,
                isCamera: false,
                isLayer: false,
                isClear: false
            }
        },
        mounted() {},
        methods: {
            handleIs2D() {
                this.is2D = !this.is2D;
                this.$emit('is2D', this.is2D);
            },
            handleIsCamera() {
                this.isCamera = !this.isCamera;
                this.$emit('isCamera', this.isCamera);
            },
            handleIsLayer() {
                this.isLayer = !this.isLayer;
                this.$emit('isLayer', this.isLayer);
            },
            handleIsClear() {
                this.isClear = !this.isClear;
                this.$emit('isClear', this.isClear);
            },
            handleSearch(val) {
                this.$emit('searchRoat', val);
            }
        }
    }
</script>

<style scoped>
    .container {}

    .func-ico {
        width: 40px;
        height: 40px;
        position: relative;
        margin-left: 10px;
        cursor: pointer;
    }

    .flex-center {
        display: flex;
        align-items: center;
        justify-items: center;
    }

    .selected {
        background-image: url('../assets/一张图/bg_2d3d 2.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .el-icon-search:before {
        color: #fff;
    }

    >>>input::-webkit-input-placeholder {
        font-size: 16px;
        color: rgba(255, 255, 255, 0.78) !important;
    }

    >>>.el-input__inner {
        background: rgba(23, 34, 38, 0.57) !important;
        border: 1px solid rgba(23, 34, 38, 0.57);
        color: #fff;
    }

    >>>.el-input__suffix {
        color: #fff;
        font-size: 17px;
    }
</style>