import {Component, Prop, Vue, Emit, Watch} from 'vue-property-decorator';

declare var $: any;
const moment = require('../../assets/moment/moment');
@Component
export default class SelectTime extends Vue {
    @Prop({default: () => ''}) private label?: any;
    @Prop({default: () => ''}) private startTimeID?: any;
    @Prop({default: () => ''}) private endTimeID?: any;
    @Prop({default: () => ''}) private startTime?: any;
    @Prop({default: () => ''}) private endTime?: any;
    @Prop({default: () => 'normal'}) private type?: any;

    public $layer: any;

    private time: any = {
        start: '',
        end: '',
    }

    private status: any = {
        init: false,
    }

    @Watch('startTime', {immediate: true})
    private watchStartTime(value: any) {
        if (value === '' && this.status.init) {
            $('#' + this.startTimeID).val('');
            this.time.start = "";
        }
    }

    @Watch('endTime', {immediate: true})
    private watchEndTime(value: any) {
        if (value === '' && this.status.init) {
            $('#' + this.endTimeID).val('');
            this.time.end = "";
        }
    }

    private created() {
        this.initDateSelect();
    }

    private mounted(){
        this.initDateSelect();
    }

    private initDateSelect() {
        setTimeout(() => {
            $('#' + this.startTimeID).datepicker({
                dateFormat: 'yy-mm-dd',
                timFormat: 'hh:mm',
                showSecond: false,
                onSelect: (value: any) => {
                    // $('#' + this.startTimeID).val(value + ' 00:00:00')
                    // this.time.start = value + ' 00:00:00'
                    // this.emit();
                    this.checkStartTime(value)
                }
            })
            $('#' + this.endTimeID).datepicker({
                dateFormat: 'yy-mm-dd',
                timFormat: 'hh:mm',
                showSecond: false,
                onSelect: (value: any) => {
                    this.checkEndTime(value);
                }
            })
            this.status.init = true;
        }, 300)
    }

    private emit() {
        this.$emit('change', {
            startTime: this.time.start,
            endTime: this.time.end,
        })
    }

    private checkStartTime(value: any) {
        this.time.start = value + ' 00:00:00'
        if (this.time.end === '') {
            $('#' + this.startTimeID).val(value + ' 00:00:00');
        } else {
            let flag = moment(this.time.start).isBefore(moment(this.time.end));
            if (!flag) {
                this.time.start = '';
                $('#' + this.startTimeID).val('');
                this.$layer.msg('开始时间不能大于结束时间', {type: 'error'})
            } else {
                $('#' + this.startTimeID).val(value + ' 00:00:00');
            }
        }
        this.emit();
    }

    private checkEndTime(value: any) {
        this.time.end = value + ' 23:59:59'
        if (this.time.start === '') {
            $('#' + this.endTimeID).val(value + ' 23:59:59');
        } else {
            let flag = moment(this.time.start).isBefore(moment(this.time.end));
            if (!flag) {
                this.time.end = '';
                $('#' + this.endTimeID).val('');
                this.$layer.msg('结束时间不能小于开始时间', {type: 'error'})
            } else {
                $('#' + this.endTimeID).val(value + ' 23:59:59');
            }
        }
        this.emit();
    }

}