<template>
  <div
    class="wrapper"
    :class="{
      mobile: isMobile,
    }"
  >
    <showCollection v-if="isMobile === false" @hideSlide="data=>{showSidebar = data}" class="ui-broadcast" :item="cItem"></showCollection>
    <showCollectionMobile v-if="isMobile === true" @hideSlide="data=>{showSidebar = data}" class="ui-broadcast" :item="cItem"></showCollectionMobile>
  </div>
</template>
<script>
import showCollection from './showCollection'
import showCollectionMobile from './showCollectionMobile'
import { getDetailById } from "@/config/api";
import browser from '@/utils/browser'

export default {
  props: ["item"],
  components: {
    showCollection,
    showCollectionMobile,
  },
  data() {
    return {
      cItem: { ...this.item },
      showSidebar: false,
      isMobile: undefined,
    };
  },
  methods: {
    handleItem(data) {
      this.cItem = data;
    },
    getCollectionDetail() {
      getDetailById("goods", { id: this.item.id }, (res) => {
        console.log(res.data);
        this.cItem = res.data;
      });
    },
  },
  mounted() {
    this.getCollectionDetail()
    if (browser.isMobile()) {
      this.isMobile = true
    } else {
      this.isMobile = false
    }
  }
};
</script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  height: calc(100% - 80px);
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 99999;
  .ui-broadcast {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 99999;
    top: 0;
    left: 0;
    background: linear-gradient(#595959, #8A8A8A);
  }
}

.mobile.wrapper {
  height: calc(100% - 60px);
}
</style>