<template>
    <div>
        <el-form
            :model="addAndEditForm"
            label-width="auto"
            ref="addAndEditFormRef"
            :rules="addAndEditFormRules"
        >
            <el-row>
                <el-col :span="24">
                    <el-form-item label="工序类型" prop="proType">
                        <el-input
                            clearable
                            show-word-limit
                            :maxlength="50"
                            placeholder="请输入工程类型"
                            v-model.trim="addAndEditForm.proType"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="工序" prop="proGx">
                        <el-input
                            clearable
                            show-word-limit
                            :maxlength="50"
                            placeholder="请输入工序"
                            v-model.trim="addAndEditForm.proGx"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="计划开始时间" prop="planStartTime">
                        <el-date-picker
                            type="date"
                            clearable
                            style="width: 100%"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择计划开始时间"
                            v-model="addAndEditForm.planStartTime"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="计划结束时间" prop="planEndTime">
                        <el-date-picker
                            type="date"
                            clearable
                            style="width: 100%"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择计划结束时间"
                            v-model="addAndEditForm.planEndTime"
                        />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label="投入人员" prop="people">
                        <el-input
                            clearable
                            show-word-limit
                            :maxlength="50"
                            placeholder="请输入投入人员"
                            v-model.trim="addAndEditForm.people"
                        />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label="投入设备" prop="equipment">
                        <el-input
                            clearable
                            show-word-limit
                            :maxlength="50"
                            placeholder="请输入投入设备"
                            v-model.trim="addAndEditForm.equipment"
                        />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label="实际结束时间" prop="endTime">
                        <el-date-picker
                            type="date"
                            clearable
                            style="width: 100%"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择实际结束时间"
                            v-model="addAndEditForm.endTime"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
import {
    addProjectProgressAPI,
    editProjectProgressAPI,
} from '@/api/dataAnalysis/projectProgress'
export default {
    name: 'AddAndEditForm',
    props: {
        detailsId: {
            type: [Number, String],
            default: '',
        },
        editRow: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            addAndEditForm: {
                proType: '',
                proGx: '',
                planStartTime: '',
                planEndTime: '',
                startTime: '',
                endTime: '',
                planAccess: '',
                exeAccess: '',
            },
            addAndEditFormRules: {
                proType: [
                    {
                        required: true,
                        message: '请输入工程类型',
                        trigger: 'blur',
                    },
                ],
                proGx: [
                    {
                        required: true,
                        message: '请输入工序',
                        trigger: 'blur',
                    },
                ],
                planStartTime: [
                    {
                        required: true,
                        message: '请选择计划开始时间',
                        trigger: 'blur',
                    },
                ],
                planEndTime: [
                    {
                        required: true,
                        message: '请选择计划结束时间',
                        trigger: 'blur',
                    },
                ],
                startTime: [
                    {
                        required: true,
                        message: '请选择实际开始时间',
                        trigger: 'blur',
                    },
                ],
                endTime: [
                    {
                        required: true,
                        message: '请选择实际结束时间',
                        trigger: 'blur',
                    },
                ],
                planAccess: [
                    {
                        required: true,
                        message: '请输入计划进度',
                        trigger: 'blur',
                    },
                ],
                exeAccess: [
                    {
                        required: true,
                        message: '请输入实际进度',
                        trigger: 'blur',
                    },
                ],
            },
        }
    },

    methods: {
        submitForm() {
            return new Promise((resolve, reject) => {
                this.$refs.addAndEditFormRef.validate(async (valid) => {
                    if (valid) {
                        const params = this.addAndEditForm
                        if (this.detailsId) {
                            params.id = this.detailsId
                        }
                        const API = this.detailsId
                            ? editProjectProgressAPI
                            : addProjectProgressAPI
                        const res = await API(params)
                        if (res.code === 200) {
                            resolve(true)
                        } else {
                            reject(false)
                        }
                    } else {
                        reject(false)
                    }
                })
            })
        },
    },

    watch: {
        editRow: {
            handler(newVal) {
                if (Object.keys(newVal).length > 0) {
                    const {
                        proType,
                        proGx,
                        planStartTime,
                        planEndTime,
                        startTime,
                        endTime,
                        planAccess,
                        exeAccess,
                    } = newVal
                    this.addAndEditForm.proType = proType
                    this.addAndEditForm.proGx = proGx
                    this.addAndEditForm.planStartTime = planStartTime
                    this.addAndEditForm.planEndTime = planEndTime
                    this.addAndEditForm.startTime = startTime
                    this.addAndEditForm.endTime = endTime
                    this.addAndEditForm.planAccess = planAccess
                    this.addAndEditForm.exeAccess = exeAccess
                }
            },
            immediate: true,
        },
    },
}
</script>
