<template>
    <div>
        <van-picker 
            ref="yearPicker" 
            v-if="type === 'year'" 
            show-toolbar 
            :title="title"
            :columns="yearColumn"
            :default-index="defaultYearIndex"
            @change="onYearChange"
            @confirm="onYearConfirm"
            @cancel="onYearCancel">
        </van-picker>
        <van-datetime-picker
            v-else 
            v-model="currentValue"
            v-bind="$attrs"
            v-on="$listeners"
            :type="type"
            :title="title"
            :min-date="minDate"
            :max-date="maxDate">
        </van-datetime-picker>
    </div>
</template>

<script>
import moment from "moment";
import {isEmpty} from "@bingoit/utils";

const TYPES = ["year", "year-month", "date", "datetime", "time"];

export default {
    name: "BgoDatetimePicker",
    props: {
        value: [String, Date],
        type: {
            type: String,
            default: "date",
            validator(value) {
                return TYPES.indexOf(value) !== -1;
            }
        },
        title: String,
        minDate: {
            type: Date,
            default: () => moment(new Date()).subtract(10, 'year').toDate(),
        },
        maxDate: {
            type: Date,
            default: () => moment(new Date()).add(10, 'year').toDate(),
        },
    },
    data() {
        return {
            yearList: [],
            defaultYearIndex: 0,
            // 单时间选择器的值是字符串,会在created钩子中处理时间的默认值
            currentValue: this.value || new Date(),
        }
    },
    watch: {
        value(newVal) {
            this.currentValue = newVal;

            if (this.type === 'year') {
                this.handleDefaultYearValue(newVal);
            }
        },
        currentValue(newVal) {
            this.$emit("input", newVal);
        }
    },
    created() {
        if (this.type === 'year') {
            const minYear = this.minDate.getFullYear();
            const maxYear = this.maxDate.getFullYear();
            const yearColumn = [];

            for (let year = minYear; year <= maxYear; year++) {
                yearColumn.push(year);
            }

            this.yearColumn = yearColumn;
            
            this.handleDefaultYearValue(this.value || new Date());
        } else if (this.type === 'time') {
            // 处理默认时间
            if (isEmpty(this.value)) {
                this.currentValue = moment(new Date()).format("HH:mm");
            }
        }
    },
    methods: {
        handleDefaultYearValue(date) {
            if(!(date instanceof Date)) {
                return;
            }
            const year = date.getFullYear();
            const index = this.yearColumn.indexOf(year);
            this.defaultYearIndex = index === -1 ? 0 : index;
        },
        onYearChange(picker, value) {
            this.$emit("change", picker, value);
        },
        onYearConfirm(value) {
            this.currentValue = new Date(value, 0, 1);
            
            this.$emit("confirm", this.currentValue);
        },
        onYearCancel() {
            this.$emit("cancel");
        }
    }
};
</script>
