<template>
    <div class="data-input">
        <el-input 
            placeholder="请输入数字" 
            v-model="num"
            min="1"
            type="number" 
            class="input-with-select" 
            size="small" 
            @mousewheel.native.prevent
            @DOMMouseScroll.native.prevent
            oninput="if(value.length>3)value=value.slice(0,3)"
            onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
        >
            <template slot="prepend">近期</template>
            <template slot="append">{{dateInfo}}</template>
        </el-input>
        <el-button size="small" type="primary" class="date-submit" @click="submit">查询</el-button>
    </div>
</template>

<script>
import TimeFormat from '../TimeFormat'
export default {
    name: 'NearInput',
    model: {
        prop: 'NUM',
        event: 'change'
    },
    props: {
        NUM: Object,
        dateType: {
            type: String,
            default: 'days'
        },
    },
    data() {
        return {
            num: 1
        }
    },
    computed: {
        dateInfo() {
            let e = this.dateType
            let info = '天'
            switch(e) {
                case 'days':
                    info = '天'
                    break;
                case 'weeks':
                    info = '周'
                    break;
                case 'month':
                    info = '月'
                    break;
                case 'years':
                    info = '年'
                    break;
            }
            return info
        }
    },
    methods: {
        submit() {
            let obj = ''
            let e = this.dateType

            if(this.num < 1) {
                this.num = 1
            }
            let num = this.num
            
            switch (e) {
                case 'days':
                    obj = TimeFormat.getNearNDays(num)
                    break;
                case 'weeks':
                    obj = TimeFormat.getNearNWeeks(num)
                    break;
                case 'month':
                    obj = TimeFormat.getNearNMonth(num)
                    break;
                case 'years':
                    obj = TimeFormat.getNearNYears(num)
                    break;
            }
            this.$emit('change', obj, e)
        },
    }
}
</script>

<style lang="less">
    .data-input {
        display: flex;
        width: 300px;
        .date-submit {
            margin-left: 10px;
        }
        input::-webkit-inner-spin-button, input::-webkit-outer-spin-button {
            -webkit-appearance: none !important;
        }
        input[type="number"]{
            -moz-appearance: textfield;
        }
    }
    
</style>