<template>
  <div class="gdmuseum">
    <div class="info" v-if="currentMuseum">
      <div :title="currentMuseum.name">{{currentMuseum.name}}</div>
      <p>
        {{currentMuseum.description || '暂无简介'}}
      </p>
    </div>

    <vtab @handleTab="handleTab" :list="menu" class="tabcon" />

    <component @updateMuseum="updateMuseum" :currentMuseumItem="currentMuseum" :key="panelPage" class="limitwidth" :is="panelPage"></component>
  </div>
</template>

<script setup>
import { ref,reactive, onMounted, watch, computed, nextTick } from "vue";
import vtab from "@/components/tab/";

import collections from "./exhibition/collections";
import guide from "./exhibition/guide";
import permanent from "./exhibition/permanent";
import { useRoute } from "vue-router";

import { getMuseumDetail } from "@/config/api";


const route = useRoute();

const panelPage = ref(permanent)

const currentMuseum = ref(null)


if (route.query.id) {
  console.log(route.query.id,'route.query.id');
  getMuseumDetail({
    id: route.query.id,
  }, data => {
    currentMuseum.value = data.data
  })
}



const menu = ref([
  {
    name: "热门展览",
    id: "permanent",
    component:permanent
  },
  {
    name: "藏品展示",
    id: "collections",
    component:collections
  },
  {
    name: "展馆导览",
    id: "guide",
    component:guide
  },
]);

let handleTab = (data) => {
  panelPage.value = data.component
};

let updateMuseum = (data)=>{
  currentMuseum.value = data
}
</script>

<style lang="scss" scoped>
.gdmuseum {
  background: #e8e3d1;
  overflow-y: auto;
  overflow-x: hidden;
  .info {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 60px;
    width: 100%;
    > div {
      height: 45px;
      width: 20%;
      font-size: 30px;
      font-weight: bold;
      color: var(--main-color);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    > p {
      width: 50%;
      line-height: 2;
      font-size: 16px;
      font-weight: 400;
      color: #333333;
    }
  }
  .tabcon {
    margin-top: 60px;
  }
}
</style>
