<template>
  <div class="main-content">
    <el-scrollbar height="680px">
      <component :is="currentComponent" ref="content"></component>
    </el-scrollbar>
  </div>
</template>
<script setup>
const props = defineProps({
  currentComponent: {
    type: Object,
    required: true,
  },
});
const content = ref(null);
const consumerLeft = () => {
  content.value.consumer();
};
const resLeft = () => {
  content.value.practicalTraining();
};
const submitDataLeft = () => {
  content.value.submitData();
};
defineExpose({
  consumerLeft,
  resLeft,
  submitDataLeft,
});
</script>
<style lang="scss" scoped>
.main-content {
  width: calc(100% - 60px);
}
</style>
