<template>
    <div class="container">
        <div>
            <div class="func-ico" :class="[isReturn?'selected':'']" @click="handleReturn('isReturn')">
                <el-tooltip class="item" effect="dark" content="复位" placement="left">
                    <img src="../assets/一张图/icon_复位.png" alt="">
                </el-tooltip>
            </div>
            <div class="func-ico" :class="[enlarge?'selected':'']" @click="handleEnlarge('enlarge')">
                <el-tooltip class="item" effect="dark" content="放大" placement="left">
                    <img src="../assets/一张图/icon_放大.png" alt="">
                </el-tooltip>
            </div>
            <div class="func-ico" :class="[narrow?'selected':'']" @click="handleNarrow('narrow')">
                <el-tooltip class="item" effect="dark" content="缩小" placement="left">
                    <img src="../assets/一张图/icon_缩小.png" alt="">
                </el-tooltip>
            </div>
            <div class="func-ico" :class="[coordinate?'selected':'']" @click="handleCoordinate('coordinate')">
                <el-tooltip class="item" effect="dark" content="坐标" placement="left">
                    <img src="../assets/一张图/icon_坐标.png" alt="">
                </el-tooltip>
            </div>
            <div class="func-ico" :class="[distance?'selected':'']" @click="handleDistance('distance')">
                <el-tooltip class="item" effect="dark" content="距离" placement="left">
                    <img src="../assets/一张图/icon_距离.png" alt="">
                </el-tooltip>
            </div>

            <div class="func-ico" :class="[area?'selected':'']" @click="handleArea('area')">
                <el-tooltip class="item" effect="dark" content="面积" placement="left">
                    <img src="../assets/一张图/icon_面积.png" alt="">
                </el-tooltip>
            </div>
            <div class="func-ico" :class="[marker?'selected':'']" @click="handleMarker('marker')">
                <el-tooltip class="item" effect="dark" content="标注" placement="left">
                    <img src="../assets/一张图/icon_标注.png" alt="">
                </el-tooltip>
            </div>
            <div class="func-ico" :class="[rollerShutter?'selected':'']" @click="handleRollerShutter('rollerShutter')">
                <el-tooltip class="item" effect="dark" content="卷帘" placement="left">
                    <img src="../assets/一张图/icon_卷帘.png" alt="">
                </el-tooltip>
            </div>
            <div class="func-ico" :class="[splitScreen?'selected':'']" @click="handleSplitScreen('splitScreen')">
                <el-tooltip class="item" effect="dark" content="分屏" placement="left">
                    <img src="../assets/一张图/icon_分屏.png" alt="">
                </el-tooltip>
            </div>
            <div class="func-ico" :class="[toNorth?'selected':'']" @click="handleToNorth('toNorth')">
                <el-tooltip class="item" effect="dark" content="指北" placement="left">
                    <img src="../assets/一张图/icon_指北.png" alt="">
                </el-tooltip>
            </div>

            <div class="func-ico" :class="[topSee?'selected':'']" @click="handleTopSee('topSee')">
                <el-tooltip class="item" effect="dark" content="顶视" placement="left">
                    <img src="../assets/一张图/icon_顶视.png" alt="">
                </el-tooltip>
            </div>
            <div class="func-ico" :class="[roundSee?'selected':'']" @click="handleRoundSee('roundSee')">
                <el-tooltip class="item" effect="dark" content="环视" placement="left">
                    <img src="../assets/一张图/icon_环视.png" alt="">
                </el-tooltip>
            </div>

            <div class="func-ico" :class="[allSee?'selected':'']" @click="handleAllSee('allSee')">
                <el-tooltip class="item" effect="dark" content="通视" placement="left">
                    <img src="../assets/一张图/icon_通视.png" alt="">
                </el-tooltip>
            </div>


            <!--以下都未设计图片  -->
            <!--淹没分析  -->
            <div class="func-ico" :class="[ymAnslysis?'selected':'']" @click="handleymAnslysis('ymAnslysis')">
                <el-tooltip class="item" effect="dark" content="淹没" placement="left">
                    <img src="../assets/一张图/icon_通视.png" alt="">
                </el-tooltip>
            </div>


            <!--阴影分析  -->
            <div class="func-ico" :class="[yyAnslysis?'selected':'']" @click="handleyyAnslysis('yyAnslysis')">
                <el-tooltip class="item" effect="dark" content="阴影" placement="left">
                    <img src="../assets/一张图/icon_通视.png" alt="">
                </el-tooltip>
            </div>
            <!--控高分析  -->
            <!-- <div class="func-ico" :class="[kgAnalusis?'selected':'']" @click="handlekgAnalusis('kgAnalusis')">

                <el-tooltip class="item" effect="dark" content="控高" placement="left">
                    <img src="../assets/一张图/icon_通视.png" alt="">
                </el-tooltip>
            </div> -->

            <!--天际线分析  -->
            <div class="func-ico" :class="[tjxAnslysis?'selected':'']" @click="handletjxAnslysis('tjxAnslysis')">
                <el-tooltip class="item" effect="dark" content="天际线" placement="left">
                    <img src="../assets/一张图/icon_通视.png" alt="">
                </el-tooltip>
            </div>


            <!-- <div class="func-ico" :class="[is2D?'selected':'']" @click="handleIs2D()">
                <img src="../assets/toolbar_icon_ 展开.png" alt="">
            </div> -->

        </div>
    </div>
