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

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

    <component :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 { getMuseumDetail } from "@/config/api";

import collections from "./exhibition/collections";
import guide from "./exhibition/guide";
import permanent from "./exhibition/permanent";
import review from "./exhibition/review";
import temporary from "./exhibition/temporary";

const panelPage = ref(permanent)

const currentMuseum = ref(null)


const menu = ref([
  {
    name: "常设展览",
    id: "permanent",
    component: permanent
  },
  {
    name: "临时展览",
    id: "temporary",
    component: temporary
  },
  {
    name: "展览回顾",
    id: "review",
    component: review
  },
  {
    name: "藏品展示",
    id: "collections",
    component: collections
  },
  {
    name: "展馆导览",
    id: "guide",
    component: guide
  },
]);

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

onMounted(() => {
  getMuseumDetail({
    id: 1,
  }, data => {
    currentMuseum.value = data.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);
    }

    >p {
      width: 50%;
      line-height: 2;
      font-size: 16px;
      font-weight: 400;
      color: #333333;
    }
  }

  .tabcon {
    margin-top: 60px;
  }
}
</style>
