/**
 * 年月选择
 * @author john
 * @date 2020/10/20
 */
import MfText from '../text/Text'
import classnames from 'classnames'
import BaseMixin from '../_utils/BaseMixin'
import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc'
import timezone from 'dayjs/plugin/timezone'
dayjs.extend(utc)
dayjs.extend(timezone)
const tz = dayjs.tz.guess()

export default {
    name: 'mf-month-range-picker',
    mixins: [BaseMixin],
    emits: ['update:modelValue', 'change', 'blur', 'popup-visible-change'],
    props: {
        modelValue: [String, Array],
        placeholder: Array,
        disabled: Boolean,
        clearable: {
            type: Boolean,
            default: false
        },
        // 尺寸
        size: {
            type: String,
            default: 'default'
        },
        prefixCls: {
            type: String,
            default: 'mf-month-range-picker'
        },
        //  下拉框类名
        popperClass: String,
        // 默认弹出框是打开或者关闭
        defaultPopupVisible: {
            type: Boolean,
            default: false
        },
        // 禁用日期
        disabledDate: Function
    },
    data() {
        return {}
    },
    methods: {
        getValue() {
            let { modelValue } = this
            if (typeof modelValue == 'string') {
                return modelValue.split(',')
            } else {
                return modelValue
            }
        }
    },
    render() {
        let {
            prefixCls,
            size,
            placeholder,
            popperClass,
            clearable,
            readonly,
            disabled,
            defaultPopupVisible,
            disabledDate
        } = this
        const textCls = classnames(`${prefixCls}-readonly`, {
            [`${prefixCls}-readonly-${size}`]: size
        })

        const wrapCls = classnames(prefixCls)

        if (readonly) {
            return (
                <MfText
                    value={this.valueVal}
                    class={textCls}
                />
            )
        } else {
            let datePickerProps = {
                modelValue: this.getValue(),
                mode: 'month',
                placeholder,
                size,
                popperClass,
                allowClear: clearable,
                disabled,
                defaultPopupVisible,
                'onUpdate:modelValue': (v) => {
                    this.$emit('update:modelValue', v)
                },
                onChange: (v) => {
                    this.$emit('change', v)
                },
                onBlur: (e) => {
                    this.$emit('blur', e)
                },
                onPopupVisibleChange: (val) => {
                    this.$emit('popup-visible-change', val)
                }
            }
            if (disabledDate) datePickerProps.disabledDate = disabledDate
            return (
                <a-range-picker
                    ref="mfMonthPicker"
                    class={wrapCls}
                    {...datePickerProps}
                />
            )
        }
    }
}