<!-- TaskForm.vue 优化后 -->
<template>
  <div class="task-form">
    <h3>任务基本信息</h3>
    
    <div class="form-group">
      <label for="taskName">任务名称 <span class="required">*</span></label>
      <input 
        type="text" 
        id="taskName" 
        v-model="form.taskName"
        placeholder="请输入任务名称（1-50字）"
        :class="{ 'invalid': !isTaskNameValid && isTouched.taskName }"
        @blur="isTouched.taskName = true"
        max-length="50"
      >
      <p v-if="!isTaskNameValid && isTouched.taskName" class="error-message">
        任务名称不能为空且长度不超过50字
      </p>
    </div>
    
    <div class="form-group">
      <label for="taskType">任务类型</label>
      <select id="taskType" v-model="form.taskType">
        <option value="requirement">需求梳理</option>
        <option value="development">开发实现</option>
        <option value="testing">测试验证</option>
        <option value="deployment">部署上线</option>
        <option value="other">其他</option>
      </select>
    </div>
    
    <div class="form-group">
      <label for="taskDescription">任务描述</label>
      <textarea 
        id="taskDescription" 
        v-model="form.taskDescription"
        rows="4"
        placeholder="请详细描述任务内容、预期成果和注意事项"
        max-length="500"
      ></textarea>
      <p class="char-count">{{ form.taskDescription.length }}/500</p>
    </div>
    
    <div class="form-group">
      <label for="dueDate">截止日期 <span class="required">*</span></label>
      <input 
        type="date" 
        id="dueDate" 
        v-model="form.dueDate"
        :min="minDate"
        :class="{ 'invalid': !isDueDateValid && isTouched.dueDate }"
        @blur="isTouched.dueDate = true"
      >
      <p v-if="!isDueDateValid && isTouched.dueDate" class="error-message">
        截止日期不能为空且不能为过去日期
      </p>
    </div>
    
    <div class="form-group">
      <label for="priority">优先级</label>
      <select id="priority" v-model="form.priority">
        <option value="low">低</option>
        <option value="medium" selected>中</option>
        <option value="high">高</option>
        <option value="urgent">紧急</option>
      </select>
    </div>
  </div>
</template>

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

// 定义表单数据结构
const form = ref({
  taskName: '',
  taskType: 'development', // 默认开发类型
  taskDescription: '',
  dueDate: '',
  priority: 'medium'
});

// 触摸状态（用于控制错误提示显示时机）
const isTouched = ref({
  taskName: false,
  dueDate: false
});

// 最小日期（今天）
const minDate = computed(() => {
  const today = new Date();
  return today.toISOString().split('T')[0];
});

// 验证逻辑
const isTaskNameValid = computed(() => {
  return form.value.taskName.trim().length > 0 && form.value.taskName.length <= 50;
});

const isDueDateValid = computed(() => {
  return !!form.value.dueDate && form.value.dueDate >= minDate.value;
});

// 对外暴露完整验证方法
const validate = () => {
  // 触发所有验证
  Object.keys(isTouched.value).forEach(key => {
    isTouched.value[key as keyof typeof isTouched.value] = true;
  });
  return isTaskNameValid.value && isDueDateValid.value;
};

// 暴露表单数据和验证方法给父组件
defineExpose({
  form,
  validate
});
</script>

<style scoped>
.task-form {
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  margin-bottom: 16px;
}

.form-group {
  margin-bottom: 16px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

input, textarea, select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  box-sizing: border-box;
}

textarea {
  resize: vertical;
}
/* 原有样式保持不变，新增以下样式 */
.error-message {
  color: #ef4444;
  font-size: 12px;
  margin-top: 4px;
  margin-bottom: 0;
}

.char-count {
  color: #666;
  font-size: 12px;
  text-align: right;
  margin-top: 4px;
  margin-bottom: 0;
}

input.invalid, textarea.invalid, select.invalid {
  border-color: #ef4444;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #165DFF;
  box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.1);
}
</style>