<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 elementGraphicMap" :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 elementWeatherMap" :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 elementPlaneData" :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, elementPlaneMap } from './ElementMap';

const router = useRouter()
const elementPointData = ref()
const elementLineData = ref()
const elementPlaneData = ref()

elementPointData.value = elementGraphicMap;
elementLineData.value = elementWeatherMap;
elementPlaneData.value = elementPlaneMap;

// 跳转到对应的编码编辑内容
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>