<template>
    <div>
        <!--    面包屑导航区    -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>基础管理</el-breadcrumb-item>
            <el-breadcrumb-item>部门管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <!--    搜索    -->
            <el-form :inline="true" :model="queryDepartmentParam">
                <el-form-item label="部门名称">
                    <el-input placeholder="请输入部门名称" v-model="queryDepartmentParam.name" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="queryDepartmentByPage">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="showCreateDialog">新增项目配置</el-button>
                </el-form-item>
            </el-form>
            <!--    列表    -->
            <el-table :data="departmentTable" style="{width: 100%}"
                      border :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
                <el-table-column type="index"/>
                <el-table-column prop="name" label="部门名称" min-width="200px"/>
                <el-table-column prop="leader" label="部门负责人"/>
                <el-table-column prop="channel" label="部门所属渠道"/>
                <el-table-column label="操作" align="center" min-width="150px">
                    <template v-slot="{row}">
                        <el-tooltip
                            effect="dark"
                            content="修改"
                            placement="top"
                            :enterable="false">
                            <el-button type="primary" icon="el-icon-edit" size="mini" circle @click="showEditDialog(row.id)"></el-button>
                        </el-tooltip>
                        <el-tooltip
                            effect="dark"
                            content="删除"
                            placement="top"
                            :enterable="false">
                            <el-button type="danger" icon="el-icon-delete" size="mini" circle @click="removeById(row.id)"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!--    分页    -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 20, 50, 100, 200]"
                :page-size="queryDepartmentParam.size"
                :current-page="queryDepartmentParam.page"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
        <!--    新增项目的Dialog    -->
        <el-dialog
            title="新增项目配置"
            :visible.sync="createDialogVisible"
            width="50%"
            @close="createDialogClosed">
            <el-form
                :model="createDepartmentForm"
                :rules="createDepartmentFormRules"
                ref="createDepartmentFormRef"
                label-width="170px">
                <el-form-item label="部门名称" prop="name">
                    <el-input v-model.trim="createDepartmentForm.name"/>
                </el-form-item>
                <el-form-item label="部门负责人">
                    <el-input v-model.trim="createDepartmentForm.leader"/>
                </el-form-item>
                <el-form-item label="渠道" prop="channel">
                    <el-input v-model.trim="createDepartmentForm.channel"/>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="createDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="createDepartment">确 定</el-button>
            </span>
        </el-dialog>
        <!--    编辑项目的Dialog    -->
        <el-dialog
            title="修改项目"
            :visible.sync="editDialogVisible"
            width="50%"
            @close="editDialogClosed">
            <el-form
                :model="editDepartmentForm"
                :rules="editDepartmentFormRules"
                ref="editDepartmentFormRef"
                label-width="170px">
                <el-form-item label="项目名称" prop="name">
                    <el-input v-model.trim="editDepartmentForm.name"/>
                </el-form-item>
                <el-form-item label="部门负责人">
                    <el-input v-model.trim="editDepartmentForm.leader"/>
                </el-form-item>
                <el-form-item label="渠道" prop="channel">
                    <el-input v-model.trim="editDepartmentForm.channel"/>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editDepartment">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
