<template>
    <div class="selectInput">
        <template>
            <el-input
                :placeholder="placeholderText"
                class="input-with-select"
                @keyup.native.enter="keyup"
                :clearable="properties.clearable"
                v-model="value.input"
                :maxlength="properties.maxlength"
                @change="onChange"
            >
                <su-select
                    slot="prepend"
                    :data="data"
                    v-model="value.select"
                    :auto-please="false"
                    :placeholder="properties.selectPlaceholder"
                    style="width:100%"
                    @change="onChange"
                ></su-select>
            </el-input>
        </template>

    </div>
</template>
<script>
import seSelect from "../../../form/su-select";
import mixin from "./mixin";
export default {
    name: "selectInput",
    mixins: [mixin],
    components: {seSelect},
    data() {
        return {
            data: {},
            value: {},
            properties:{}
        };
    },
    computed:{
        'placeholderText':function(){
            let inputPlaceholder = typeof(this.properties.inputPlaceholder)=='string'?this.properties.inputPlaceholder:this.value.select?this.properties.inputPlaceholder[this.value.select]:''
            return inputPlaceholder
        }
    },

    created() {
        this.initProperties({
            inputPlaceholder: '请输入',
            selectPlaceholder: '请选择',
            clearable: true,
            maxlength: 180,
        });
    },
    methods: {
        init(value) {
            this.$nextTick(() => {
                if (value) {
                    this.value = {select: value.select || '', input: value.input || ''}
                } else {
                    this.value = {select: '', input: ''}
                }
                let vm = this;
                this.getData().then(function (d) {
                    vm.data = d;
                });
            })

        },
        onChange() {
            this.$emit("update:model", this.value);
            this.$emit("change", this.value);
        },
        keyup() {
            this.$emit("keyup");
        }
    }
};
</script>
<style lang="less" scoped>
.selectInput.label-none {
    /deep/ .input-with-select.el-input.el-input--mini {
        min-width: 312px;

        & > .el-input__inner {
            width: 197px;
        }

        .el-select {
            .el-input {
                width: 113px;

                .el-input__inner {
                    width: 113px;
                }
            }
        }
    }
}

.selectInput.label-left {
    /deep/ .input-with-select.el-input.el-input--mini {
        width: 226px;

        .el-input__inner {
            width: 113px;
        }

        .el-select {
            .el-input {
                width: 113px;
            }
        }
    }
}
</style>
