<template>
  <div class="take-plate-step">
    <el-form label-width="120px">
      <el-form-item label="取板目的">
        <el-input v-model="formData.purpose" placeholder="请输入取板目的"></el-input>
      </el-form-item>
      
      <el-form-item label="微孔板类型">
        <el-select v-model="formData.plateType" placeholder="请选择微孔板类型">
          <el-option label="96孔板" value="96well"></el-option>
          <el-option label="48孔板" value="48well"></el-option>
          <el-option label="24孔板" value="24well"></el-option>
          <el-option label="12孔板" value="12well"></el-option>
          <el-option label="6孔板" value="6well"></el-option>
          <el-option label="384孔板" value="384well"></el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item label="取板位置">
        <el-select v-model="formData.location" placeholder="请选择取板位置">
          <el-option label="培养箱" value="incubator"></el-option>
          <el-option label="冷藏" value="refrigerator"></el-option>
          <el-option label="室温" value="roomTemp"></el-option>
          <el-option label="水浴" value="waterBath"></el-option>
          <el-option label="摇床" value="shaker"></el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item label="取板时间">
        <el-date-picker
          v-model="formData.takeTime"
          type="datetime"
          placeholder="请选择取板时间"
          format="yyyy-MM-dd HH:mm"
          value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
      </el-form-item>
      
      <el-form-item label="板子状态">
        <el-select v-model="formData.plateState" placeholder="请选择板子状态">
          <el-option label="正常" value="normal"></el-option>
          <el-option label="有污染" value="contaminated"></el-option>
          <el-option label="干燥" value="dry"></el-option>
          <el-option label="湿润" value="wet"></el-option>
          <el-option label="有沉淀" value="precipitate"></el-option>
          <el-option label="有结晶" value="crystal"></el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item label="处理要求">
        <el-checkbox-group v-model="formData.processRequirements">
          <el-checkbox label="立即处理">立即处理</el-checkbox>
          <el-checkbox label="室温放置">室温放置</el-checkbox>
          <el-checkbox label="冷藏保存">冷藏保存</el-checkbox>
          <el-checkbox label="冷冻保存">冷冻保存</el-checkbox>
          <el-checkbox label="避光保存">避光保存</el-checkbox>
          <el-checkbox label="需要检测">需要检测</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      
      <el-form-item label="取板数量">
        <el-input-number 
          v-model="formData.quantity" 
          :min="1" 
          :max="10" 
          :step="1"
        ></el-input-number>
      </el-form-item>
      
      <el-form-item label="操作者">
        <el-input v-model="formData.operator" placeholder="请输入操作者姓名"></el-input>
      </el-form-item>
      
      <el-form-item label="后续处理">
        <el-radio-group v-model="formData.nextAction">
          <el-radio label="immediate">立即处理</el-radio>
          <el-radio label="delayed">延迟处理</el-radio>
          <el-radio label="storage">储存待处理</el-radio>
          <el-radio label="discard">丢弃</el-radio>
        </el-radio-group>
      </el-form-item>
      
      <el-form-item label="质量检查">
        <el-checkbox-group v-model="formData.qualityChecks">
          <el-checkbox label="外观检查">外观检查</el-checkbox>
          <el-checkbox label="标识检查">标识检查</el-checkbox>
          <el-checkbox label="完整性检查">完整性检查</el-checkbox>
          <el-checkbox label="污染检查">污染检查</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      
      <el-form-item label="特殊要求">
        <el-input 
          v-model="formData.specialRequirements" 
          type="textarea" 
          :rows="3" 
          placeholder="请输入特殊要求或注意事项"
        ></el-input>
      </el-form-item>
      
      <el-form-item label="备注">
        <el-input 
          v-model="formData.notes" 
          type="textarea" 
          :rows="3" 
          placeholder="请输入备注信息"
        ></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'TakePlateStep',
  props: ['stepData'],
  data() {
    return {
      formData: {
        purpose: '',
        plateType: '',
        location: '',
        takeTime: '',
        plateState: '',
        processRequirements: [],
        quantity: 1,
        operator: '',
        nextAction: 'immediate',
        qualityChecks: [],
        specialRequirements: '',
        notes: ''
      }
    }
  },
  created() {
    this.formData = { ...this.formData, ...this.stepData }
  },
  watch: {
    formData: {
      handler(newVal) {
        this.$emit('update', newVal)
      },
      deep: true
    }
  }
}
</script>