<template>
  <el-dialog
    v-model="dialogVisible"
    title="设置评分标准"
    width="600px"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <el-form ref="formRef" :model="formData" label-width="100px">
      <el-form-item label="评分说明">
        <el-input
          v-model="formData.scoring_reference"
          type="textarea"
          :rows="4"
          placeholder="请输入评分标准说明，例如：【团队协作能力】1.优秀：xxxxxx。2.xxxx。3.一般：xxxxx。"
        />
      </el-form-item>
     <!--  <el-form-item label="选项设置">
        <div v-for="(option, index) in formData.options" :key="index" class="option-item">
          <el-input
            v-model="option.option_text"
            placeholder="选项内容"
            style="width: 200px; margin-right: 10px;"
          />
          <el-input-number
            v-model="option.score"
            :min="0"
            :max="10"
            placeholder="分值"
            style="width: 120px;"
          />
        </div>
      </el-form-item> -->
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, defineExpose } from 'vue';
import { ElMessage } from 'element-plus';

const dialogVisible = ref(false);
const formRef = ref();
const formData = ref({
  scoring_reference: '',
  options: [
    { option_text: '无', score: 0 },
    { option_text: '轻度', score: 1 },
    { option_text: '中度', score: 2 },
    { option_text: '偏重', score: 3 },
    { option_text: '严重', score: 4 }
  ]
});

const emit = defineEmits(['update']);

const open = (data?: any) => {
  dialogVisible.value = true;
  if (data) {
    formData.value = JSON.parse(JSON.stringify(data));
  }
};

const handleClose = () => {
  dialogVisible.value = false;
  formData.value = {
    scoring_reference: '',
    options: [
      { option_text: '无', score: 0 },
      { option_text: '轻度', score: 1 },
      { option_text: '中度', score: 2 },
      { option_text: '偏重', score: 3 },
      { option_text: '严重', score: 4 }
    ]
  };
};

const handleSubmit = async () => {
  try {
    // 验证所有选项都已填写
    const isValid = formData.value.options.every(option => 
      option.option_text.trim() !== '' && option.score !== undefined
    );

    if (!isValid) {
      ElMessage.warning('请填写完整的选项内容和分值');
      return;
    }

    // 触发更新事件
    emit('update', formData.value);
    
    // 关闭对话框
    handleClose();
    
    ElMessage.success('保存成功');
  } catch (error) {
    console.error('保存失败:', error);
    ElMessage.error('保存失败，请重试');
  }
};

defineExpose({
  open
});
</script>

<style lang="scss" scoped>
.option-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;

  &:last-child {
    margin-bottom: 0;
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style>
