<template>
    <div class="input">
        <template v-if="properties.type === 'input'">
            <el-input
                :placeholder="properties.placeholder"
                @keyup.native.enter="keyup"
                @blur="blur"
                :maxlength="properties.maxlength"
                :clearable="properties.clearable"
                v-model="value"
                :title="properties.title"
                :disabled="properties.disabled"
                @change="onChange()"
            />
        </template>
        <template v-else-if="properties.type === 'number'">
            <el-input
                :placeholder="properties.placeholder"
                @keyup.native.enter="keyup"
                @blur="blur"
                @input="limitNum()"
                :maxlength="properties.maxlength"
                :clearable="properties.clearable"
                v-model="value"
                @change="onChange()"
            />
        </template>
        <template v-else-if="properties.type === 'alnum'">
            <el-input
                :placeholder="properties.placeholder"
                @keyup.native.enter="keyup"
                @blur="blur"
                @input="limitAlnum"
                :maxlength="properties.maxlength"
                :clearable="properties.clearable"
                v-model="value"
                @change="onChange()"
            />
        </template>
    </div>
</template>

<script>
/**
 *
 *
 * <item @getData="getData" @change="change" :model.sync="model"></item>
 *  parent.$refs.item.init(model);
 */
import mixin from "./mixin"
export default {
    name: "filtrateItemInput",
    mixins:[mixin],
    data() {
        return {
            value: "",
            properties: {}
        };
    },
    created() {
        this.initProperties({
            type: 'input',
            maxlength: 180,
            clearable: true,
            placeholder: '请输入',
        });
    },
    methods: {
        init(value) {
            this.value = value;
        },
        onChange() {
            this.$emit("update:model", this.value);
            this.$emit("change", this.value);
        },
        limitNum() {
            this.value = this.value.replace(/[^\d]/g, "");
        },
        limitAlnum() {
            this.value = this.value.replace(/[^\d|[a-zA-Z]/g, "");
        },
        /**
         * 组件失去焦点操作
         * @param value
         */
        blur() {
            this.$emit("blur");
        },
        keyup() {
            this.$emit("keyup");
        }
    }
};
</script>
