<template>
    <el-dialog :title="title" :visible.sync="show" width="400px" :before-close="doClose" :zIndex="2000" :modal="false"
        :close-on-click-modal="false" append-to-body v-dialogDrag>
        <el-input placeholder="输入名称进行过滤" v-model="filterText" clearable> </el-input>
        <ul class="listBox" v-if="filterList.length">
            <li class="listLi" v-for="item in filterList">
                <el-radio v-model="selected" :label="item"><span>{{item.name}}</span></el-radio>
            </li>
        </ul>
        <span class="tipLable" v-else> 暂无数据 </span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="doClose">取 消</el-button>
            <el-button type="primary" :loading="loading" @click="commit">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import { DeviceMenu } from '@/scripts/ConstDic';
    import { MapDeviceType, OperationEvent } from '@/scripts/ConstDic';

    export default {
        name: 'CmdNotice',
        data() {
            return {
                dialogShow: false,
                title: '',
                props: {
                    label: 'name'
                },
                sourceList: [],
                filterText: '',
                selected: '',
                loading: false,
            }
        },
        computed: {
            show() {
                return this.dialogShow;
            },
            filterList() {
                return this.sourceList.filter(p => p.name.indexOf(this.filterText) !== -1);
            },
        },
        methods: {
            doShow(obj) {
                this.dialogShow = true;
                this.title = obj.title;
                this.sourceList = obj.list;
                this.selected = '';
            },
            doClose() {
                this.dialogShow = false;
            },
            commit() {
                this.$emit('setDriver', this.selected);
                this.doClose();
            }
        }
    }

</script>

<style scoped lang="scss">
    /deep/ {
        .el-dialog__body {
            padding: 0px 20px;
        }
    }

    .listBox {
        margin: 0px;
        max-height: 270px;
        overflow-y: auto;
        padding-inline-start: 0px;
        width: 100%;

        .listLi {
            list-style: none;
            height: 30px;
            line-height: 30px;
        }
    }

    .tipLable {
        line-height: 33px;
    }
</style>