<template>
    <div>
        <el-select :style='"width:+"+width'  v-model='selectValue' :clearable='!isAll' :placeholder='placeholder' @change="selectHandler">
            <el-option v-for='item in selectArr' :key='item.value' :label='item.category' :value='item.category'></el-option>
        </el-select>
        <el-popover v-if="isAddBtn" title='添加新分类' v-model='visible' placement='top-start' width='400' trigger='click'>
            <div>
                <el-input placeholder='手动添加一个新分类' v-model='inputValue' clearable style='width:300px'></el-input>
                <el-button type='primary' size='mini' @click='addNew'>确定</el-button>
            </div>
            <el-button type='text' slot='reference'>添加新分类</el-button>
        </el-popover>
        
    </div>
</template>
<script>
export default {
    name: 'alarm-class',
    data() {
        return {
            selectValue: '', //下拉绑定value
            selectArr:[], //下拉数据的数组
            inputValue: '', //输入框中的value
            visible: false,
        }
    },
    props: {
        //绑定的下拉value值
        value: {
            default: ''
        },
        //下拉数据Arr
        options: {
            type: Array,
            default: function() {
                return [
                    {
                        category: '测试',
                        id: 'a'
                    }
                ]
            }
        },
        //是否显示添加按钮
        isAddBtn: {
            type: Boolean,
            dafault: true
        },
        //宽度
        width: {
            type: String,
            dafault:'200px'
        },
        //占位符
        placeholder: {
            type: String,
            default: '请选择报警分类'
        },
        //是否全部
        isAll: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        selectHandler() {
            if(this.selectValue == '报警分类:全部') {
                this.$emit('change', null)
            } else {
                this.$emit('change', this.selectValue)
            }            
        },
        addNew() {
            if(this.inputValue == '') {
                this.$message({
                    message: '请填写分类信息',
                    type: 'warning'
                });
                return false
            }
            if(this.inputValue.length > 5 ) {
                this.$message({
                    message: '长度不大于5位',
                    type: 'warning'
                });
                return false
            }
            this.$emit('add',this.inputValue)
        },
        addAll() {
            return {category: '报警分类:全部', id: ''}
        }
    },
    watch: {
        value: {
            immediate: true,
            handler(val) {
                this.selectValue = val
            }
        },
        options: {
            handler() {
                let arr = []
                if(this.isAll){
                    arr = [this.addAll(),...this.options]
                } else {
                    arr = this.options
            
                }   
                this.selectArr = arr;             
            }
        }
    }
}
</script>
<style>
</style>
