<template>
    <div class="select-unit-box">
        <el-autocomplete
            style="width:100%"
            v-model="unit"
            :fetch-suggestions="querySearch"
            :disabled="disabled"
            placeholder="请输入单位"
            @select="handleChange"
            @change="handleChange"
            @blur.stop="handleChange"
        >
        </el-autocomplete>
    </div>
</template>

<script>
import { unitArr } from '@/utils/defaultOptions';
export default {
    name:"selectUnit",
    props:{
        value:{
            type:String,
            default:''
        },
        disabled:{
            type:Boolean,
            default:false
        }
    },
    watch:{
        value(){
            this.unit=this.value
        }
    },
    data() {
        return {
            unit:this.value,
            unitArr: [],
        }
    },
    mounted(){
        this.unitArr=unitArr.map(item=>{
            return {value:item}
        })
    },
    methods:{
        querySearch(queryString, cb) {
            const unitArr = this.unitArr;
            const results = queryString ? unitArr.filter(this.createFilter(queryString)) : unitArr;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        createFilter(queryString) {
            return (unit) => {
                return (unit.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
            };
        },
        handleChange(){
            console.log('单位',this.unit);
            this.$emit('input',this.unit)
        }
    }
}
</script>

<style lang="scss">
.select-unit-box{
    width: 100%;
    .el-input{
        width: 100% !important;
    }
}
</style>