<template>
    <div class="JNPF-common-layout">
        <div class="JNPF-common-layout-left">
            <div class="JNPF-common-title">
                <h2>厅局</h2>
                <span class="options">
                    <el-dropdown>
                        <el-link icon="icon-ym icon-ym-mpMenu" :underline="false" />
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item
                                @click.native="getOrganizeList()">刷新数据</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </span>
            </div>
            <div class="JNPF-common-tree-search-box">
                <el-input placeholder="输入关键字" v-model="filterText" suffix-icon="el-icon-search"
                    clearable />
            </div>
            <el-scrollbar class="JNPF-common-el-tree-scrollbar" v-loading="treeLoading">
                <el-tree ref="treeBox" :data="treeData" :props="defaultProps"
                    :default-expand-all="expands" highlight-current :expand-on-click-node="false"
                    node-key="id" @node-click="handleNodeClick" class="JNPF-common-el-tree"
                    v-if="refreshTree" :filter-node-method="filterNode">
                    <span class="custom-tree-node" slot-scope="{ data }" :title="data.label">
                        <i :class="data.icon" />
                        <span class="text" :title="data.label">{{ data.label }}</span>
                    </span>
                </el-tree>
            </el-scrollbar>
        </div>
        <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="系统名称">
                            <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="primary" @click="submit()">保存修改</el-button>
                    <div class="JNPF-common-head-right">
                        <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="tableData">
                    <el-table-column type="selection" width="55" align="center">
                    </el-table-column>
                    <el-table-column prop="label" label="系统名称" />
                    <el-table-column prop="label" label="是否私有" width="200">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.notVisible" active-color="#1890ff"
                                inactive-color="#c0c4cc">
                            </el-switch>

                            <span>{{ scope.row.notVisible ? "是" : "否" }}</span>
                        </template>
                    </el-table-column>
                </JNPF-table>
            </div>
        </div>
    </div>
</template>

<script>
import {
    findOrganizeList,
    findSystemListByOrganizeId,
    updateRelationList
} from "@/api/governmentCloud/bureauSystemManage/bureauSystemManage";

export default {
    name: "permission-position",
    data() {
        return {
            treeData: [],
            tableData: [],
            treeLoading: false,
            listLoading: false,
            authorizeFormVisible: false,
            userRelationListVisible: false,
            // organizeIdTree: [],
            listQuery: {
                organizeId: "",
                keyword: "",
                currentPage: 1,
                pageSize: 20
            },
            defaultProps: {
                children: "children",
                label: "fullName"
            },
            total: 0,
            formVisible: false,
            expands: true,
            refreshTree: true,
            filterText: "",
            multipleSelection: null
        };
    },
    watch: {
        filterText(val) {
            console.log(val);
            this.$refs.treeBox.filter(val);
        }
    },
    created() {
        this.getOrganizeList(true);
    },
    methods: {
        //保存修改
        submit() {
            console.log(this.multipleSelection);
            let data = [];
            this.multipleSelection.map(item => {
                let obj = {
                    itsmOrganizeId: this.listQuery.organizeId || this.treeData[0].id,
                    itsmSystemId: item.id,
                    itsmSystemData: item.data,
                    visible: item.notVisible ? "0" : "1"
                };
                data.push(obj);
            });

            updateRelationList(data).then(res => {
                console.log(res);
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: res.msg,
                        duration: 1000
                    });
                    this.initData();
                }
            });
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            console.log(selection);
            this.multipleSelection = selection;
            this.$nextTick(() => {
                // this.changePageCoreRecordData();
            });
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        getOrganizeList(isInit) {
            this.filterText = "";
            this.treeLoading = true;
            findOrganizeList()
                .then(res => {
                    this.treeData = res.data;
                    console.log(this.treeData)

                    this.$nextTick(() => {
                        this.treeLoading = false;
                        if (isInit) this.initData();
                    });
                })
                .catch(() => {
                    this.treeLoading = false;
                });
        },
        initData() {
            this.listLoading = true;
            let organizeId = "";
            if (this.listQuery.organizeId) {
                organizeId = this.listQuery.organizeId;
            } else {
                organizeId = this.treeData[0].id;
            }
            findSystemListByOrganizeId(organizeId, this.listQuery.keyword || "")
                .then(res => {
                    this.listLoading = false;
                    res.data.map(item => {
                        item.isPrivate = false;
                    });
                    this.tableData = res.data;
                })
                .catch(() => {
                    this.listLoading = false;
                });
        },
        search() {
            this.listQuery = {
                ...this.listQuery,
                currentPage: 1,
                pageSize: 20
            };
            this.initData();
        },
        reset() {
            this.listQuery.keyword = "";
            this.search();
        },
        handleNodeClick(data, node) {
            console.log(data);
            if (this.listQuery.organizeId === data.id) return;
            this.listQuery.organizeId = data.id;
            this.reset();
        }
    }
};
</script>
