<template>
    <div class="elInput">
        <div v-if="isShow" class="hidetext" @dblclick="handleHide">
            <span v-if="type == 'input'"> {{ input ? input : "--" }}</span>
            <DictTag v-if="type == 'dict'" :options="dict" :value="input"> </DictTag>
            <span v-if="type == 'PartsCascade'"> {{ name ? name : "--" }}</span>
        </div>
        <template v-else>
            <el-input v-if="type == 'input'" v-model="input" ref="refInput" @blur="handleBlur"
                :placeholder="placeholder"></el-input>

            <el-select v-model="input" v-if="type == 'dict'" @change="handleBlur" :placeholder="placeholder" clearable>
                <el-option v-for="dict in dict" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
            <PartsCascade v-if="type == 'PartsCascade'"  @change="handleBlur"  :queryParams="{type:1}" v-model="input" placeholder="请选择工位" />
        </template>

    </div>
</template>
<script>
import PartsCascade from "@/views/system/parts/partsCascade";
export default {
    components:{PartsCascade},
    model: {
        prop: "value",
        event: "change"
    },
    props: {
        placeholder: {
            type: String,
            default: ""
        },
        value: {
            type: [String, Number],
            default: ""
        },
        type: {
            type: String,
            default: "input"//dict
        },
        dict: {
            type: Array,
            default: () => []
        },
    },
    watch: {
        value: {
            handler(val) {
                this.input = val
            },
            immediate: true
        }
    },
    data() {
        return {
            isShow: true,// true 展示文字
            input: ""
        }
    },
    methods: {
        handleBlur() {
            this.isShow = true;
            this.$emit('change', this.input)

        },
        handleHide() {
            this.isShow = false;
            this.$nextTick(() => {
                this.$refs.refInput.focus()
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.elInput {
    width: 120px;
    height: 2rem;
}

.hidetext {
    width: 100%;
    height: 100%;
}
</style>