<script setup lang="ts">
const props = defineProps<{
  modelValue: number;
  disabled?: boolean;
}>();

defineEmits<{
  "update:modelValue": [value: number];
}>();

function depthLabel(value: number) {
  if (value <= 33) return "精简";
  if (value <= 66) return "平衡";
  return "深入";
}

function depthCopy(value: number) {
  if (value <= 33) return "少分析、短建议，优先回到当下和身体感受。";
  if (value <= 66) return "保留必要解释，给出清楚但不过度展开的建议。";
  return "允许更完整拆解，但仍保持回归自身、觉察和释放的方向。";
}
</script>

<template>
  <el-form-item class="agent-response-depth">
    <div class="agent-response-depth-head">
      <div class="agent-stream-setting-copy">
        <strong>回答深度</strong>
        <span>{{ depthCopy(props.modelValue) }}</span>
      </div>
      <el-tag effect="plain">{{ depthLabel(props.modelValue) }} {{ props.modelValue }}</el-tag>
    </div>
    <el-slider
      :model-value="props.modelValue"
      :disabled="disabled"
      :min="0"
      :max="100"
      :step="5"
      :marks="{ 0: '精简', 50: '平衡', 100: '深入' }"
      @update:model-value="$emit('update:modelValue', Number($event))"
    />
  </el-form-item>
</template>
