<template>
    <div>
        <el-form
            :model="addAndEditForm"
            label-width="auto"
            ref="addAndEditFormRef"
            :rules="addAndEditFormRules"
        >
            <el-row>
                <el-col :span="24">
                    <el-form-item label="工程名称" prop="bidCode">
                        <el-select
                            v-model="addAndEditForm.bidCode"
                            placeholder="请选择工程名称"
                            style="width: 100%"
                        >
                            <el-option
                                v-for="item in projectList"
                                :key="item.bidCode"
                                :label="item.proName"
                                :value="item.bidCode"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="工序类型" prop="gxType">
                        <!-- <el-input
                            clearable
                            show-word-limit
                            :maxlength="50"
                            placeholder="请输入工程类型"
                            v-model.trim="addAndEditForm.gxType"
                        /> -->

                        <el-select
                            clearable
                            style="width: 100%"
                            v-model="addAndEditForm.gxType"
                            placeholder="请选择工序"
                        >
                            <el-option label="土建" value="1" />
                            <el-option label="电器" value="2" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="工序" prop="gx">
                        <el-input
                            clearable
                            show-word-limit
                            :maxlength="50"
                            placeholder="请输入工序"
                            v-model.trim="addAndEditForm.gx"
                        />
                    </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="inUser">
                        <el-input
                            clearable
                            show-word-limit
                            :maxlength="50"
                            placeholder="请输入投入人员"
                            v-model.trim="addAndEditForm.inUser"
                        />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label="投入设备" prop="inDevice">
                        <el-input
                            clearable
                            show-word-limit
                            :maxlength="50"
                            placeholder="请输入投入设备"
                            v-model.trim="addAndEditForm.inDevice"
                        />
                    </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/dataManage/projectProgress'
import { getProjectSelectListAPI } from '@/api/dataManage/common'
export default {
    name: 'AddAndEditForm',
    props: {
        detailsId: {
            type: [Number, String],
            default: '',
        },
        editRow: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            addAndEditForm: {
                bidCode: '',
                gxType: '',
                gx: '',
                planStartTime: '',
                planEndTime: '',

                endTime: '',
                inUser: '',
                inDevice: '',
            },
            addAndEditFormRules: {
                bidCode: [
                    {
                        required: true,
                        message: '请选择工程名称',
                        trigger: 'blur',
                    },
                ],
                gxType: [
                    {
                        required: true,
                        message: '请输入工序类型',
                        trigger: 'blur',
                    },
                ],
                gx: [
                    {
                        required: true,
                        message: '请输入工序',
                        trigger: 'blur',
                    },
                ],
                inUser: [
                    {
                        required: true,
                        message: '请输入投入人员',
                        trigger: 'blur',
                    },
                ],
                inDevice: [
                    {
                        required: true,
                        message: '请输入投入设备',
                        trigger: 'blur',
                    },
                ],
                planStartTime: [
                    {
                        required: true,
                        message: '请选择计划开始时间',
                        trigger: 'blur',
                    },
                ],
                planEndTime: [
                    {
                        required: true,
                        message: '请选择计划结束时间',
                        trigger: 'blur',
                    },
                ],

                endTime: [
                    {
                        required: true,
                        message: '请选择实际结束时间',
                        trigger: 'blur',
                    },
                ],
            },
            projectList: [],
        }
    },

    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)
                    }
                })
            })
        },
        async getProjectSelectList() {
            const res = await getProjectSelectListAPI()
            if (res.code === 200) {
                this.projectList = res.data
            }
        },
    },
    created() {
        this.getProjectSelectList()
    },

    watch: {
        editRow: {
            handler(newVal) {
                if (Object.keys(newVal).length > 0) {
                    const {
                        gxType,
                        gx,
                        planStartTime,
                        planEndTime,
                        endTime,
                        inUser,
                        inDevice,
                        bidCode,
                    } = newVal
                    this.addAndEditForm.gxType = gxType
                    this.addAndEditForm.gx = gx
                    this.addAndEditForm.planStartTime = planStartTime
                    this.addAndEditForm.planEndTime = planEndTime

                    this.addAndEditForm.endTime = endTime
                    this.addAndEditForm.inUser = inUser
                    this.addAndEditForm.inDevice = inDevice
                    this.addAndEditForm.bidCode = bidCode
                }
            },
            immediate: true,
        },
    },
}
</script>
