<template>
    <span>
        <!--第一部分输入时间-->
        <span class="ant-calendar-picker">
			<div class="flex-items">
				<input v-if="conversion"
                       class="ant-calendar-picker-input ant-input"
                       @keyup.enter="dataInputChang"
                       @click="_openChoiseModal"
                       @focus="_openChoiseOpenModal"
                       v-model="dateValue"
                       placeholder="请选择日期"
                       :disabled="disabled">
                <!-- 转换按钮 -->
				<a-icon v-if="conversion && !disabled" slot="addonAfter" class="ml5" type="sync"
                        @click="_conversionClick"/>
			</div>
		</span>

        <!--第二部分选择时间-->
        <a-date-picker
                v-if="!conversion"
                v-model="dateValue"
                @change="changeSelectDate"
                placeholder="请选择停机日期"
                :format="dateFormat"
                :disabledDate="disabledDate"
                :disabledTime="disabledTime"
                @panelChange="_openChoiseModal"
                @openChange="_openChoiseOpenModal"
                :disabled="disabled"
                showTime
        />
    </span>
</template>

<script>
    import moment from 'moment'

    export default {
        name: 'HrhxDatePicker',
        props: {
            value: {
                type: Object | String,
                required: false
            },
            dateFormat: {
                type: String,
                required: false,
                default: 'YYYY-MM-DD HH:mm:ss'
            },
            disabledDate: {
                required: false,
                default: null
            },
            disabledTime: {
                required: false,
                default: null
            },
            disabled: {
                type: Boolean,
                required: false,
                default: false
            },
            type: {
                type: String,
                required: false,
                default: null
            }
        },
        data() {
            return {
                conversion: true,
                dateValue: ''
            }
        },
        watch: {
            value: {
                immediate: true,
                handler(val) {
                    console.log(val)
                    if (val) {
                        this.dateValue = moment(val).format(this.dateFormat)
                    } else {
                        this.dateValue = null
                        this.conversion = true
                        this._openChoiseModal()
                    }
                }
            },
            dateValue: {
                immediate: true,
                handler(val) {
                    if (!val) {
                        this._openChoiseModal()
                    }
                }
            }
        },
        methods: {
            _conversionClick() {
                this.conversion = !this.conversion
                if (this.dateValue) {
                    this.dateValue = moment(this.dateValue, this.dateFormat)
                    this.$emit('change', this.dateValue, this.dateValue.format(this.dateFormat))
                } else {
                    this.dateValue = moment(moment().locale('zh-cn'), this.dateFormat)
                    this.$emit('change', this.dateValue, this.dateValue.format(this.dateFormat))
                }
            },
            _openChoiseOpenModal(status) {
                this.$emit('openChange', status)
            },
            _openChoiseModal() {
                console.log('----------------------------------进来了--------------------------------------')
                this.$emit('panelChange', moment(moment().locale('zh-cn'), this.dateFormat), 'date')
                this.$emit('panelChange', moment(moment().locale('zh-cn'), this.dateFormat), 'time')
            },
            changeSelectDate(val, dateString) {
                this.$emit('change', val, dateString)
            },
            dataInputChang(e) {
                if (this.$projectUtils.format(e.target.value)) {
                    this.dateValue = this.$projectUtils.format(e.target.value)
                    let result = moment(this.dateValue, this.dateFormat)
					// 先触发change里的逻辑
					this.$emit('change', result, moment(result).format(this.dateFormat))
                    if (this.type) {
                        this.$emit('chooseDate', this.type, this.dateValue)
                    }
                	//  验证逻辑合格进来 不合格走else 并清空数据
                    if (this.disabledDate == null || this._timeValid(result)) {
						// this.$emit('change', result, moment(result).format(this.dateFormat))
                    } else {
                        this.dateValue = ''
						this.$emit('change', null, '')
                        this.$message.warn('输入的时间不合理')
                    }
                } else {
                    this.dateValue = ''
                    this.$message.warn('输入的时间格式不合法')
                }
            },
            /**
             * 校验时间
             * @param datatime
             * @returns {boolean}
             * @private
             */
            _timeValid(datatime) {
            	debugger
                // 校验日期
                if (this.disabledDate(datatime)) {
                    return false
                }
                // 校验时间--获取时间的小时数
                if (this.disabledTime && this.disabledTime(datatime)) {
                    let disabledHours = this.disabledTime(datatime).disabledHours()
                    let hours = datatime.hours()
                    if (disabledHours.includes(hours)) {
                        return false
                    }
                    // 校验时间--获取时间的分钟数
                    let disabledMinutes = this.disabledTime(datatime).disabledMinutes()
                    console.log(disabledMinutes)
                    let minutes = datatime.minutes()
                    if (disabledMinutes.includes(minutes)) {
                        return false
                    }
                }

                return true
            }
        }
    }
</script>
