
<template>
    <div class="as-datetime-picker">
        <span @click="visible = !disabled">
            <slot :value="computedValue">
                <as-cell-picker
                    :label="label"
                    :placeholder="placeholder"
                    :disabled="disabled"
                    :required="required"
                    :clearable="clearable"
                    :value="computedValue"
                    @input="handleClear"
                ></as-cell-picker>
            </slot>
        </span>
        <van-popup
            round
            position="bottom"
            v-model="visible">
            <van-datetime-picker
                v-if="isShow"
                :value="computedDatePickerValue"
                :type="type"
                @cancel="visible = false"
                @confirm="handleConfirm"
                :min-date="formatDate(minDate)"
                :max-date="formatDate(maxDate)"
                :formatter="handleFormatter"
                :filter="filter"
            ></van-datetime-picker>
        </van-popup>
    </div>
</template>

<script>
    import { DatetimePicker, Popup } from 'vant'
    import AsCellPicker from '../as-cell-picker'
    import { filterDate } from '../../../plugins/filters'
    export default {
        name: 'AsDatetimePicker',
        data () {
            return {
                visible: false,
                isShow: false, // todo 为了解决 datetime-picker 设置了minDate or maxDate 值不恢复的bug
            }
        },
        props: {
            clearable: { type: Boolean, default: false },
            disabled: { type: Boolean, default: false },
            required: { type: Boolean, default: false },
            value: { default: '' },
            label: { default: '' },
            type: { type: String, default: 'date' },
            placeholder: { default: '' },
            formatter: { type: Function, default: v => v },
            minDate: { default: undefined },
            maxDate: { default: undefined },
            valueFormat: { type: String, default: 'yyyy-MM-dd' },
            defaultValue: { default: '' },
            filter:{ type: Function, default:(t , o)=>o}
        },
        computed: {
            computedValue () {
                const { value } = this
                return value ? this.formatter(value) : ''
            },
            computedDatePickerValue () {
                let { value, defaultValue = '', valueFormat } = this
                if (value instanceof Date) return value
                if (value) {
                    // TODO 这里不是最好的处理方案
                    if (/^[yMdhms]+$/.test(valueFormat)) {
                        value = this.formatter(value)
                    }
                    value = value.replace('年', '/')
                        .replace('月', '/')
                        .replace('日', '/')
                        .replace(/-/g, '/')
                    if (value[value.length - 1] === '/') {
                        value = `${value}01`
                    }
                    value = new Date(value)
                } else {
                    value = defaultValue ? new Date(defaultValue) : new Date()
                }
                return value
            },
            computedShowClear() {
                return this.value && !this.disabled && this.clearable
            },
        },
        watch: {
            // 为了重置时间选择
            visible (v) {
                v ? this.isShow = true : setTimeout(() => this.isShow = false, 500)
            }
        },
        methods: {
            formatDate (date) {
                if (!date) return undefined
                return new Date(typeof date === 'string' ? date.replace(/-/g, '/') : date)
            },
            handleFormatter(type, val) {
                if (type === 'year') {
                    return val + '年'
                }
                if (type === 'month') {
                    return val + '月'
                }
                if (type === 'day') {
                    return val + '日'
                }
                return val
            },
            handleClear () {
                this.emitInputEvent('')
            },
            handleConfirm (value) {
                const { valueFormat } = this
                if (valueFormat) {
                    value = filterDate(value, valueFormat)
                }
                this.emitInputEvent(value)
                this.visible = false
            },
            emitInputEvent(value) {
                this.$emit('input', value, this.value)
                this.$emit('change', value, this.value)
            },
        },
        components: {
            AsCellPicker,
            VanPopup: Popup,
            VanDatetimePicker: DatetimePicker,
        },
    }
</script>
