<template>
    <transition name="el-zoom-in-center">
        <div class="JNPF-preview-main user-form">
            <div class="JNPF-common-page-header">
                <el-page-header @back="goBack" content="编辑系统权限" />
                <div class="options">
                    <el-button type="primary" :loading="btnLoading" @click="handleConfirm()">
                        {{ $t("common.confirmButton") }}</el-button>
                    <el-button @click="goBack">{{ $t("common.cancelButton") }}
                    </el-button>
                </div>
            </div>
            <div class="main">
                <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="init()">刷新数据</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.systemName" 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="#c0c4cc"
                                        inactive-color="#1890ff">
                                    </el-switch>

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

<script>
import {
    findAllNotVisibleOrganizeList,
    findAllNotVisibleSystemListByOrganizeId,
    updateRelationList
} from "@/api/governmentCloud/officeSystemPermissions/officeSystemPermissions";

export default {
    data() {
        return {
            visible: false,
            btnLoading: false,
            listLoading: true,
            treeLoading: false,
            organizeId: null,
            filterText: "",
            userId: null,
            userMobilePhone: null,

            refreshTree: true,
            treeData: [],
            defaultProps: {
                children: "children",
                label: "fullName"
            },
            expands: true,
            listQuery: {
                organizeId: "",
                systemName: ""
            },
            tableData: [],
            multipleSelection: null
        };
    },
    watch: {
        filterText(val) {
            console.log(val);
            this.$refs.treeBox.filter(val);
        }
    },
    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,
                    visible: item.notVisible ? "0" : "1",
                    userId: this.userId,
                    userMobile: this.userMobilePhone,
                    itsmSystemData: item.data
                };
                data.push(obj);
            });

            updateRelationList(data, this.userId).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;
        },
        handleNodeClick(data, node) {
            console.log(data);
            if (this.listQuery.organizeId === data.id) return;
            this.listQuery.organizeId = data.id;
            this.reset();
        },
        search() {
            this.initData();
        },
        reset() {
            this.listQuery.systemName = "";
            this.search();
        },
        init(row) {
            console.log(row)

            this.visible = true;
            this.filterText = "";
            this.treeLoading = true;
            this.userId = row.id;
            this.userMobilePhone = row.mobilePhone;
            findAllNotVisibleOrganizeList()
                .then(res => {
                    this.treeData = res.data;
                    this.$nextTick(() => {
                        this.treeLoading = false;
                        if (this.treeData.length) {
                            this.initData();
                        } else {
                            this.listLoading = false
                        }
                    });
                })
                .catch(() => {
                    this.treeLoading = false;
                });
        },
        initData() {
            this.listLoading = true;
            let organizeId = "";
            if (this.listQuery.organizeId) {
                organizeId = this.listQuery.organizeId;
            } else {
                organizeId = this.treeData[0].id;
            }
            findAllNotVisibleSystemListByOrganizeId(
                organizeId,
                this.listQuery.systemName || "",
                this.userId
            )
                .then(res => {
                    this.listLoading = false;
                    this.tableData = res.data;
                })
                .catch(() => {
                    this.listLoading = false;
                });
        },
        goBack() {
            this.$emit("close");
        },
        handleConfirm() { }
    }
};
</script>
<style lang="scss" scoped>
.user-form {
    .main {
        padding: 10px 0px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #e3e6ec;
    }
    >>> .el-select,
    >>> .el-cascader,
    >>> .el-date-editor {
        width: 100%;
    }
    >>> .avatar-uploader {
        .el-upload {
            border: 1px dashed #dcdfe6;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .el-upload:hover {
            border-color: #409eff;
        }
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 130px;
        height: 130px;
        line-height: 130px;
        text-align: center;
    }
    .avatar {
        width: 130px;
        height: 130px;
        display: block;
    }
}
</style>
