<template>
  <div class="collectioncon">
    <div class="collections">
      <div class="slebar">
        <div class="sleft">
          <ui-select :options="museumList" :placeholder="'请选择'" v-model="currentMuseum">
            <template v-slot:option="{ raw }">
              <div>{{ raw.label }}</div>
            </template>
          </ui-select>

          <ui-select :options="ages" :placeholder="'年代'" v-model="currentAge">
            <template v-slot:option="{ raw }">
              <div>{{ raw.label }}</div>
            </template>
          </ui-select>

          <ui-select :options="types" :placeholder="'藏品种类'" v-model="currentType">
            <template v-slot:option="{ raw }">
              <div>{{ raw.label }}</div>
            </template>
          </ui-select>

          <ui-search v-model="searchKey" :placeholder="'请输入展览名称'"></ui-search>
        </div>

        <div class="sright">
          <div>分类：</div>
          <ul>
            <li @click="menuActive = item.id" :class="{ active: menuActive == item.id }" v-for="(item, i) in menu"
              :key="i">
              {{ item.name }}
            </li>
          </ul>
        </div>
      </div>

      <div v-if="list" class="masonry" v-infinite-scroll="getData" infinite-scroll-disabled="busy"
        :infinite-scroll-immediate-check="true" infinite-scroll-distance="30" v-masonry="containerId" fit-width="true"
        gutter="40" initLayout="true" transition-duration="0.3s" item-selector=".item">
        <div @click="onClickCollection(item)" v-masonry-tile class="item" :class="{ odd: index % 2 != 0 }"
          v-for="(item, index) in list" :key="index">
          <div class="itemimg">
            <div :style="`background-image:url(${item.thumb})`"></div>
          </div>
          <p>{{ item.name }}</p>
        </div>
      </div>
    </div>
    <transition name="fade">
      <teleport to='body'>
        <showCollection v-if="activeCollection" :item="activeCollection" />
      </teleport>
    </transition>
  </div>
</template>


<script>
import { defineProps, onMounted, watch, nextTick, ref } from "vue";
import { getCollectionList, getMuseumList, getAge, getType } from "@/config/api";
import showCollection from "@/components/showCollection/index.vue";
import emitter from "@/mitt/index";

export default {

  setup(props) {

    const containerId = ref("vuemasonry");
    const currentMuseum = ref("");

    const museumList = ref([]);


    // const props = defineProps({
    //   currentMuseumItem: {
    //     type: Object,
    //     default: () => {
    //       return {}
    //     },
    //   },
    // });


    const searchKey = ref("");
    const currentAge = ref("");
    const currentType = ref("");


    const busy = ref(false)

    const ages = ref([]);

    const types = ref([]);


    const menu = ref([
      {
        id: "",
        name: "全部",
      },
      {
        id: "model",
        name: "三维模型",
      },
      {
        id: "img",
        name: "图片",
      },
      {
        id: "video",
        name: "视频",
      },
      {
        id: "audio",
        name: "音频",
      },
    ]);

    const menuActive = ref("");

    onMounted(() => {
      getAge(data => {
        ages.value = data.data.data.map(item => {
          return {
            ...item,
            label: item.name,
            value: item.id
          }
        })
      })

      getType(data => {
        types.value = data.data.data.map(item => {
          return {
            ...item,
            label: item.name,
            value: item.id
          }
        })
      })

      getMuseumList({
        "cityId": '',
        "pageNum": 1,
        "pageSize": 1000,
      }, data => {
        museumList.value = data.data.records.map(item => {
          return {
            ...item,
            label: item.name,
            value: item.id
          }
        })
        if (!props.currentMuseumItem) {
          currentMuseum.value = museumList.value[0].value
        } else {
          currentMuseum.value = props.currentMuseumItem.id
        }
      })
    })

    return { ages, types, currentMuseum, menu, currentAge, menuActive, currentType, searchKey, busy, museumList }

  },
  components: { showCollection },
  data() {
    return {
      activeCollection: '',
      list: [],
      paging: {
        pageSize: 10,
        pageNum: 1,
        showSize: 4,
        current: 1,
      }
    }
  },

  watch: {
    searchKey() {
      this.getData(true)
    },
    currentAge() {
      this.getData(true)
    },
    currentType() {
      this.getData(true)
    },
    currentMuseum() {
      this.getData(true)
      this.$emit('updateMuseum', this.museumList.find((item => item.id == this.currentMuseum)))
    },
    menuActive() {
      this.getData(true)
    }
  },

  methods: {
    getData(reset) {
      if (reset) {
        this.list = []
        this.busy = false
      }
      getCollectionList({
        "ageId": this.currentAge,
        "museumId": this.currentMuseum,
        "type": this.menuActive,
        "pageNum": this.paging.pageNum,
        "pageSize": this.paging.pageSize,
        "searchKey": this.searchKey,
        "textureId": this.currentType,
      }, data => {
        if (data.data.total <= this.list.length) {
          this.busy = true
          return
        }
        this.list = this.list.concat(data.data.records)
        this.paging.pageNum += 1

        this.$nextTick(() => {
          this.$redrawVueMasonry(this.containerId);
        });
      })

      // console.log(this);
      // this.list = this.list.concat([]);
      // // list.value = list.value.concat(list.value);
      // this.$nextTick(() => {
      //   this.$redrawVueMasonry(this.containerId);
      // });
    },
    onClickCollection(data) {
      this.activeCollection = data
      console.log(this.activeCollection);
    }
  },
  mounted() {
    emitter.on('closeCollection', () => {
      this.activeCollection = ''
    })
  },
};
</script>


<style lang="scss" scoped>
.collectioncon {
  background: #e8e3d1;
  overflow-y: auto;
  overflow-x: hidden;

  .collections {
    width: 1400px;
    margin: 62px auto;

    .slebar {
      display: flex;
      justify-content: space-between;

      .sleft {
        display: flex;
        width: 65%;

        &:deep(.text) {
          margin-right: 20px;
        }
      }

      .sright {
        display: flex;
        align-items: center;
        color: #333;

        >ul {
          display: flex;
          align-items: center;

          >li {
            text-align: center;
            margin: 0 10px;
            cursor: pointer;

            &.active {
              width: 90px;
              height: 34px;
              color: var(--main-color);
              line-height: 34px;
              border-radius: 60px;
              border: 1px solid var(--main-color);
            }
          }
        }
      }
    }

    .masonry {
      margin-top: 36px;

      .item {
        width: 320px;
        height: 270px;
        border-radius: 10px;
        margin-bottom: 40px;
        overflow: hidden;
        cursor: pointer;

        .itemimg {
          background: linear-gradient(180deg, #d9d9d9 0%, #b9b9b9 100%);
          font-size: 0;
          height: calc(100% - 60px);
          width: 100%;

          >div {
            height: 100%;
            width: 100%;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
          }
        }

        p {
          background: #fffef6;
          color: #999;
          height: 60px;
          line-height: 60px;
          padding: 0 10px;

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

      .odd {
        height: 410px;
      }
    }
  }
}
</style>
