<template>
  <div class="shop" :style="{height: showList ? '100%' : ''}">
    <shop-list :menuId="menuId" v-show="showList" :isMarket="isMarket"></shop-list>
    <div class="shop-hot-box" v-transfer-dom="'#menu-list-box'" v-if="showHot">
      <shop-hot :menuId="menuId" :isMarket="isMarket"></shop-hot>
    </div>
  </div>
</template>

<script>
import shopList from './shop/index';
import shopHot from './shop/hot';
export default {
  name: 'menu-shop-box',
  components: {
    shopList,
    shopHot
  },
  props: {
    menuId: {},
    isMarket: {
      type: Boolean,
      default: false
    },
    showList: {
      type: Boolean,
      default: false
    },
    showHot: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      info: {}
    };
  },
  destroyed() {
    
  }
};
</script>

<style lang="less" scoped>
.shop {
  position: relative;
}
.shop-hot-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
</style>
