<template>
    <div class="app-container">
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    icon="el-icon-plus"
                    size="mini"
                    @click="handleAdd"
                >新增</el-button>
            </el-col>
        </el-row>

        <el-table
            v-loading="loading"
            :data="sysAuthList"
            row-key="deptId"
            default-expand-all
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
            <el-table-column prop="id" label="ID" width="50" />
            <el-table-column prop="account" label="账号" width="160" />
            <el-table-column prop="createTime" label="创建时间" width="160" align="center"/>
            <el-table-column prop="remark" label="备注" width="200" show-overflow-tooltip align="center"/>
            <el-table-column prop="enabled" label="Enabled?" width="100" align="center">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.enabled" disabled></el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="authModules" label="所属服务">
                <template slot-scope="scope">
                    <template v-if="scope.row.authModules && scope.row.authModules.length > 0">
                        <span v-for="(item, index) in scope.row.authModules" :key="item.moduleKey" style="margin-right: 8px"><el-tag size="mini" :type="tagTypes[index % 5]" :disable-transitions="true">{{item.moduleName}}</el-tag></span>
                    </template>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                align="center"
                width="200"
                class-name="small-padding fixed-width"
            >
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-edit"
                        @click="handleUpdate(scope.row)"
                    >修改</el-button>
                    <el-button
                        size="mini"
                        type="text"
                        icon="el-icon-delete"
                        @click="handleDelete(scope.row)"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>


        <!-- 添加或修改部门对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="380px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="账号" prop="account">
                    <el-input v-model="form.account" placeholder="输入账号" />
                </el-form-item>
                <el-form-item label="Enable?" prop="enabled">
                    <el-switch v-model="form.enabled"></el-switch>
                </el-form-item>
                <el-form-item label="服务列表" prop="authModules">
                    <el-select v-model="form.authModules" clearable placeholder="请选择" multiple>
                        <el-option
                            v-for="item in authModulesList"
                            :key="item.moduleKey"
                            :label="item.moduleName"
                            :value="item.moduleKey">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input type="textarea" :rows="2" placeholder="请输入备注" v-model="form.remark"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getSysAuthAll, addSysAuth, updateSysAuth, delSysAuth } from "@/api/admin/serverTge"
import { getModuleAll } from "@/api/admin/modular"
export default {
    data () {
        return {
            tagTypes: ['success', 'danger', 'warning', 'info', ''],
            loading: false,
            sysAuthList: [],
            title: '',
            open: false,
            form: { enabled: true },
            rules: {
                account: [{ required: true, message: "请输入账号", trigger: "blur" },],
                enabled: [{ required: true, message: "请选择状态", trigger: "blur" },],
            },
            authModulesList: []
        }
    },
    created() {
        this.getModuleAllHandle()
        this.getList()
    },
    methods: {
        getModuleAllHandle() {
            getModuleAll().then(res => {
                this.authModulesList = res.data
            })
        },
        getList() {
            this.loading = true
            getSysAuthAll().then(res => {
                this.loading = false
                this.sysAuthList = res.data
            }).catch(() => this.loading = false)
        },
        handleAdd() {
            this.form = { enabled: true }
            this.title = '新增'
            this.open = true
        },
        handleDelete(row) {
            this.$confirm(`是否删除账号为 "${row.account}" 的数据项`, "警告", { 
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => delSysAuth(row.id)).then(() => {
                this.getList();
                this.msgSuccess("删除成功");
            }).catch((err) => {
                console.error(err)
            })
        },
        handleUpdate(row) {
            let { account, authModules, enabled, id } = row
            let authModuleIds = authModules.map(item => item.moduleKey)
            this.form = { enabled, authAccountId: id, account, authModules: authModuleIds }
            this.title = '修改' + account
            this.open = true
        },
        submitForm() {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    if (this.form.authAccountId != undefined) {
                        updateSysAuth(this.form).then((response) => {
                            if (response.code === 200) {
                                this.msgSuccess("修改成功");
                                this.open = false;
                                this.getList();
                            }
                        });
                    } else {
                        addSysAuth(this.form).then((response) => {
                            if (response.code === 200) {
                                this.msgSuccess("新增成功");
                                this.open = false;
                                this.getList();
                            }
                        });
                    }
                }
            });
        },
        cancel() {
            this.title = ''
            this.open = false
            this.resetForm("form");
        }
    }
}
</script>