<template>
    <div class="top-left-panel">
        <div>搜索</div>
        <div>放大</div>
        <div>缩小</div>
        <div>全屏</div>
    </div>

    <div class="bottom-left-panel">
        <router-link to="/">
            <div>首页</div>
        </router-link>
        <div>物资</div>
        <router-link to="/event/index">
            <div>事件</div>
        </router-link>
        <div>协同<br/>标绘</div>
    </div>

    <div class="popup">
        <!-- 弹出层 -->
        <transition name="slide">
            <div class="popup-content" :class="['popup-header', popup_visible ? 'popup-header-show_1': 'popup-content-hide']" >
                <div class="popup-header">
                    <van-icon v-if="popup_visible" name="play" @click="toggerPopup"/>
                    <van-icon v-if="!popup_visible" name="pause" @click="toggerPopup"/>
                </div>
                <div class="popup-data">
                    <van-tabs v-model:active="active_tab">
                        <van-tab title="事件信息">
                            <EventInfo></EventInfo>
                        </van-tab>
                        <van-tab title="任务指令">
                            <TaskCommand></TaskCommand>
                        </van-tab>
                    </van-tabs>
                </div>
            </div>
        </transition>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import EventInfo from './EventInfo.vue';
import TaskCommand from './TaskCommand.vue';

const popup_visible = ref(false);
const active_tab = ref(0);

const toggerPopup = () => {
    console.log("toggerPopup");
    popup_visible.value = !popup_visible.value;
    if(popup_visible.value) {

    }
    else {

    }
}
</script>

<style lang="scss" scoped>
.top-left-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    right: 10px;
    top: 10px;

    div {
        margin-bottom:10px;
    }
}

.bottom-left-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 10px;
    bottom: 60px;

    div {
        margin-bottom:10px;
    }
}

.popup {
  .popup-content {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    transition: transform .3s;

    .popup-header {
        width: 100vw;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }
    .popup-data {
        height:540px;
        background: #fff;
    }
  }

  .popup-content-hide {
    height:70px;
  }

  .popup-content-show_1 {
    height:590px;
  }
  .popup-content-show_2 {
    height:590px;
  }
}
</style>