<template>
  <div class="app-container">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="物料名称" prop="materialId">
            <el-input v-model="form.materialId" placeholder="请输入物料名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="物料BOM" prop="materialBomId">
            <el-input v-model="form.materialBomId" placeholder="请输入物料BOM" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="工艺路线" prop="dispatchId">
            <el-select v-model="form.dispatchId" placeholder="请选择工艺路线">
              <el-option v-for="item in dispatchOptions" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="计划交货日期" prop="planDeliveryDate">
            <el-date-picker v-model="form.planDeliveryDate" type="date" placeholder="请选择计划交货日期" style="width: 100%;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="计划开始日期" prop="planBeginTime">
            <el-date-picker v-model="form.planBeginTime" type="date" placeholder="请选择计划开始日期" style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="计划结束日期" prop="planEndTime">
            <el-date-picker v-model="form.planEndTime" type="date" placeholder="请选择计划结束日期" style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="计划数量" prop="planAmount">
            <el-input-number v-model="form.planAmount" :min="0" style="width: 100%;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

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

const formRef = ref()




const dispatchOptions = [
  { id: 'route1', name: '工艺路线A' },
  { id: 'route2', name: '工艺路线B' },
  { id: 'route3', name: '工艺路线C' },
]

const rules = {
  materialId: [{ required: true, message: '请输入物料名称', trigger: 'blur' }],
  materialBomId: [{ required: true, message: '请输入物料BOM', trigger: 'blur' }],
  dispatchId: [{ required: true, message: '请选择工艺路线', trigger: 'change' }],
  planDeliveryDate: [{ required: true, message: '请选择计划交货日期', trigger: 'change' }],
  planBeginTime: [{ required: true, message: '请选择计划开始日期', trigger: 'change' }],
  planEndTime: [{ required: true, message: '请选择计划结束日期', trigger: 'change' }],
  planAmount: [{ required: true, message: '请输入计划数量', trigger: 'blur' }],
}

function submitForm() {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      ElMessage.success('提交成功！')
      // 这里可以处理表单数据提交逻辑
    }
  })
}
function resetForm() {
  formRef.value.resetFields()
}








interface FormData {
  materialId?: string | number
  materialBomId?: string | number
  dispatchId?: string | number
  planDeliveryDate?: string
  planBeginTime?: string
  planEndTime?: string
  planAmount?: number
  // ...其他字段
}

const props = defineProps<FormData>()

const form = reactive<FormData>({
  materialId: '',
  materialBomId: '',
  dispatchId: '',
  planDeliveryDate: '',
  planBeginTime: '',
  planEndTime: '',
  planAmount: 0,
  // ...其他字段
})

// 初始化赋值
Object.keys(form).forEach(key => {
  if (props[key] !== undefined) {
    form[key] = props[key]
  }
})

// 响应props变化
watch(
  () => ({ ...props }),
  (newProps) => {
    Object.keys(form).forEach(key => {
      console.log("----");
      if (newProps[key] !== undefined) {
        form[key] = newProps[key]
        console.log(newProps[key]);
      }
    })
  },
  { immediate: true, deep: true }
)


</script>

<style scoped>
.app-container {
  padding: 24px;
  background: #fff;
  border-radius: 8px;
  max-width: 900px;
  margin: 32px auto;
  box-shadow: 0 2px 8px #f0f1f2;
}
</style>
