<!--将lj-list-tree树形控件封装成选择浮窗-->
<!--events-->
    <!--确认按钮点击item-selected，参数(value)-->
<!--methods-->
    <!--显示浮窗open()-->
    <!--隐藏浮窗close()-->
<template>
    <mu-dialog :open="dialogOpen" @close="close" scrollable  width="80%">
        <lj-list-tree :data-list="dataList" :key-name="idField" :value-name="nameField" @item-clicked="itemClick"/>
        <mu-button color="primary" @click="selected" slot="actions">
            {{selectedItem[buttonField] ? selectedItem[buttonField] : '取消'}}
        </mu-button>
    </mu-dialog>
</template>
<script>
    import LjListTree from "components/lj-list-tree";

    export default {
        name: "lj-list-tree-choose-common",
        components: {LjListTree},
        props: {
            // 行显示的文字的来源字段
            nameField: {
                type: String,
                default: ""
            },
            // 行点击时按钮显示的数值的来源字段
            buttonField: {
                type: String,
                default: ""
            },
            // 数据对象的id字段
            idField: {
                type: String,
                default: ""
            },
            // 表示“全部”的额外数据对象
            allItem: {
                type: Object
            },
            // 原始数据数组
            rawList: {
                type: Array
            }
        },
        data() {
            return {
                dialogOpen: false,
                selectedItem: {},
            }
        },
        computed: {
            dataList() {
                let list = [];
                if (this.allItem) {
                    list.push(this.allItem);
                }
                if (this.rawList) {
                    if (this.rawList.length) {
                        list.push.apply(list, this.rawList);
                    }
                }
                return list;
            }
        },
        methods: {
            init() {
                this.selectedItem = {};
            },
            open() {
                this.dialogOpen = true;
            },
            close() {
                this.dialogOpen = false;
            },
            selected() {
                if (this.selectedItem) {
                    this.$emit("item-selected", this.selectedItem);
                }
                this.close();
            },
            itemClick(item) {
                this.selectedItem = item;
            }
        }
    }
</script>