<template>
    <div class="app-continer">
        <div class="mt-5">
            <span class="text-base font-bold">图元</span>
            <div style="overflow-y: auto" class="container">
                <div v-for="item in elementGraphic" :key="item.id" @click="indexBtn(item.title)" class="item-container">
                    <div :id="item.title">{{item.title}}</div>
                    <img :src="item.pngUrl" width="250">
                </div>
            </div>
        </div>
        <div class="mt-10">
            <span class="text-base font-bold">天气</span>
            <div style="overflow-y: auto" class="container">
                <div v-for="item in elementWeather" :key="item.id" @click="indexBtn(item.title)" class="item-container">
                    <div :id="item.title">{{item.title}}</div>
                    <img :src="item.pngUrl" width="250">
                </div>
            </div>
        </div>
        <div class="mt-10">
            <span class="text-base font-bold">动目标</span>
            <div style="overflow-y: auto" class="container">
                <div v-for="item in elementMoving" :key="item.id" @click="indexBtn(item.title)" class="item-container">
                    <div :id="item.title">{{item.title}}</div>
                    <img :src="item.pngUrl" width="250">
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { elementGraphicMap, elementWeatherMap, elementMovingMap } from './ElementMap';

const router = useRouter()
const elementGraphic = ref()
const elementWeather = ref()
const elementMoving = ref()

elementGraphic.value = elementGraphicMap;
elementWeather.value = elementWeatherMap;
elementMoving.value = elementMovingMap;

// 跳转到对应的编码编辑内容
function indexBtn(id) {
    router.push(`/CodeAndCesium/?id=${id}`)
}
</script>

<style lang="scss" scoped>
.app-continer{
    width: 100vw;
    height: 100vh;
}
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.item-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  transition: background-color 0.3s; /* 添加过渡效果 */

  &:hover {
    background-color: #e9e7e7;
    cursor: pointer;
  }
}
</style>