<template>
    <div class="default-main">
        <el-tabs
            :tab-position="tabPosition"
            style="height: 600px"
            class="demo-tabs"
            v-model="activated"
            @tab-click="handleClick"
        >
            <el-tab-pane label="3D可视化" name="3dMap">
                <div class="demo-image__lazy">
                    <el-image :src="url" lazy/>
                </div>
            </el-tab-pane>
            <el-tab-pane label="2D地图" name="2dMap">

            </el-tab-pane>
            <el-tab-pane label="视频" name="video">

            </el-tab-pane>
        </el-tabs>
    </div>


</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { TabsPaneContext } from 'element-plus'

const tabPosition = ref('left')
const activated = ref('3dMap')
const url = '@/assets/images/aerocraft_info.png'
const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}

// const url = reactive({
//     0: '@/assets/images/webgl_pin.png',
//     1: '@/assets/images/neoMap.png',
//     2: '@/assets/images/neoVideo.png',
// })

</script>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    name: 'demo/neoVideo',
})
</script>

<style scoped lang="scss">

.demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
    height: 100%;
}

.demo-image__lazy .el-image {
    display: block;
    min-height: 600px;
}

</style>
