<template>
  <div class="ecommerce-common-warp">
    <div class="ecommerce-common-content">
      <div class="left-menu">
        <slot v-if="$slots.left" name="left"></slot>
        <template v-else>
          <leftMenu :current-name="currentName"></leftMenu>
        </template>
      </div>
      <div class="common-content">
        <slot v-if="$slots.main" name="main"></slot>
        <template v-else></template>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import leftMenu from './leftMenu.vue';

const props = defineProps({
  currentName: { type: String, default: 'agricultural' },
});
</script>
<style lang="scss" scoped>
.ecommerce-common-warp {
  width: 100%;
  height: calc(100vh - 230px);
  text-align: center;
  .ecommerce-common-content {
    display: inline-flex;
    justify-content: space-between;
    margin: auto;
    width: $width-main;
    height: 100%;
    .left-menu,
    .common-content {
      overflow-y: auto;
      padding: 8px;
      height: calc(100% - 16px);
      border-radius: 8px;
    }
    .left-menu {
      width: 240px;
      background: $color-fff;
    }
    .common-content {
      margin-left: 16px;
      width: calc(100% - 240px);
    }
  }
}
</style>
