<template>
    <div 
        class="bgo-datetime-range-picker">
        <div class="bgo-datetime-range-picker__form">
            <van-field
                clickable
                v-model="startDateText"
                readonly
                :disabled="disabled || readonly"
                :placeholder="startPlaceholder"
                @click="showPopup('start')"
                @blur="onBlur"
                @focus="onFocus"
            >
            </van-field>
            <span class="bgo-datetime-range-picker__separator"> {{ separator }} </span>
            <van-field
                clickable
                v-model="endDateText"
                readonly
                :disabled="disabled || readonly"
                :placeholder="endPlaceholder"
                @click="showPopup('end')"
                @blur="onBlur"
                @focus="onFocus"
            >
            </van-field>
        </div>

        <van-popup 
            v-model="showDatetimePicker" 
            position="bottom" >
            <datetime-picker v-if="datetimePickerType === 'start'" 
                v-model="startDate"
                title="选择开始时间"
                :type="ctrlType"
                :min-date="minDate"
                :max-date="maxDate"
                @confirm="onConfirm('start', $event)"
                @cancel="showDatetimePicker = false" />

            <datetime-picker v-else 
                v-model="endDate"
                title="选择开始时间"
                :type="ctrlType"
                :min-date="minDate"
                :max-date="maxDate"
                @confirm="onConfirm('end', $event)"
                @cancel="showDatetimePicker = false" />
        </van-popup>
    </div>
</template>

<script>
import moment from "moment";
import {FieldMixin} from "vant/lib/mixins/field.js";
import DatetimePicker from "../../DatetimePicker";
import "./index.scss";

const TYPES = [
    "yearrange",
    "monthrange",
    "daterange",
    "datetimerange",
    "timerange"
];

export default {
    name: "BgoDatetimeRangePicker",
    components: {DatetimePicker},
    mixins: [FieldMixin],
    props: {
        value: Array,
        readonly: {
            type: Boolean,
            default: false,
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        type: {
            type: String,
            default: "daterange",
            validator(value) {
                return TYPES.indexOf(value) !== -1;
            }
        },
        separator: {
            type: String,
            default: "-"
        },
        startPlaceholder: {
            type: String,
            default: "请选择开始时间"
        },
        endPlaceholder: {
            type: String,
            default: "请选择结束时间"
        },
        minDate: {
            type: Date,
            default: () =>
                moment(new Date())
                    .subtract(10, "year")
                    .toDate()
        },
        maxDate: {
            type: Date,
            default: () =>
                moment(new Date())
                    .add(10, "year")
                    .toDate()
        },
        formatter: {
            type: Function,
            default: function (date)  {
                return moment(date).format(this.defaultFormat);
            }
        }
    },
    data() {
        return {
            currentValue: this.value,

            startDate: "",
            endDate: "",
            startDateText: "",
            endDateText: "",

            showDatetimePicker: false,
            datetimePickerType: "start",
        };
    },
    computed: {
        ctrlType() {
            let type = "date";
            switch(this.type) {
                case "yearrange":
                    type = "year";
                    break;
                case "monthrange":
                    type = "year-month";
                    break;
                case "daterange":
                    type = "date";
                    break;
                case "datetimerange":
                    type = "datetime";
                    break;
                case "timerange":
                    type = "time";
                    break;
            }

            return type;
        },
        defaultFormat() {
            let format = "YYYY-MM-DD";

            switch(this.type) {
                case "yearrange":
                    format = "YYYY";
                    break;
                case "monthrange":
                    format = "YYYY-MM";
                    break;
                case "daterange":
                    format = "YYYY-MM-DD";
                    break;
                case "datetimerange":
                    format = "YYYY-MM-DDTHH:mm:ss";
                    break;
                case "timerange":
                    format = "HH:mm:ss";
                    break;
            }

            return format;
        },
    },
    watch: {
        value(newVal) {
            this.currentValue = newVal;

            this.initDefaultValue();
        },
        currentValue(newVal) {
            this.$emit("input", newVal);
        },
    },
    created() {
        this.initDefaultValue();
    },
    methods: {
        initDefaultValue() {
            if (Array.isArray(this.value)) {
                this.startDate = this.value[0];
                this.endDate = this.value[1];
            } else {
                this.startDate = "";
                this.endDate = "";
            }

            this.handleStartDate();
            this.handleEndDate();
        },
        showPopup(type) {
            if (this.disabled || this.readonly) {
                return;
            }
            this.datetimePickerType = type;
            this.showDatetimePicker = true;
        },
        handleStartDate() {
            if (this.startDate instanceof Date) {
                this.startDateText = this.formatter(this.startDate);
            } else {
                this.startDateText = this.startDate;
            }
        },
        handleEndDate() {
            if (this.endDate instanceof Date) {
                this.endDateText = this.formatter(this.endDate);
            } else {
                this.endDateText = this.endDate;
            }
        },
        onBlur() {
            this.$emit("blur");
        },
        onFocus() {
            this.$emit("focus");
        },
        onConfirm(type, date) {
            if (!Array.isArray(this.currentValue) 
                || this.currentValue.length !== 2) {
                    this.currentValue = new Array(2);
            }

            if (type === "start") {
                this.currentValue.splice(0, 1, date);
                this.handleStartDate();
            } else if (type === "end") {
                this.currentValue.splice(1, 1, date);
                this.handleEndDate();
            }

            this.showDatetimePicker = false;

            this.$emit("confirm", this.currentValue, type);
        }
    }
};
</script>
