<template>
    <Modal ref="modal"
        v-model="opened"
        scrollable
        :width="tableView.width||'80VW'"
        :footer-hide="!footerEnable"
        @on-visible-change="onVisibleChange">
        <div slot="header">
            <slot name="header">
                <span class="title">{{ tableView.name }}</span>
                <span class="description">{{ tableView.description }}</span>
            </slot>
        </div>
        <div class="ivu-ml-8 ivu-mr-8">
            <view-table ref="table"
                :view-code="viewCode"
                :static="static"
                :filter="tableFilter"
                :setting-enable="settingEnable"
                :select-enable="selectEnable"
                :autoLoad="false"
                :selectFunc="selectFunc"
                :tree-enable="treeEnable"
                :tree-load="treeLoad"
                :has-children="hasChildren"
                @create="create"
                @edit="edit"
                @on-ready="onReady"
                @on-load-data="onLoadData"
                @after-init="afterInit">
                <template slot-scope="{ filter }"
                    slot="filter">
                    <slot name="filter"
                        :table="$refs.table"
                        :filter="filter"
                        :param="param">
                    </slot>
                </template>
                <template slot-scope="{ row, index }"
                    slot="command">
                    <slot name="command"
                        :row="row"
                        :index="index">
                    </slot>
                </template>
            </view-table>
        </div>
        <div slot="footer">
            <slot name="footer">
            </slot>
        </div>
    </Modal>
</template>
<script>
    import mixinPage from '../../mixins/page';

    export default {
        mixins: [mixinPage],
        components: {},
        data() {
            return {
                opened: false,
                tableView: {},
                param: {},
                tableFilter: {}
            };
        },
        created() {},
        props: {
            // 视图代码
            viewCode: {
                type: String
            },
            // 是否静态数据
            static: {
                type: Boolean,
                default: false
            },
            // 筛选
            filter: {
                type: Object,
                default() {
                    return {};
                }
            },
            // 显示底栏
            footerEnable: {
                type: Boolean,
                default: false
            },
            // 自动加载
            autoLoad: {
                type: Boolean,
                default: true
            },
            // 是否允许点击遮罩层关闭
            maskClosable: {
                type: Boolean,
                default: true
            },
            // 是否允许配置界面
            settingEnable: {
                type: Boolean,
                default: true
            },
            // 是否允许选择
            selectEnable: {
                type: Boolean,
                default: false
            },
            // 选中方法
            selectFunc: {
                type: Function
            },
            // 是否允许树展开
            treeEnable: {
                type: Boolean,
                default: false
            },
            // 树展开动作
            treeLoad: {
                type: Function
            },
            // 树包含子项
            hasChildren: {
                type: Function
            }
        },
        computed: {
            data() {
                return this.$refs.table.data;
            }
        },
        methods: {
            // 初始化
            async init(viewCode, callback) {
                await this.$refs.table.init(viewCode);

                if (typeof callback === 'function') {
                    callback();
                }
            },
            // 打开
            open(param) {
                this.opened = true;
                this.param = param;
                // for (let key in this.filter) {
                //     delete this.filter[key];
                // }

                this.tableFilter = {
                    ...this.filter,
                    ...this.param
                };

                setTimeout(() => {
                    this.$refs.table.loadData();
                });
            },
            // 关闭
            close() {
                this.opened = false;
            },
            onReady(tableView) {
                this.tableView = tableView;
            },
            onVisibleChange(show) {
                // 关闭时清空数据
                if (!show) {
                    this.$refs.table.data = [];
                }
                this.$emit('on-visible-change', show);
            },
            // 加载数据
            loadData(staticData) {
                this.$refs.table.loadData(staticData);
            },
            onLoadData() {
                this.$emit('on-load-data');
            },
            // 创建新项
            create(row) {
                this.$emit('create', this.param);
            },
            // 编辑项
            edit(row) {
                this.$emit('edit', row);
            },
            // 完成初始化
            afterInit() {
                this.$emit('after-init');
            },
            // 删除项
            remove(row) {
                this.$refs.table.remove(row);
            },
            // 获取选中项
            getSelected() {
                return this.$refs.table.getSelected();
            },
            // 设置选中项
            setSelected(selected) {
                this.$refs.table.setSelected(selected);
            },
            selectAllCancel() {
                this.setSelected([]);
            }
        }
    };
</script>
