<template>
  <Page>
    <template #out>
      <ScrollRect class="d-flex flex-column village-details" scroll="vertical">
        <div
          v-if="loading"
          class="d-flex justify-content-center align-items-center"
          style="min-height: 200px;"
        >
          <SimpleLoading />
        </div>
        <template v-else>
          <!-- 轮播图 -->
          <ImageSwiper
            v-if="data.images && data.images.length > 0"
            class="main-round-box flat"
            :items="data.images"
            :autoplay="2500"
            :showAddons="false"
            style="height:20vh"
          >
            <template #item="{ item }">
              <img class="swiper-slide" :src="item" />
            </template>
          </ImageSwiper>
          <img 
            v-else 
            :src="data.image" 
            class="swiper-slide main-round-box flat"
          />
          <div class="mt-3" />
          <div class="d-flex flex-col content-box">
            <SimpleRichHtml
              v-if="data.overview"
              :contents="[ data.overview ]"
              :tag-style="{
                a: 'text-decoration: underline ;',
                p: 'margin-bottom: 20px;',
                img: 'border-radius: 10px;'
              }"
            />
            <span v-else>无内容，请添加内容!</span>
          </div>
          <div class="mt-3" />
          <div class="d-flex flex-row flex-wrap">
            <div
              v-for="(item, k) in tagsData"
              :key="k"
              class="tag-item main-any-button"
              :tabindex="1"
              @click="router.push({
                path: '/village/list',
                query: { 
                  id: item.id,
                  model_id: item.modelId,
                  main_body_column_id: item.mainBodyColumnId,
                  region: item.region,
                }, 
              })"
            >
              <img :src="item.logo" />
              <span>{{ item.name }}</span>
            </div>
          </div>
          <div class="mt-3" />
          <div class="map-container main-round-box flat">
            <el-amap
              style="width: 100%;"
              :center="center"
              :zoom="zoom"
              @init="handleInit"
            />
          </div>
          <div style="height: 40px;flex-shrink: 0;" />
        </template>
      </ScrollRect>
    </template>
  </Page>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { ref, watch } from 'vue';
import { ElAmap } from '@vuemap/vue-amap';
import { ScrollRect } from '@imengyu/vue-scroll-rect';
import VillageApi, { VillageMenuListItem } from '@/api/village/VillageApi';
import ImageSwiper from '@/components/small/ImageSwiper.vue';
import Page from '@/components/parts/Page.vue';
import SimpleRichHtml from '@/components/SimpleRichHtml.vue';
import IconMap from '@/assets/images/IconMap.png';
import SimpleLoading from '@/components/small/SimpleLoading.vue';

const tagsData = ref<VillageMenuListItem[]>([]);
const route = useRoute();
const router = useRouter();
const data = ref({
  image: '',
  images: [],
  overview: '',
  longitude: "",
  latitude: '',
  modelId: 0,
  mainBodyColumnId: 0,
  region: 0,
})
const loading = ref(true);
const zoom = ref(14);
const center = ref([121.59996, 31.197646]);
let map: any = null;

function handleInit(mapRef: any) {
  map = mapRef;
}

watch(route, () => {
  loading.value = true;
  setTimeout(() => {
    loadInfo();
  }, 500);
}, { immediate: true })

async function loadInfo() {

  loading.value = true;
  const id = Number(route.query.id);
  data.value = {
    ...data.value,
    ...JSON.parse(localStorage.getItem('VillageTemp') || '{}'),
  };

  if (data.value.longitude && data.value.latitude) {
    center.value = [Number(data.value.longitude), Number(data.value.latitude)];
  } else {
    center.value = [118.850895, 28.982787];
  }  

  setTimeout(() => {
    map?.add(new AMap.Marker({
      position: center.value as [number, number],
      icon: IconMap,
      anchor: 'bottom-center'
    }));
  }, 1000);

  const menu = await VillageApi.getVillageMenuList(id);

  loading.value = false;
  tagsData.value = menu;
}

</script>
    
<style lang="scss">

.village-details {
  position: absolute;
  top: 100px;
  left:  15%;
  right: 15%;
  bottom: 5%;
  width: unset;
  height: unset;
  font-size: 0.8rem;
  color: var(--color-text);

  .swiper-slide {
    width: 100%;
    height: 400px;
    object-fit: cover;
  }
  .tag-item {
    width: 13%;
    margin-bottom: 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    color: var(--color-text);

    img {
      width: 60px;
      height: 60px;
    }
  }
  .content-box {
    width: 100%;
    padding: 20px;
    background-color: var(--color-light-bg);
    border: 1px solid var(--color-border);
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);

    border-radius: 8px;
  }
  .map-container {
    position: relative;
    width: 100%;
    height: 20vh;
    margin: 40px 0;
    overflow: hidden;
    border-radius: 8px;
    flex-shrink: 0;

    .el-vue-amap-container {
      width: 100%;
    }
  }
}

</style>