<script name="safetyInput" setup>
import { ref } from 'vue'
const formData = ref({}),
  formRef = ref(),
  rules = {
    engineeringSpeedOne: [
      { required: true, message: '请填写第一季度进度', trigger: 'blur' }
    ],
    engineeringSpeedTwo: [
      { required: true, message: '请填写第二季度进度', trigger: 'blur' }
    ],
    engineeringSpeedThree: [
      { required: true, message: '请填写第三季度进度', trigger: 'blur' }
    ],
    engineeringSpeedFour: [
      { required: true, message: '请填写第四季度进度', trigger: 'blur' }
    ]
  },
  // 校验
  validForm = (callback) => {
    formRef.value.validate(valid => {
      callback(valid)
    })
  },
  // 回显
  setFormData = (data) => {
    formData.value = {
      engineeringSpeedOne: data.engineeringSpeedOne,
      engineeringSpeedTwo: data.engineeringSpeedTwo,
      engineeringSpeedThree: data.engineeringSpeedThree,
      engineeringSpeedFour: data.engineeringSpeedFour
    }
  }
defineExpose({ validForm, formData, setFormData })
</script>

<template>
  <el-form
    ref="formRef"
    :model="formData"
    :rules="rules"
    label-position="right"
    label-width="180px"
    label-suffix=":"
    scroll-to-error
  >
    <el-row :gutter="40">
      <el-col :span="12">
        <el-form-item label="第一季度" prop="engineeringSpeedOne">
          <el-input
            v-model="formData.engineeringSpeedOne"
            maxlength="50"
            placeholder="请填写"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="第二季度" prop="engineeringSpeedTwo">
          <el-input
            v-model="formData.engineeringSpeedTwo"
            maxlength="50"
            placeholder="请填写"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="第三季度" prop="engineeringSpeedThree">
          <el-input
            v-model="formData.engineeringSpeedThree"
            maxlength="50"
            placeholder="请填写"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="第四季度" prop="engineeringSpeedFour">
          <el-input
            v-model="formData.engineeringSpeedFour"
            maxlength="50"
            placeholder="请填写"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<style lang="less">
.el-upload-list{
  width: 100%;
}
</style>
