<template>
    <div class="JNPF-common-layout">
        <div class="JNPF-common-layout-center  JNPF-flex-main">
            <el-row class="JNPF-common-search-box" :gutter="16">
                <el-form @submit.native.prevent>
                    <el-col :span="6">
                        <el-form-item :label="$t('common.keyword')">
                            <el-input v-model="listQuery.keyword" placeholder="请输入名称" clearable
                                @keyup.enter.native="search()" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="search()">
                                {{ $t("common.search") }}</el-button>
                            <el-button icon="el-icon-refresh-right"
                                @click="reset()">{{ $t("common.reset") }}
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <div class="JNPF-common-layout-main JNPF-flex-main">
                <div class="JNPF-common-head">
                    <el-button type="info" icon="el-icon-sort" @click="synchronousData">
                        同步
                    </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: "permission-organize",
    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;
                });
        },
        synchronousData() {
            this.loading = true;
            this.listLoading = true;
            syncOrganizeProjectSystemDict().then(res => {
                this.loading = false;
                this.listLoading = false;
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "同步成功"
                    });
                } else {
                    this.$message({
                        type: "同步失败",
                        message: res.msg
                    });
                }
            });
        },
        search() {
            const searchResults = this.findInTree(
                this.rawData,
                this.listQuery.keyword
            );
            this.treeList = searchResults;
        },
        // 树结构数据模糊搜索
        findInTree(treeData, keyword) {
            let results = [];
            function search(nodes) {
                for (let i = 0; i < nodes.length; i++) {
                    console.log(nodes[i]);
                    if (nodes[i].label.indexOf(keyword) > -1) {
                        results.push(nodes[i]);
                    } else {
                        if (nodes[i].children) {
                            search(nodes[i].children);
                        }
                    }
                }
            }

            search(treeData);
            return results;
        },
        // 树形列表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);
                }
            });
        },
        reset() {
            this.listQuery.keyword = "";
            this.treeList = this.rawData;
        },
        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>
