<template>
  <div class="step7-environment">
    <div class="section-header">
      <span class="title">环创建设</span>
      <a-tag v-if="formData.environmentConstruction" color="success">已填写</a-tag>
      <a-tag v-else color="default">未填写</a-tag>
    </div>

    <div class="section-tips">
      <a-alert
        message="填写提示"
        description="环创建设内容可包括：主题环境布置、区域活动环境、阅读角创设、材料投放建议等，帮助教师更好地创设支持幼儿学习的环境。"
        type="info"
        show-icon
      />
    </div>

    <div class="editor-container">
      <a-textarea
        v-model:value="formData.environmentConstruction"
        :rows="12"
        placeholder="请输入环创建设内容，例如：
- 主题墙布置建议
- 阅读区环境创设
- 材料展示区设置
- 互动区域规划
- 相关装饰物品建议等"
        show-count
        :maxlength="3000"
        @change="handleChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, watch } from 'vue';

interface EnvironmentData {
  environmentConstruction: string;
}

interface Props {
  modelValue: string;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void;
  (e: 'change'): void;
}>();

const formData = reactive<EnvironmentData>({
  environmentConstruction: '',
});

// 监听外部值变化
watch(
  () => props.modelValue,
  (newVal) => {
    formData.environmentConstruction = newVal || '';
  },
  { immediate: true }
);

// 处理变化
const handleChange = () => {
  emit('update:modelValue', formData.environmentConstruction);
  emit('change');
};

// 验证
const validate = () => {
  // 环创建设为可选，不强制验证
  return { valid: true, errors: [] };
};

// 获取保存数据
const getSaveData = () => {
  return formData.environmentConstruction;
};

defineExpose({
  validate,
  getSaveData,
  formData,
});
</script>

<style scoped lang="scss">
.step7-environment {
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;

    .title {
      font-size: 16px;
      font-weight: 500;
    }
  }

  .section-tips {
    margin-bottom: 16px;
  }

  .editor-container {
    // 输入框样式
  }
}
</style>