export default {
    name: "DepartmentPage",
    data() {
        return {
            // 分页查询参数
            queryDepartmentParam: {
                name: null,
                page: 1,
                size: 10
            },
            total: 0,
            departmentTable: [],

            // 新增表单是否显示
            createDialogVisible: false,
            // 新增表单默认数据
            createDepartmentForm: {},
            // 新增表单校验
            createDepartmentFormRules: {
                name: [
                    {required: true, message: '请输入部门名称', trigger: 'blur'},
                ],
                channel: [
                    {required: true, message: '请输入所属渠道', trigger: 'blur'},
                ]
            },

            // 编辑表单是否显示
            editDialogVisible: false,
            // 编辑表单默认数据
            editDepartmentForm: {},
            // 编辑表单校验
            editDepartmentFormRules: {
                name: [
                    {required: true, message: '请输入部门名称', trigger: 'blur'},
                ],
                channel: [
                    {required: true, message: '请输入所属渠道', trigger: 'blur'},
                ]
            },
        }
    },
    methods: {
        // 分页查询
        async queryDepartmentByPage() {
            const res = await this.$api.postForm("/sonar/department/page", this.queryDepartmentParam)
            if (res.code !== 200 || res.data === null) return this.$message.error(res.message)
            this.departmentTable = res.data.records
            this.total = res.data.total
        },
        // 修改页大小
        handleSizeChange(newSize) {
            this.queryDepartmentParam.size = newSize
            this.queryDepartmentByPage()
        },
        // 修改页码
        handleCurrentChange(newPage) {
            this.queryDepartmentParam.page = newPage
            this.queryDepartmentByPage()
        },
        // 根据id删除项目
        async removeById(id) {
            const confirmResult = await this.$confirm(
                '此操作将永久删除该记录, 是否继续?',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            ).catch((err) => err)

            if (confirmResult === 'cancel') {
                return this.$message.info('已取消删除！')
            }
            // 确认删除时, 调用接口
            if (confirmResult === 'confirm') {
                const res = await this.$api.postForm("/sonar/department/removeById", {id: id})
                if (res.code !== 200 || res.data === null) return this.$message.error(res.message)
                this.$message.success('项目删除成功！')
                await this.queryDepartmentByPage()
            }
        },

        // 显示新增Dialog
        async showCreateDialog() {
            this.createDialogVisible = true
        },
        // 新增Dialog关闭时重置表单
        createDialogClosed() {
            this.$refs.createDepartmentFormRef.resetFields()
        },
        // 新增项目配置
        createDepartment() {
            this.$refs.createDepartmentFormRef.validate(async (valid) => {
                if (!valid) return
                // 校验通过, 先查询该项目是否存在
                const queryRes = await this.$api.postForm("/sonar/department/getByNameAndChannel",
                    {
                        name: this.createDepartmentForm.name,
                        channel: this.createDepartmentForm.channel
                    }
                )
                if (queryRes.data !== null) {
                    return this.$message.error("项目已经存在, 请确认")
                }
                // 新增项目不存在, 则保存
                const res = await this.$api.post(
                    "/sonar/department/save",
                    this.createDepartmentForm
                )
                if (res.code !== 200) return this.$message.error('新增项目信息失败！')
                this.createDialogVisible = false
                await this.queryDepartmentByPage()
                this.$message.success('新增项目信息成功！')
            })
        },

        // 显示编辑Dialog
        async showEditDialog(id) {
            const res = await this.$api.get(`/sonar/department/getById?id=${id}`)
            if (res.code !== 200 || res.data === null) return this.$message.error(res.message)
            this.editDepartmentForm = res.data
            this.editDialogVisible = true
        },
        // 编辑Dialog关闭时重置表单
        editDialogClosed() {
            this.$refs.editDepartmentFormRef.resetFields()
        },
        // 编辑项目配置
        editDepartment() {
            this.$refs.editDepartmentFormRef.validate(async (valid) => {
                if (!valid) return
                const res = await this.$api.post(
                    "/sonar/department/updateById",
                    this.editDepartmentForm
                )
                if (res.code !== 200) return this.$message.error('更新项目信息失败！')
                this.editDialogVisible = false
                await this.queryDepartmentByPage()
                this.$message.success('更新项目信息成功！')
            })
        },
    },
    created() {
        this.queryDepartmentByPage()
    }
}
</script>
<style lang="less" scoped>
    .el-breadcrumb {
        height: 32px;
        line-height: 32px;
    }
    .el-card {
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
        .el-table {
            margin-top: 15px;
            margin-bottom: 15px;
        }
        .el-pagination {
            text-align: center;
            margin-top: 15px;
        }
    }
</style>
