<script setup lang="ts">
defineProps<{ title: string; maxScore: number }>()

const score = defineModel<number | undefined>('score', { required: true })
const comment = defineModel<string>('comment', { required: true })
</script>

<template>
  <div class="score-card">
    <div class="score-card-title">
      {{ title }}
    </div>
    <div class="score-card-form">
      <el-form label-suffix=":" label-width="46px">
        <el-form-item label="得分">
          <el-input-number v-model="score" :min="0" :max="maxScore" :controls="false" />
        </el-form-item>
        <el-form-item label="评语">
          <el-input v-model="comment" type="textarea" :rows="6" />
        </el-form-item>
      </el-form>
    </div>
    <div class="score-card-content">
      <slot></slot>
    </div>
  </div>
</template>

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

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