<template>
    <div>
        <ElForm v-model="basicMessage" :rules="basicMessageRules">
            <ElFormItem prop="startTime">
            <!-- 此處用到的是el-element的日期時間選擇器 -->
            <!-- 通過設置type屬性為datetime，即可在同一個選擇器里同時進行日期和時間的選擇?？旖葸x項的使用方法與 Date Picker 相同。 -->
            <ElDatePicker
              v-model="basicMessage.startTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              :picker-options="pickerOptions"
              placeholder="選擇執(zhí)行開始時間" >
            </ElDatePicker>
          </ElFormItem>
          <span style="margin: 0 8px">-</span>
          <ElFormItem prop="endTime">
            <ElDatePicker
              v-model="basicMessage.endTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              :picker-options="pickerOptions"
              placeholder="選擇執(zhí)行結(jié)束時間">
            </ElDatePicker>
          </ElFormItem>
        </ElForm>
    </div>
</template>
<script>
export default {
    data () {
        return {
            // picker-options設置日期可選范圍
            disabledDate (time) {
                return time.getTime() < new Date().getTime() - 86400000
            },
            // 控制時分秒不可選
            selectableRange: (() => {
                const data = new Date()
                const hour = data.getHours()
                const minute = data.getMinutes()
                const second = data.getSeconds()
                return [`${hour}:${minute}:${second} - 23:59:59`]
            })(),
            basicMessage: {
                startTime: '',
                endTime: ''
            },
            // 自定義校驗規(guī)則
            basicMessageRules: {
                startTime: { validator: this.validStartTime, trigger: 'blur' },
                endTime: { validator: this.validEndTime, trigger: 'blur' }
            }
        }
    },
    methods: {
        /* 校驗活動區(qū)間 */
        validStartTime (rule, value, callback) {
            if (!value) {
                callback(new Error('請選擇開始時間'))
            } else {
                if (this.basicMessage.startTime) {
                this.$refs.basicMessage.validateField('endTime')
                }
                callback()
            }
        },
        validEndTime (rule, value, callback) {
            // 判斷結(jié)束時間不得晚于當前時間（看自己需求）
            if (new Date(value).getTime() < new Date().getTime()) {
                callback(new Error('結(jié)束時間不得晚于當前時間'))
            }
            if (!value) {
                callback(new Error('請選擇結(jié)束時間'))
            } else {
                if (!this.basicMessage.startTime) {
                callback(new Error('請選擇開始時間！'))
                } else if (Date.parse(this.basicMessage.startTime) >= Date.parse(value)) {
                callback(new Error('結(jié)束時間必須大于開始時間！'))
                } else {
                callback()
                }
            }
        }
    }
}
</script>