/**
* author: Louie Butch
* date: 2020/8/12
* email: 844089357@qq.com
* desc: 数值区间选择
*/
<template>
    <div class="hd-num-range" @mouseenter="mouseEnter" @mouseleave="mouseleave">
        <el-input type="number" v-model="preValue" :disabled="disabled" :placeholder="startPlaceholder" size="mini" style="width: 39%" @focus="focus($event)" @change="valueChange('pre')"></el-input>
        <div class="separator">
            <span>{{rangeSeparator}}</span>
        </div>
        <el-input type="number" v-model="nextValue" :disabled="disabled" :placeholder="endPlaceholder" size="mini" style="width: 39%" @focus="focus($event)" @change="valueChange('next')"></el-input>
        <div v-if="isShowClear" class="close-icon" @click.stop="clearValue">
            <i class="el-input__icon el-icon-circle-close el-input__clear"></i>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'hd-num-range',
        props: {
            rangeSeparator: {
                type: String,
                default: '至'
            },
            startPlaceholder: {
                type: String,
                default: '数值'
            },
            endPlaceholder: {
                type: String,
                default: '数值'
            },
            value: {
                type: Array,
                default: () => []
            },
			disabled:{
				type: Boolean,
				default: false
            }
        },
        data(){
            return {
                preValue: '',
                nextValue: '',
                isShowClear: false
            };
        },
        watch: {
            preValue(val){
                if (val) {
                    this.isShowClear = true;
                }
            },
            nextValue(val){
                if (val) {
                    this.isShowClear = true;
                }
            },
            value: {
                handler(newVal, oldVal) {
                    if (newVal.length === 0) {
                        this.preValue = '';
                        this.nextValue = '';
                    }
                },
                deep: true,
                immediate: true
            }
        },
        methods: {
            /**
             * 聚焦全选
             * @param event
             */
            focus(event){
                event.currentTarget.select();
            },

            valueChange(type){
                if (this.preValue && this.nextValue){
                    if (Number(this.preValue) >= Number(this.nextValue)){
                        this.$message.warning('请输入正确的区间范围！');
                        if (type === 'pre') {
                            this.preValue = '';
                        } else {
                            this.nextValue = '';
                        }
                    } else {
                        let value = [Number(this.preValue), Number(this.nextValue)];
                        this.$emit('input', value);
                        this.$emit('change');
                    }
                } else {
                    if (!this.preValue && !this.nextValue){
                        this.$emit('input', []);
                        this.$emit('change');
                    }
                }
            },

            clearValue(){
                this.preValue = '';
                this.nextValue = '';
                this.isShowClear = false;
                this.$emit('input', []);
                if (this.value.length > 0) {
                    this.$emit('change');
                }
            },

            mouseEnter(){
                if (this.preValue || this.nextValue) {
                    this.isShowClear = true;
                }
            },

            mouseleave(){
                this.isShowClear = false;
            }
        }
    }
</script>

<style scoped lang="scss">
    .hd-num-range {
        width: 100%;
        height: 30px;
        line-height: 30px;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .separator {
            width: 30px;
            line-height: 30px;
            height: 30px;
            text-align: center;
        }

        .close-icon {
            transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);

            i {

                &:hover {
                    color: #909399;
                }
                color: #c0c4cc;
                font-size: 14px;
                cursor: pointer;
                line-height: 28px;
                width: 25px;
                height: 100%;
                text-align: center;
            }
        }
    }
</style>