
<template>
    <van-popup
        v-model="visible"
        round
        position="bottom"
        class="as-datetime-popup"
    >
        <van-datetime-picker
            v-if="isShow"
            @cancel="hide"
            @confirm="handleConfirm"
            :value="computedValue"
            :type="computedOptions.type"
            :formatter="handleFormatter"
            :min-date="computedMinDate"
            :max-date="computedMaxDate"
        ></van-datetime-picker>
    </van-popup>
</template>

<script>
    import { Popup, DatetimePicker } from 'vant'
    import { filterDate } from '../../../plugins/filters'
    import { isDate } from '../../../plugins/utils/validator'
    import { parseDate } from '../../../plugins/utils'

    export default {
        name: 'AsDatetimePopup',
        data () {
            return {
                visible: false,
                resolve: null,
                reject: null,
                options: {},
                isShow: false, // todo 为了解决 datetime-picker 设置了minDate or maxDate 值不恢复的bug
            }
        },
        props: {
            minDate: { default: undefined },
            maxDate: { default: undefined },
            type: { type: String, default: 'date' },
            valueFormat: { type: String, default: 'yyyy-MM-dd' },
        },
        computed: {
            computedMinDate () {
                const { minDate } = this.computedOptions
                if (!minDate) return undefined
                return parseDate(minDate)
            },
            computedMaxDate () {
                const { maxDate } = this.computedOptions
                if (!maxDate) return undefined
                return parseDate(maxDate)
            },
            computedOptions () {
                return Object.assign({}, this.$props, this.options)
            },
            computedValue () {
                let { value } = this.computedOptions
                value = parseDate(value)
                if (!isDate(value)) value = new Date()
                return value
            },
        },
        watch: {
            // 为了重置时间选择
            visible (v) {
                v ? this.isShow = true : setTimeout(() => this.isShow = false, 500)
            }
        },
        methods: {
            show (options = {}) {
                return new Promise((resolve, reject) => {
                    this.options = options
                    this.resolve = resolve
                    this.reject = reject
                    this.visible = true
                })
            },
            hide () {
                this.reject && this.reject('')
                this.visible = false
            },
            handleFormatter(type, val) {
                if (type === 'year') {
                    return val + '年'
                }
                if (type === 'month') {
                    return val + '月'
                }
                if (type === 'day') {
                    return val + '日'
                }
                return val
            },
            handleConfirm (value) {
                const { valueFormat } = this.computedOptions
                if (valueFormat) value = filterDate(value, valueFormat)
                this.resolve && this.resolve(value)
                this.reject = null
                this.hide()
            },
        },
        components: {
            VanPopup: Popup,
            VanDatetimePicker: DatetimePicker,
        },
    }
</script>
