<template>
    <div class="chime-datepicker">
        <im-popper
            appendToBody
            visible-arrow
            ref="popper"
            popper-class="chime-datepicker-popper-wrapper"
        >
            <template v-slot:reference>
                <div class="date-picker-input-wrapper">
                    <input
                        autocomplete="off"
                        :value="showDate"
                        :name="name"
                        :placeholder="placeholder"
                        @keydown="onKeydown"
                    />
                    <i class="lofty_iconfont lofty-icon-data" />
                    <i v-show="showDate" class="lofty_iconfont lofty-icon-cancel_bold" @click.stop="clearDate"/>
                </div>
            </template>
            <template v-slot:default>
                <DatePickerManger :date="pickerDate" @chooseDate="chooseDate" />
            </template>
        </im-popper>
    </div>
</template>
<script>
import dateFormat from '@/common/format/date-format.js';
import ImPopper from '../popper/index.vue';
import DatePickerManger from './datePickerManager/manager.vue';
function getDate(dateStr, fmt) {
    if (fmt === 'timestamp') {
        return new Date(parseInt(dateStr));
    }
    return new Date(dateStr);
}

function getValueDate(valueFormat, d) {
    if (!valueFormat) {
        return d;
    }
    if (valueFormat === 'timestamp') {
        return +d;
    }
    return dateFormat(valueFormat, d);
}
export default {
    emits: ['input', 'update:date'],
    name: 'ChimeDatePicker',
    components: { DatePickerManger, ImPopper },
    props: {
        name: {
            // native attribute
            type: [String, Number, Date],
            default: 'date'
        },
        date: {
            type: [String, Date, Number]
        },
        placeholder: {
            type: String
        },
        valueFormat: {
            // optional ， The format of the bound value 。 If not specified, the binding value is  Date  object
            type: String
        },
        format: {
            // The format displayed in the input box
            type: String,
            default: 'yyyy-MM-dd'
        }
    },
    data() {
        return {
            showDate: '',
            pickerDate: {
                year: 0,
                month: 0,
                date: 0
            }
        };
    },
    methods: {
        onKeydown(e) {
            switch (e.keyCode) {
                case 13:
                    this.inputDate(e);
                    break;
                case 46:
                case 8:
                    this.clearDate(e);
                    break;
            }
        },
        clearDate() {
            this.$emit('input', '');
            this.$emit('update:date', '');
            this.showDate = '';
            this.pickerDate = {
                year: 0,
                month: 0,
                date: 0
            };
        },
        chooseDate({ year, month, date }) {
            const d = new Date(year, month, date);
            this.showDate = dateFormat(this.format, d);
            const valueDate = getValueDate(this.valueFormat, d);
            this.$emit('input', valueDate);
            this.$emit('update:date', valueDate);
            this.$refs.popper && this.$refs.popper.hide();
        },
        inputDate(e) {
            const dStr = e.target.value;
            const d = getDate(dStr, this.format);
            if (!(d | d)) {
                return;
            } // invalid date
            const valueDate = getValueDate(this.valueFormat, d);
            this.$emit('input', valueDate);
            this.$emit('update:date', valueDate);
            this.showDate = dateFormat(this.format, d);
            this.pickerDate = {
                year: d.getFullYear(),
                month: d.getMonth(),
                date: d.getDate()
            };
        },
        handleDate() {
            let d = getDate(this.date, this.valueFormat);
            if (!(d | d)) {
                //invalid date
                return (this.showDate = '');
            }
            this.showDate = dateFormat(this.format, d);
            this.pickerDate = {
                year: d.getFullYear(),
                month: d.getMonth(),
                date: d.getDate()
            };
        }
    },
    watch: {
        date: {
            immediate: true,
            handler: 'handleDate'
        }
    }
};
</script>
<style lang="scss">
.chime-datepicker {
    display: inline-block;
    width: 100%;
    min-width: 140px;
    .date-picker-input-wrapper {
        position: relative;
        i.lofty-icon-data {
            position: absolute;
            height: 40px;
            line-height: 40px;
            left: 4px;
            top: 0;
            color: #c0c4cc;
        }
        i.lofty-icon-cancel_bold {
          position: absolute;
          line-height: 40px;
          right: 8px;
          top: 0;
          color: #c0c4cc;
          font-size: 12px;
          cursor: pointer;
        }
    }
    input {
        padding: 0 30px;
        width: 100%;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        height: 40px;
        line-height: 40px;
        border-radius: 4px;
    }
}
.chime-datepicker-popper-wrapper {
    border: 1px solid #e4e7ed;
    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    background: #fff;
    border-radius: 4px;
    & > .arrow {
        border-color: #e4e7ed;
    }
}
</style>
