<template>
    <div class="input-box">
        <slot name="before" :scope="val">
            <span :class="before"></span>
        </slot>
        <input class="input" :disabled="inputDisabled" :placeholder="placeholder" v-model="val" v-bind="$attrs" @focus="handleFocus" @blur="handleBlur" @change="handleChange" />
        <slot name="after" :scope="val">
            <span :class="after"></span>
        </slot>
    </div>
</template>

<script>
export default {
    inheritAttrs: false,
    name: "qg-input",
    inject: {
        elForm: {
            default: "",
        },
        elFormItem: {
            default: "",
        },
    },
    props: {
        value: {
            type: [String, Number],
            default: "",
        },
        placeholder: {
            type: String,
            default: "请输入",
        },
        before: {
            type: String,
            default: "",
        },
        after: {
            type: String,
            default: "",
        },
    },
    data() {
        return {
            icon: "",
        };
    },
    computed: {
        val: {
            get() {
                return this.value;
            },
            set(val) {
                this.$emit("input", val);
            },
        },
        inputDisabled() {
            return this.disabled || (this.elForm || {}).disabled;
        },
    },
    methods: {
        // handleInput(event) {
        //     console.dir(event.target);
        //     // this.$emit("input", event.target.value);
        // },
        handleChange(event) {
            this.$emit("change", event.target.value);
        },
        handleFocus(event) {
            this.$emit("focus", event);
        },
        handleBlur(event) {
            this.$emit("blur", event);
        },
    },
};
</script>

<style scoped>
.input-box {
    flex: 1;
    width: 100%;
    height: 32rem;
    border-radius: 4rem;
    border: 1rem solid #ccc;
    padding: 0 10rem;
    display: flex;
    align-items: center;
}
.input {
    border: none;
    width: 100%;
    outline: none;
    height: 100%;
}
.input::-webkit-input-placeholder {
    font-size: 16rem;
}
.input:-moz-placeholder {
    font-size: 16rem;
}
.input:-ms-input-placeholder {
    font-size: 16rem;
}
.pitch {
    border: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pitch::before {
    content: "";
    display: inline-block;
    transform: translateY(-100%);
    width: 9rem;
    height: 3rem;
    border-left: 3rem solid green;
    border-bottom: 3rem solid green;
    transform: rotate(-45deg);
}
.close {
    width: 9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.close:before {
    content: "";
    width: 2rem;
    height: 15rem;
    margin-left: -1rem;
    background: red;
    transform: rotate(45deg);
}
.close:after {
    content: "";
    width: 2rem;
    height: 15rem;
    margin-left: -1rem;
    background: red;
    transform: rotate(-45deg);
}
</style>
