<template>
    <div class="common-container">
        <TitleBar></TitleBar>
        <div class="main-container">
            <div class="search-container TableSelectMain">
                <el-form class="table-select-main" :model="searchForm" label-position="left">
                    <el-row :gutter="15">
                        <!-- <el-col :span="4">
                            <el-form-item>
                                <el-input
                                    placeholder="请输入菜单名称"
                                    v-model="searchForm.name"
                                    class="max-width200"
                                ></el-input>
                            </el-form-item>
                        </el-col>-->
                        <!-- <el-col :span="4">
                            <el-form-item>
                                <el-input
                                    placeholder="请输入菜单路由"
                                    v-model="searchForm.router"
                                    class="max-width200"
                                ></el-input>
                            </el-form-item>
                        </el-col>-->
                        <!-- <el-col :span="4">
                            <el-form-item>
                                <el-button type="primary" round @click="querySearch">查询</el-button>
                                <el-button type="info" plain round @click="reset">重置</el-button>
                            </el-form-item>
                        </el-col>-->
                        <el-col :span="24">
                            <el-form-item>
                                <el-button
                                    type="primary"
                                    round
                                    icon="el-icon-plus"
                                    @click="showAddEditDialog(null)"
                                >新建</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div class="SearchTitle">
                已选择
                <span class="subject-color">{{tableSelection.length}}</span> 项
            </div>
            <div class="MaintenanceTable">
                <el-table
                    :data="tableData"
                    style="width: 100%;"
                    tooltip-effect="dark"
                    @selection-change="selectColumn"
                    class="OutTable"
                    border
                    row-key="id"
                    default-expand-all
                    :tree-props="{ children: 'appmenu', hasChildren: 'hasChildren' }"
                >
                    <el-table-column type="selection" align="center"></el-table-column>
                    <el-table-column prop="name" label="菜单名称"></el-table-column>
                    <el-table-column prop="url" label="菜单路由" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="code" label="菜单编码"></el-table-column>
                    <el-table-column prop="type" label="菜单类型">
                        <template slot-scope="scope">
                            <span>{{scope.row.type}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="description" label="描述"></el-table-column>
                </el-table>
            </div>
        </div>
        <!-- 添加与编辑弹层 -->
        <AddEditDialog ref="addEditDialog" @queryListData="queryListData"></AddEditDialog>
    </div>
</template>
<script>
import { toTree } from '@/apps/mobile/utils/util';
import TitleBar from '@/apps/mobile/components/common/TitleBar';
import AddEditDialog from './components/addEditDialog';
import { queryAllTree } from '@/apps/mobile/api/authority/index';
import { querySystemMenusList } from '@/apps/mobile/api/system-menu/index';
export default {
    components: {
        TitleBar,
        AddEditDialog,
    },
    data() {
        return {
            searchForm: {},
            tableData: [],
            listLoading: false,
            tableSelection: [],
        };
    },
    created() {
        this.queryListData();
    },
    methods: {
        queryListData() {
            this.listLoading = true;
            let obj = {
                pageNum: 0,
                pageSize: 1000,
            };
            querySystemMenusList(obj)
                .then(res => {
                    console.log(res);
                    if(res.statusCode == "10"){
                        this.$router.replace("/login");
                    }
                    this.tableData = toTree(res.data.records);
                    this.listLoading = false;
                })
                .catch(() => {
                    this.listLoading = false;
                });
        },
        selectColumn(selection) {
            this.tableSelection = selection;
        },
        showAddEditDialog(data) {
            this.$refs.addEditDialog.open();
        },
        reset() {
            this.searchForm = {};
            this.queryListData();
        },
        querySearch() {
            this.queryListData();
        },
    },
};
</script>
<style lang="stylus" scoped>
.TableSelectMain .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
    width: 95%;
}
</style>
