<template>
    <transition
        appear
        name="custom-classes-transition"
        enter-active-class="animated slideInRight speed"
        leave-active-class="animated slideOutRight speed"
    >
        <div class="hots-panel" v-show="show">
            <div class="ui-between header" app-border dir-bottom>
                <span>{{$t('modules.hotspot.add')}}</span>
                <i class="iconfont icon_close" @click="cancel(false)"></i>
            </div>
            <div class="content">
                <div>
                    <ul>
                        <li app-border dir-bottom>
                            <div class="title">{{$t('modules.hotspot.location')}}</div>
                            <div style="margin: 15px 0;">
                                <button class="ui-button submit block" :class="{'disable':$store.state.hotspot.canAddTag==false}" @click="confirm">{{$t('modules.hotspot.location_confirm')}}</button>
                            </div>
                            <div class="ui-between remark">{{$t('modules.hotspot.location_tips')}}</div>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- <div class="ui-between footer" app-border dir-top>
                <button class="ui-button submit" @click="save">完成</button>
                <button class="ui-button cancel" @click="cancel">取消</button>
            </div>-->
        </div>
    </transition>
</template>
<script>

export default {
    props: {
        show: Boolean
    },
    data() {
        return {};
    },
    watch:{
        show(){
            if(this.show){
                this.$store.commit("hotspot/SetStyle", null);
            }
        }
    },
    methods: {
        confirm() {
            this.cancel(true);
        },
        cancel(isConfirm) {
            if (!isConfirm) {
                this.$bus.emit("hotspot/Tag/Cancel");
            }
            this.$store.commit('hotspot/SetCanAddTag',false)
            this.$emit("close", isConfirm);
        }
    }
};
</script>
<style lang="less" scoped>
.hots-panel {
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    width: 236px;
    background: rgba(38, 39, 41, 1);
    box-shadow: 0px 0px 20px #090909;
    z-index: 10;
    display: flex;
    flex-direction: column;
    .header {
        height: 51px;
        padding: 0 10px;
        display: flex;
        .icon_close {
            cursor: pointer;
        }
    }
    .footer {
        padding: 15px;
        .ui-button {
            width: 45%;
        }
    }
    .content {
        display: flex;
        flex: 1;
        overflow: hidden;
        > div {
            width: 100%;
            height: 100%;
        }
        ul {
            width: 100%;
        }
        li {
            padding: 10px;
            > div {
                margin-bottom: 15px;
                &:last-child {
                    margin-bottom: 0;
                }
                &.title {
                    margin-bottom: 10px;
                }
                label {
                    color: #ababab;
                    font-size: 12px;
                }
            }
            &:last-child {
                border: none;
                &::after {
                    display: none;
                }
            }
            .link-button {
                display: flex;
                justify-content: space-between;
                button {
                    width: 45%;
                }
            }
        }
        .styles {
            display: flex;
            align-items: center;
            justify-content: space-between;
            li {
                cursor: pointer;
                width: 38px;
                height: 38px;
                background-position: center center;
                background-size: 80%;
                background-repeat: no-repeat;
                border: solid 2px #262729;
                &.active {
                    border-color: @color;
                }
            }
        }
        .remark {
            color: #ababab;
            line-height: 1.5;
            letter-spacing: 0.1px;
            white-space: pre-wrap;
            font-size: 12px;
        }
    }
}
</style>