<script setup lang="ts">
withDefaults(
  defineProps<{
    hasSaveButton?: boolean
    hasNextButton?: boolean
    maxScore: number
  }>(),
  { hasSaveButton: true, hasNextButton: true }
)

const emits = defineEmits<{
  (e: 'save'): void
  (e: 'next'): void
}>()
</script>

<template>
  <div class="module-card">
    <div class="module-card-title">
      本模块分值：<span>{{ maxScore }}分</span>
    </div>
    <div class="module-card-form">
      <el-button type="primary" auto-insert-space @click="emits('save')" v-if="hasSaveButton">保存</el-button>
      <el-button type="primary" plain auto-insert-space @click="emits('next')" v-if="hasNextButton">下一步</el-button>
    </div>
    <div class="module-card-content">
      <slot></slot>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.module-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-radius: 10px;
  border: 1px solid #dcdfe6;
  margin: 20px 0 40px;
}

.module-card-title {
  position: absolute;
  left: 20px;
  top: 0;
  background-color: #fff;
  font-size: 16px;
  font-weight: bold;
  transform: translateY(-50%);
  padding: 0 10px;
  span {
    font-size: 18px;
    color: var(--main-color);
  }
}
.module-card-form {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 30px 30px 0;
}
.module-card-content {
  border-top: 1px solid #dcdfe6;
  padding: 30px;
}
</style>
