<template>
    <div class="JNPF-common-layout">
        <div class="JNPF-common-layout-center  JNPF-flex-main">
            <div class="JNPF-common-layout-main JNPF-flex-main">
                <div class="JNPF-common-head">
                    <el-button type="primary" icon="el-icon-plus" @click="addMenu">
                        新增
                    </el-button>
                    <div class="JNPF-common-head-right">
                        <el-tooltip effect="dark" content="展开" placement="top">
                            <el-link v-show="!expands" type="text"
                                icon="icon-ym icon-ym-btn-expand JNPF-common-head-icon"
                                :underline="false" @click="toggleExpand()" />
                        </el-tooltip>
                        <el-tooltip effect="dark" content="折叠" placement="top">
                            <el-link v-show="expands" type="text"
                                icon="icon-ym icon-ym-btn-collapse JNPF-common-head-icon"
                                :underline="false" @click="toggleExpand()" />
                        </el-tooltip>
                        <el-tooltip effect="dark" :content="$t('common.refresh')" placement="top">
                            <el-link icon="icon-ym icon-ym-Refresh JNPF-common-head-icon"
                                :underline="false" @click="initData()" />
                        </el-tooltip>
                    </div>
                </div>
                <JNPF-table v-loading="listLoading" :data="treeList" row-key="id"
                    v-if="refreshTable" :default-expand-all="expands"
                    :tree-props="{ children: 'children', hasChildren: '' }">
                    <el-table-column prop="label" label="名称"> </el-table-column>
                    <el-table-column prop="level" label="类型" align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.level == 1">厅局</span>
                            <span v-else-if="scope.row.level == 2">项目</span>
                            <span v-else-if="scope.row.level == 3">系统</span>
                        </template>
                    </el-table-column>
                </JNPF-table>
            </div>
        </div>
    </div>
</template>

<script>
import {
    findTreeList,
    syncOrganizeProjectSystemDict
} from "@/api/governmentCloud/dictionaryOfProjectSystemsForDepartmentsAndBureaus/dictionaryOfProjectSystemsForDepartmentsAndBureaus";
export default {
    name: "menuManagement",
    components: {},
    data() {
        return {
            listQuery: {
                keyword: ""
            },
            treeList: [],
            rawData: [],
            expands: true,
            refreshTable: true,
            btnLoading: false,
            listLoading: true,
            formVisible: false,
            depFormVisible: false,
            checkUserFormVisible: false
        };
    },
    created() {
        this.initData();
    },
    methods: {
        initData() {
            this.loading = true;
            this.listLoading = true;
            findTreeList(this.listQuery)
                .then(res => {
                    this.rawData = res.data;
                    this.treeList = res.data;
                    if (this.treeList.length > 0) this.setTableIndex(this.treeList);
                    this.listLoading = false;
                    this.btnLoading = false;
                })
                .catch(() => {
                    this.listLoading = false;
                    this.btnLoading = false;
                });
        },
        addMenu() {

        },
        // 树形列表index层级，实现方法（可复制直接调用）
        setTableIndex(arr, index) {
            arr.forEach((item, key) => {
                item.index = key + 1;
                if (index) {
                    item.index = index + 1;
                }
                if (item.children) {
                    this.setTableIndex(item.children, item.index);
                }
            });
        },
        toggleExpand() {
            this.refreshTable = false;
            this.expands = !this.expands;
            this.$nextTick(() => {
                this.refreshTable = true;
            });
        }
    }
};
</script>
<style lang="scss" scoped>
.table-icon {
    vertical-align: bottom;
    font-size: 16px;
    margin-right: 6px;
    line-height: 23px;
}
</style>
