<template>
    <div class="inputRange">
        <template>
            <el-input
                    :placeholder="properties.startPlaceholder"
                    @keyup.native.enter="keyup"
                    @input="limitNum(0)"
                    :maxlength="properties.maxlength"
                    :clearable="properties.clearable"
                    v-model="value[0]"
                    @change="model => {onChange(model,  0);}"
            >
                <span slot="suffix">{{properties.unit}}</span>
            </el-input>
            {{properties.separator}}
            <el-input
                    :placeholder="properties.endPlaceholder"
                    @keyup.native.enter="keyup"
                    @input="limitNum(1)"
                    :maxlength="properties.maxlength"
                    :clearable="properties.clearable"
                    v-model="value[1]"
                    @change="model => {onChange(model,  1);}"
            >
                <span slot="suffix">{{properties.unit}}</span>
            </el-input>
        </template>

    </div>
</template>

<script>
import * as ObjUtil from "../../../util/pattern/object";
import mixin from "./mixin"
    export default {
        name: "inputRange",
        mixins:[mixin],
        data() {
            return {
                data:{},
                value:["",""],
                properties: {}
            };
        },
        created() {
            this.initProperties({
                startPlaceholder:'请输入',
                endPlaceholder:'请输入',
                separator:'至',
                maxlength:180,
                clearable:true,
                unit: "",
            });
        },
        methods: {
            init(value){
                if (value) {
                    this.value= [
                        value.start || '',
                        value.end　|| '',
                    ];
                    this.data = ObjUtil.copy(value)
                } else {
                    this.value = []
                    this.data = {start:'', end:''}
                }
            },
            limitNum(index) {
                let vm = this;
                this.value[index]= this.value[index].replace(/[^\d]/g, "");
            },
            onChange(value,position){
                this.data[["start","end"][position]]=this.value[position] || null;
                this.$emit("update:model",this.data);
                this.$emit("change",this.data)
            },
            keyup(){
                this.$emit("keyup");
            }
        }
    };
</script>