</template>

<script>
    export default {
        name: 'rightFunc',
        components: {},
        props: ['isReturn', 'enlarge', 'narrow', 'coordinate', 'distance',
            'area', 'marker', 'rollerShutter', 'splitScreen', 'toNorth',
            'topSee', 'roundSee', 'horizon', 'allSee','ymAnslysis', 
            'tjxAnslysis', 'yyAnslysis', 'kgAnalusis'
        ],
        data() {
            return {}
        },
        mounted() {},
        methods: {
            handleReturn(val) {
                this.$emit('isReturn', val, this.isReturn);
            },
            handleEnlarge(val) {
                this.$emit('enlarge', val, this.enlarge);
            },
            handleNarrow(val) {
                this.$emit('narrow', val, this.narrow);
            },
            handleCoordinate(val) {
                this.$emit('coordinate', val, this.coordinate);
            },
            handleDistance(val) {
                this.$emit('distance', val, this.distance);
            },

            handleArea(val) {
                this.$emit('area', val, this.area);
            },
            handleMarker(val) {
                this.$emit('marker', val, this.marker);
            },
            handleRollerShutter(val) {
                this.$emit('rollerShutter', val, this.rollerShutter);
            },
            handleSplitScreen(val) {
                this.$emit('splitScreen', val, this.splitScreen);
            },
            handleToNorth(val) {
                this.$emit('toNorth', val, this.toNorth);
            },

            handleTopSee(val) {
                this.$emit('topSee', val, this.topSee);
            },
            handleRoundSee(val) {
                this.$emit('roundSee', val, this.roundSee);
            },
            handleHorizon(val) {
                this.$emit('horizon', val, this.horizon);
            },
            handleAllSee(val) {
                this.$emit('allSee', val, this.allSee);
            },

            handleymAnslysis(val) {
                this.$emit('ymAnslysis', val, this.ymAnslysis);
            },
            handletjxAnslysis(val) {
                this.$emit('tjxAnslysis', val, this.tjxAnslysis);
            },
            handleyyAnslysis(val) {
                this.$emit('yyAnslysis', val, this.yyAnslysis);
            },
            handlekgAnalusis(val) {
                this.$emit('kgAnalusis', val, this.kgAnalusis);
            }
        }
    }
</script>

<style scoped>
    .func-ico {
        width: 40px;
        height: 40px;
        position: relative;
        /* margin-left: 10px; */
        cursor: pointer;
        background: rgba(4, 10, 10, 0.57);
        box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.50);
        border-top: 1px solid rgba(255, 255, 255, .2);
    }

    .func-ico:nth-of-type(1) {
        border-top: 0px solid rgba(255, 255, 255, .2);
    }

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

    img {
        /* width: 100%;
        height: 100%; */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>