<template>
  <div class="museum-list">
    <div class="mcon">
      <p v-if="list.length > 0">
        {{ list[0].cityName }}
        {{ currentId === "museum" ? "博物馆" : "虚拟场景" }}数量：{{
          list.length
        }}
      </p>
      <ul>
        <li
          @click="onClickItem(item)"
          v-for="(item, i) in list"
          :key="i"
          :title="item.name"
        >
          <span v-show="item.museumName">{{ item.museumName }}-</span>
          {{ item.name }}
        </li>
      </ul>
    </div>

    <ul class="select">
      <li
        @click="onClickSelect({ id: 'museum' })"
        :class="{ active: currentId == 'museum' }"
      >
        <span></span>
        <span>博物馆</span>
      </li>
      <li
        @click="onClickSelect({ id: 'scene' })"
        :class="{ active: currentId == 'scene' }"
      >
        <span></span>
        <span>虚拟场景</span>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, nextTick } from "vue";
import { getMuseumList, getExhibitionList } from "@/config/api";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();

const currentId = ref("");

const list = ref([]);

const onClickSelect = (data) => {
  currentId.value = data.id;
};

const onClickItem = (data) => {
  if (currentId.value === "museum") {
    if (data.name === "广东省博物馆") {
      router.push({ name: "gdmuseum" });
    } else {
      router.push({ name: "exhibition", query: { id: data.id } });
    }
  } else {
    router.push({ name: "zhanlan", params: { id: data.id } });
  }
};

const getList = () => {
  let getData = currentId.value == "museum" ? getMuseumList : getExhibitionList;
  getData(
    {
      cityId: route.params.id,
      pageNum: 1,
      pageSize: 1000,
      searchKey: "",
    },
    (data) => {
      list.value = data.data.records;
    }
  );
};

watch(currentId, () => {
  getList();
});

onMounted(() => {
  if (route.query.type) {
    currentId.value = route.query.type;
    router.replace({ name: route.name, query: {} });
  } else {
    currentId.value = "museum";
  }
  getList();
});
</script>

<style lang="scss" scoped>
.museum-list {
  background: #e8e3d1;
  color: #333333;

  .mcon {
    width: 1400px;
    margin: 0 auto;
    padding-top: 50px;

    > p {
      font-size: 24px;
    }

    > ul {
      display: flex;
      flex-wrap: wrap;

      > li {
        min-width: 270px;
        height: 50px;
        margin: 40px 104px 0 0;
        line-height: 50px;
        border-radius: 50px;
        border: 1px solid #333333;
        text-align: center;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0 1em;

        &:nth-of-type(4n) {
          margin-right: 0;
        }

        &:hover,
        &.active {
          color: var(--main-color);
          border-color: var(--main-color);
        }
      }
    }
  }

  .select {
    width: 400px;
    display: flex;
    padding: 10px 0;
    justify-content: center;
    background: var(--main-color);
    border-radius: 50px;
    position: absolute;
    bottom: 55px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;

    > li {
      display: flex;
      align-items: center;
      margin: 0 40px;
      cursor: pointer;

      > span {
        margin-right: 6px;
        display: inline-block;

        &:first-of-type {
          width: 20px;
          height: 20px;
          position: relative;
          border-radius: 50%;
          background: #fff;
        }
      }

      &.active {
        > span {
          &:first-of-type {
            &::before {
              content: "";
              position: absolute;
              width: 10px;
              height: 10px;
              background: var(--font-active);
              border-radius: 50%;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1000px) {
  .museum-list {
    color: #333333;
    width: 100%;

    .mcon {
      width: 90%;
      padding-top: 20px;
        height: calc(100% - 120px);

      > p {
        font-size: 18px;
      }

      > ul {
        padding-right: 5px;
        height: 100%;
        overflow-y: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: flex-start;

        > li {
          width: 100%;
          font-size: 14px;
          height: 40px;
          margin: 10px 0;
          line-height: 40px;
          border: 1px solid #999;
          color: #999;
        }
      }
    }

    .select {
      width: 90%;
      display: flex;
      padding: 10px 0;
      justify-content: space-evenly;
      position: absolute;
      bottom: 22px;
      > li {
        margin: 0;
      }
    }
  }
}
</style>