<template>
    <div>
        <div class="describe">招标时间设置</div>
        <div class="form">
            <!-- <dataForm :search-form="searchForm" :search-data="searchData" :is-handle="false" label-width="250px"></dataForm> -->
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="250px" class="demo-ruleForm">
                <el-form-item label="招标公告正式发布时间：" prop="releaseTime">
                    <el-date-picker v-model="ruleForm.releaseTime" type="datetime" placeholder="选择日期时间" @change="releaseTime">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="标书获取开始时间：" prop="startTime">
                    <el-date-picker v-model="ruleForm.startTime" type="datetime" placeholder="选择日期时间" @change="startTime">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="标书获取结束时间：" prop="endTime">
                    <el-date-picker v-model="ruleForm.endTime" type="datetime" placeholder="选择日期时间" @change="endTime">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="投标人澄清答疑截止时间：" prop="answerQuestionEndTime">
                    <el-date-picker
                        v-model="ruleForm.answerQuestionEndTime"
                        type="datetime"
                        placeholder="选择日期时间"
                        @change="answerQuestionEndTime"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="投标文件递交截止时间及开标时间：" prop="openBidStartTime">
                    <el-date-picker
                        v-model="ruleForm.openBidStartTime"
                        type="datetime"
                        placeholder="选择日期时间"
                        @change="openBidStartTime"
                    >
                    </el-date-picker>
                </el-form-item>
            </el-form>
        </div>
        <div class="button">
            <el-button @click="upper">上一步</el-button>
            <el-button type="primary" @click="next">下一步</el-button>
        </div>
    </div>
</template>

<script>
import dataForm from '@components/dataForm.vue';
export default {
    name: 'bidingList',
    components: {
        dataForm
    },
    data() {
        let checkTime = (rule, value, callback) => {
            let nowTime = new Date().getTime();
            if (nowTime < value) {
                callback();
            } else {
                return callback(new Error('请选择大于当前的时间'));
            }
        };
        let checkTime1 = (rule, value, callback) => {
            if (!this.ruleForm.releaseTime) {
                return callback(new Error('请先选择招标公告正式发布时间'));
            } else {
                if (value > this.ruleForm.releaseTime) {
                    callback();
                } else {
                    return callback(new Error('请选择大于招标公告正式发布时间'));
                }
            }
        };
        let checkTime2 = (rule, value, callback) => {
            if (!this.ruleForm.startTime) {
                return callback(new Error('请先选择标书获取开始时间'));
            } else {
                if (value > this.ruleForm.startTime) {
                    callback();
                } else {
                    return callback(new Error('请选择大于标书获取开始时间'));
                }
            }
        };
        let checkTime3 = (rule, value, callback) => {
            if (!this.ruleForm.endTime) {
                return callback(new Error('请先选择标书获取结束时间'));
            } else {
                if (value > this.ruleForm.endTime) {
                    callback();
                } else {
                    return callback(new Error('请选择大于标书获取结束时间'));
                }
            }
        };
        let checkTime4 = (rule, value, callback) => {
            if (!this.ruleForm.answerQuestionEndTime) {
                return callback(new Error('请先选择投标人澄清答疑截止时间'));
            } else {
                if (value > this.ruleForm.answerQuestionEndTime) {
                    callback();
                } else {
                    return callback(new Error('请选择投标人澄清答疑截止时间'));
                }
            }
        };
        return {
            ruleForm: {
                releaseTime: '',
                startTime: '',
                endTime: '',
                answerQuestionEndTime: '',
                openBidStartTime: ''
            },
            rules: {
                releaseTime: [
                    {
                        type: 'date',
                        required: true,
                        message: '请选择时间',
                        trigger: 'blur'
                    },
                    {
                        validator: checkTime
                    }
                ],
                startTime: [
                    {
                        type: 'date',
                        required: true,
                        message: '请选择时间',
                        trigger: 'blur'
                    },
                    {
                        validator: checkTime1
                    }
                ],
                endTime: [
                    {
                        type: 'date',
                        required: true,
                        message: '请选择时间',
                        trigger: 'blur'
                    },
                    {
                        validator: checkTime2
                    }
                ],
                answerQuestionEndTime: [
                    {
                        type: 'date',
                        required: true,
                        message: '请选择时间',
                        trigger: 'blur'
                    },
                    {
                        validator: checkTime3
                    }
                ],
                openBidStartTime: [
                    {
                        type: 'date',
                        required: true,
                        message: '请选择时间',
                        trigger: 'blur'
                    },
                    {
                        validator: checkTime4
                    }
                ]
            }
        };
    },

    methods: {
        releaseTime(val) {
            this.ruleForm.releaseTime = new Date(val).getTime();
        },
        startTime(val) {
            this.ruleForm.startTime = new Date(val).getTime();
        },
        endTime(val) {
            this.ruleForm.endTime = new Date(val).getTime();
        },
        answerQuestionEndTime(val) {
            this.ruleForm.answerQuestionEndTime = new Date(val).getTime();
        },
        openBidStartTime(val) {
            this.ruleForm.openBidStartTime = new Date(val).getTime();
        },
        async next() {
            const valid = await this.$refs['ruleForm'].validate();
            if (valid) {
                this.$emit('getruleForm', this.ruleForm);
                this.$parent.next();
            }
        },
        upper() {
            this.$parent.upper();
        }
    }
};
</script>

<style scoped>
.form {
    width: 50%;
    margin: 0 auto;
    box-sizing: border-box;
    padding-bottom: 30px;
}

.button {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 20px;
    margin-right: 20px;
}
</style>
