<template>
    <div>
        <van-field v-model="pickerModel" is-link readonly :name="data.id" :label="data.name" :placeholder="data.placeholder" @click="showPicker = true" :rules="[{validator: validator}]" />
        <van-popup v-model="showPicker" round position="bottom">
            <van-datetime-picker v-model="currentDate" title="选择年月日" type="date" @cancel="showPicker = false" :min-date="minDate" :max-date="maxDate" :formatter="formatter" item-height="88" @confirm="onConfirm" />
        </van-popup>
    </div>
</template>

<script>
import {
    ref,
    reactive
} from "vue"
const formatDate = (date, pattern) => {
    
    function padding(s, len) {
        len = len - (s + '').length;
        for (var i = 0; i < len; i++) {
            s = '0' + s;
        }
        return s;
    }
    if (!date || !pattern) {
        return;
    }
    pattern = pattern || 'yyyy/MM/dd';
    return pattern.replace(/([yMdhsm])(\1*)/g, function ($0) {
        switch ($0.charAt(0)) {
            case 'y':
                return padding(date.getFullYear(), $0.length);
            case 'M':
                return padding(date.getMonth() + 1, $0.length);
            case 'd':
                return padding(date.getDate(), $0.length);
            case 'w':
                return date.getDay() + 1;
            case 'h':
                return padding(date.getHours(), $0.length);
            case 'm':
                return padding(date.getMinutes(), $0.length);
            case 's':
                return padding(date.getSeconds(), $0.length);
        }
    })
}

export default {
    props: {
        data: {
            type: Object
        },
        validator: {
            type: Function
        }
    },
    setup(props, ctx) {
        let modelValue = ctx.attrs.modelValue?new Date(ctx.attrs.modelValue.replace(/[^\d]/gi,($0) =>{
            switch ($0) {
                  case "-":case "/":case "年": case "月": case "日":return "/";
            } 
        })):new Date();
        const {
            maxDate,
            minDate,
        } = reactive(props).data,
            showPicker = ref(false),
            pickerModel = ref(formatDate(modelValue, "yyyy/MM/dd")),
            currentDate = ref(modelValue);
        const onConfirm = (value) => {
            console.info(value)
            pickerModel.value = formatDate(value, "yyyy/MM/dd");
            showPicker.value = false;
        };
        const formatter = (type, val) => {
            if (type === 'year') {
                return val + '';
            }
            if (type === 'month') {
                return val + '';
            }
            if (type === 'day') {
                return val + '';
            }
            return val;
        };
        return {
            minDate: minDate || new Date(1970, 0, 1),
            maxDate: maxDate,
            pickerModel,
            onConfirm,
            showPicker,
            formatter,
            currentDate
        }
    }
}
</script>

<style lang="less" scoped>

</style>
