<template>
    <div class="treeTablePageTemplate" ref="treeTablePageTemplate">
        <mu-row>
                <mu-split-panel
                    v-model="splitConfig.offset"
                    :min="splitConfig.min"
                    :max="splitConfig.max"
                    :vertical-auto-size="splitConfig.verticalAutoSize">
                    <template v-slot:left>
                        <mu-col>
                            <!-- 左侧树结构 -->
                            <div class="tree-page" :style="{padding: treeConfig.padding}">
                                <mu-tree :config="treeConfig" v-model="treeData" :extension="extensionTree"></mu-tree>
                            </div>
                            <!-- 左侧树结构 -->
                        </mu-col>
                    </template>
                    <template v-slot:right>
                        <mu-col>
                            <!-- 右侧表格结构 -->
                            <div class="table-page">
                                <div class="wrapper" :style="{padding: tableConfig.padding}">
                                    <div class="title">{{ tableConfig.title }}</div>
                                    <div class="filter-bar">
                                        <!-- toolBar -->
                                    <mu-tool-bar v-model="searchParams" :config="toolbarConfig"
                                                    @on-search-change="onSearchChange" :extension="extensionFilter">
                                    </mu-tool-bar>
                                    </div>
                                    <mu-table-simple class="tableWrapper" ref="tableWrapper" v-model="tableListEdit" :config="tableConfig" :extension="extensionTable">
                                        <mu-table-column :config="{ type:'operation', 
                                                        label: tableConfig.operates.label ? tableConfig.operates.label : '操作', 
                                                        fixed: tableConfig.operates.fixed ? tableConfig.operates.fixed : 'right', 
                                                        width: tableConfig.operates.operateWidth ? tableConfig.operates.operateWidth : '200', 
                                                        align: tableConfig.operates.align ? tableConfig.operates.align : 'center'}">
                                            <template slot-scope="{row, column, $index}">
                                                <!-- 行内编辑事件 -->
                                                <mu-tool-bar v-model="searchParams" :config="getTableOperatesConfig(tableConfig.operates, {row, column, $index} )">
                                                </mu-tool-bar>
                                            </template>
                                        </mu-table-column>
                                    </mu-table-simple>
                                    <mu-pagination :page.sync="searchParams.page"
                                                :page-size.sync="searchParams.limit" :total="PaginationConfig.total"
                                                :config="PaginationConfig" @on-change="pageChange"/>
                                </div>
                            </div>
                            <!-- 右侧表格结构 -->
                        </mu-col>
                    </template>
                </mu-split-panel>
        </mu-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableListEdit: [],
            addStatus: false,
            editStatus: false,
            handleSource: undefined,
            handleEdit: undefined,
            setNodeLevel: undefined,
            setDisabled: undefined,
            handleTable: {},
            handleSource: undefined,
            handleEdit: undefined,
        }
    },
    props: {
        splitConfig: {
            type: Object,
            default() {
                return {
                    offset: 0.2,
                    min: "200px",
                    verticalAutoSize: false
                }
            }
        },
        treeData: {
            type: Array,
            default() {
                return []
            }
        },
        treeConfig: {
            type: Object,
            default() {
                return {}
            }
        },
        tableData: {
            type: Array,
            default() {
                return []
            }
        },
        tableConfig: {
            type: Object,
            default() {
                return {}
            }
        },
        searchParams: {
            type: Object,
            default() {
                return {
                    page: 1,
                    limit: 5
                }
            }
        },
        toolbarConfig: {
            type: Object,
            default() {
                return {}
            }
        },
        PaginationConfig: {
            type: Object,
            default() {
                return {}
            }      
        }
    },
    watch: {
        tableData: {
            handler(val, oldVal){
                this.tableListEdit = val
            },
            deep: true
        }
    },
    mounted() {
      this.tableListEdit = JSON.parse(JSON.stringify(this.tableData));
      this.handleSource && this.handleSource('load', {}, () => {
      });
      this.handleTable.onHandleData && this.handleTable.onHandleData('load', this.searchParams, () => {
      });

      if(this.tableConfig.autoSize) {
        let top = 0, bottom = 0, tableContainer, min = 250, tableHeight;
        this.$nextTick(() => {
            const template = this.$refs.treeTablePageTemplate;
            tableContainer = template.getElementsByClassName("tableWrapper")[0];
            const height = template.offsetHeight;
            const clientHeight = document.documentElement.clientHeight;
            top = tableContainer.getBoundingClientRect().top;
            bottom = clientHeight - tableContainer.getBoundingClientRect().bottom;
            tableHeight = tableContainer.offsetHeight;
            // console.log(top, bottom, height, tableHeight)
        })
        window.onresize = () => {
            const currentClientHeight = document.documentElement.clientHeight;
            let currentTableHeight = currentClientHeight - top - bottom;
            if (currentTableHeight < min || tableHeight < min) {
                // 缩放高度 或者 当前表格高度小于最小高度时
                currentTableHeight = min
            }
            tableContainer.getElementsByClassName("el-table")[0].style.height = currentTableHeight + "px";
            tableContainer.getElementsByClassName("el-table")[0].style.overflow = "auto";
            // console.log(currentTableHeight)
        }  
      }

    },
    methods: {
        getTableOperatesConfig(config, scoped) {
            config['scoped'] = scoped
            return config;
        },
        onSearchChange(params, key) {
            // console.log(params, key)
            // if (key === 'searchInput') {
            // this.tableListEdit = JSON.parse(JSON.stringify(this.tableData.filter((item) => item.name && item.name.indexOf(this.searchParams.searchInput) > -1)));
            //     console.log('查询数据', this.searchParams);
            // }
            this.$emit('search-change', {
                params, key
            })
        },
        /**
       * 扩展的table函数
       * @param table
       * @param value
       */
        extensionTable(table, value) {
            this.handleTable = value;
            this.$emit("get-table-node", table)
        },
        pageChange(value) {
            this.$emit('page-change', value)
        },
        handleData(type, data, callback) {
            this.handleTable.onHandleData(type, data, () => {
            this.addStatus = this.handleTable.getAddStatus();
            this.editStatus = this.handleTable.getEditStatus();
            this.setDisabled({
                add: !!this.addStatus || !!this.addStatus,
                reload: !!this.addStatus || !!this.addStatus
            });
            });
        },
        extensionFilter(val) {
            this.setFieldsValue = val.setFieldsValue;
            this.setReset = val.setReset;
            this.reinitialize = val.reinitialize;
            this.setDisabled = val.setDisabled;
        },
        /**
       * 展开编辑
       * @params type 编辑类型
       */
        showEdit(type, data) {
            this.handleTable.onHandleEdit(type, data);
            this.editStatus = this.handleTable.getEditStatus();
            this.setDisabled({
            add: !!this.addStatus || !!this.editStatus,
            reload: !!this.addStatus || !!this.editStatus
            });
        },
        showAdd(type, data) {
            this.handleTable.onHandleAdd(type, data);
            this.addStatus = this.handleTable.getAddStatus();
            this.setDisabled({
            add: !!this.addStatus || !!this.editStatus,
            reload: !!this.addStatus || !!this.editStatus
            });
        },
        extensionTree(tree, value) {
            this.handleSource = value.onHandleData;
            this.handleEdit = value.onShowEdit;
        },
    }
}
</script>

<style lang="scss">
.treeTablePageTemplate{
        height: 100%;
        >.el-row {
            width: 100%;
            height: 100%;
        }
        .tree-page{
            // padding: 15px;
            .tree-title {
                margin-bottom: 20px;
                overflow: hidden;
                span {
                    font-size: 16px;
                    color: #333;
                    float: left;
                }
                i {
                    float: right;
                    font-size: 16px;
                    color: #1989fa;
                }
            }          
        }
        .table-page{
            width: 100%;
            .wrapper {
                // padding: 15px;
                >.title {
                    width: 100%;
                    padding: 5px 0;
                    font-size: 18px;
                    text-align: left;
                }
                .tableWrapper {
                    margin-bottom: 20px;
                }
            }
        }

    }
</style>