<template>
    <el-input
        :class="['ps-input', showWordLimit && 'show-limit', (clearable && showWordLimit) && 'max-padd-r']"
        v-model="inputValue"
        :placeholder="placeholder"
        :disabled="disabled"
        :suffix-icon="suffixIcon"
        :prefix-icon="prefixIcon"
        :type="type"
        :rows="rows"
        :maxlength="maxlength"
        :show-word-limit="showWordLimit"
        :clearable="clearable"
        :show-password="showPassword"
        :prop="prop"
        @input="operaInput"
        @change="change"
        @blur="blur"
        @focus="handleFocus"
        :id="id"
        ref="inputRef"
    >
        <template slot="prefix">
            <slot name="prefix"></slot>
        </template>
        <template slot="suffix">
            <slot name="suffix"></slot>
        </template>
        <template slot="prepend">
            <slot name="prepend"></slot>
        </template>
        <template slot="append">
            <slot name="append"></slot>
        </template>
        <slot></slot>
    </el-input>
</template>

<script>
export default {
    name: "PsInput",
    props: {
        value: null,
        placeholder: {
            type: String,
            default: "",
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        suffixIcon: {
            type: String,
            default: "",
        },
        prefixIcon: {
            type: String,
            default: "",
        },
        type: {
            type: String,
            default: "text",
        },
        rows: {
            type: Number,
            default: 1,
        },
        maxlength: {
            type: String,
            default: "",
        },
        showWordLimit: {
            type: Boolean,
            default: false,
        },
        clearable: {
            type: Boolean,
            default: true,
        },
        showPassword: {
            type: Boolean,
            default: false,
        },
        id: {
            type: String,
            default: null,
        },
    },
    //处理v-model语法糖的emit事件
    model: {
        prop: "value",
        event: "handler",
    },
    watch: {
        value: {
            handler(val) {
                this.inputValue = val;
            },
            immediate: true,
        },
    },
    data() {
        return {
            inputValue: "",
            prop: null,
        };
    },
    created() {},
    mounted() {},
    methods: {
        operaInput(val) {
            this.$emit("handler", val);
            this.$emit("input", val);
        },
        change(e) {
            this.$emit("change", e);
        },
        blur(e) {
            this.$emit("blur", e);
        },
        handleFocus(e) {
            this.$emit("focus", e);
        },
        focus() {
            this.$refs.inputRef.focus();
        },
    },
};
</script>

<style>
</style>
