<script setup lang="ts">
import CommonContent, { GetContentListItem, GetContentListParams } from '@/api/CommonContent';
import Header from '@/components/parts/Header.vue';
import SimplePopup from '@/components/SimplePopup.vue';
import { useSimpleDataLoader } from '@/composeable/SimpleDataLoader';
import { ScrollRect } from '@imengyu/vue-scroll-rect';
import { nextTick, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import ArtifactDetail from '../Details/ArtifactDetail.vue';

const route = useRoute();
const router = useRouter();
const zoom = ref(12);
const center = ref([118.137018, 24.500120]);
const showDetail = ref(false);
const currentItem = ref<GetContentListItem>();

let map: any = null;

function handleInit(mapRef: any) {
  map = mapRef;
}
function handleFocus(value: any) {
  map.setCenter([value.longitude, value.latitude]);
  map.setZoom(15);
}
function handleClick(value: any) {
  router.replace({
    query: {
      ...route.query,
      id: value.id,
    }
  });
  setTimeout(() => {
    showDetail.value = true;
    currentItem.value = value;
  }, 800)
}

const loader = useSimpleDataLoader(async () => {
  return CommonContent.getContentList(new GetContentListParams().setModelId(1), 1, 50)
});

</script>

<template>
  <main class="main-content main-bg">
    <Header show-back absolute />
    <el-amap
      :center="center"
      :zoom="zoom"
      @init="handleInit"
    >
      <el-amap-marker
        v-for="value in loader.content.value?.list"
        :position="[value.longitude, value.latitude]"
        :content="value.title"
      >
        <div class="main-map-maker">
          <img :src="value.image">
          <span>{{ value.title }}</span>
        </div>
      </el-amap-marker>
    </el-amap>
    <ScrollRect class="side-list main-round-box" scroll="vertical">
      <div class="d-flex flex-col">
        <div 
          v-for="value in loader.content.value?.list"
          :key="value.id"
          class="item main-card main-any-button"
          :tabindex="2"
          @focus="handleFocus(value)"
          @click="handleClick(value)"
        >
          <img :src="value.image" :alt="value.title">
          <span>{{ value.title }}</span>
        </div>
      </div>
    </ScrollRect>
    <SimplePopup 
      :show="showDetail"
      @update:show="(v) => showDetail = v"
    >
      <div v-if="currentItem" class="dialog bg-light">
        <ArtifactDetail class="h-100" custom-back @back="showDetail = false" />
      </div>
    </SimplePopup>
  </main>
</template>

<style lang="scss" scoped>
.side-list {
  position: absolute;
  top: 100px;
  left: 2%;
  bottom: 2%;
  width: 25%;
  height: unset;
  background-color: var(--color-light-bg);
  padding: 0;

  .item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.2rem 2rem;

    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 1rem;
    }
    span {
      font-size: 0.7rem;
      color: var(--color-text);
    }

  }
}
.dialog {
  width: 70vw;
  height: 85vh;
}

</style>