<template>
    <div id="operator_management">
        <el-row type="flex" :gutter="20">
            <el-col :span="5">
                <el-input
                        v-model="searchPhone"
                        clearable
                        prefix-icon="el-icon-search"
                        placeholder="请输入用户手机号"
                        class="ent_input">
                </el-input>
            </el-col>
            <el-col :span="6">
                <el-input
                        v-model="searchName"
                        clearable
                        prefix-icon="el-icon-search"
                        placeholder="请输入用户姓名"
                        class="ent_input">
                </el-input>
            </el-col>
            <el-col :span="16">
                <el-button v-on:click="getOperatorUserList()" type="primary">搜索</el-button>
            </el-col>
        </el-row>
        <br/>
        <el-row type="flex" :gutter="20">
            <el-col :span="5">
                <el-button v-on:click="addServiceUser" type="primary">新增</el-button>
            </el-col>
        </el-row>
        <br>
        <el-container>
            <el-table :data="operatorUserList" border style="width: 100%">
                <el-table-column prop="name" label="用户名" width="160"></el-table-column>
                <el-table-column prop="mobile" label="手机号" width="160"></el-table-column>
                <el-table-column prop="userType" label="用户类型" width="120" :formatter="getUserType"></el-table-column>
                <el-table-column prop="deptName" label="部门名" width="160"></el-table-column>
                <el-table-column prop="status" label="状态" width="80" :formatter="getUserStatus"></el-table-column>
                <el-table-column prop="createBy" label="创建人" width="120"></el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
                <el-table-column label="操作" align="center" width="120">
                    <template slot-scope="scope">
                        <el-button @click="operatorUserEdit(scope.row)" type="primary" size="small">编辑</el-button>
                        <el-button @click="operatorUserDelete(scope.row)" type="primary" size="small" style="margin: 5px">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-container>
        <br/>
        <el-row type="flex" :gutter="20">
            <el-col :span="12"></el-col>
            <el-col :span="12">
                <div style="text-align:right">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pageNum"
                            :page-sizes="pageSizes"
                            :page-size="pageSize"
                            layout="total, sizes, prev, pager, next"
                            :total="totalNumber"
                    >
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
        <el-dialog title="人员新增" :visible.sync="operatorUserAdd" center v-on:close="operatorUserEmpty('ruleForm')">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="ruleForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="用户名" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="角色" prop="region">
                    <el-select v-model="ruleForm.roles" style="width:100%;" placeholder="请选择角色" multiple>
                        <el-option v-for="(_, i) in roleList" v-bind:label="roleList[i].label" v-bind:key="roleList[i].value"
                                   v-bind:value="roleList[i].value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="operatorUserDataAdd('ruleForm')">确认</el-button>
                    <el-button @click="operatorUserEmpty('ruleForm')">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="人员编辑" :visible.sync="operatorUserEditShow" center>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="ruleForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="用户名" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="角色" prop="region">
                    <el-select v-model="ruleForm.roles" style="width:100%;" placeholder="请选择角色" multiple>
                        <el-option v-for="(_, i) in roleList" v-bind:label="roleList[i].label" v-bind:key="roleList[i].value"
                                   v-bind:value="roleList[i].value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户状态" prop="name">
                    <el-radio v-model="ruleForm.userStatus" label="true">有效</el-radio>
                    <el-radio v-model="ruleForm.userStatus" label="false">无效</el-radio>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="operatorUserDataEdit('ruleForm')">确认</el-button>
                    <el-button v-on:click="operatorUserEditShow = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import { AxiosRequestData } from '../../data/axios_request'
    import cache from '@/utils/cache'

    export default {
        name: 'operator_management',
        data() {
            return {
                searchName: '',
                searchPhone: '',
                account: '',
                token: '',
                operatorUserList: [],
                pageNum: 1,
                pageSize: 10,
                totalNumber: 0,
                totalPage: 0,
                pageSizes: [10, 30, 50, 100],
                operatorUserAdd: false,
                operatorUserEditShow: false,
                ruleForm: {
                    name: '',
                    phone: '',
                    userStatus: false,
                    roles: []
                },
                rules: {
                    name: [
                        { required: true, message: '请输入用户名称', trigger: 'blur' }
                    ],
                    phone: [
                        { required: true, message: '请输入手机号', trigger: 'blur' },
                        { min: 11, max: 11, message: '请输入正确的手机号码', trigger: 'blur' }
                    ]
                },
                roleList: [],
                formStatus: 0 // 0：表示新增状态，1：表示编辑状态
            }
        },
        created() {
            let user = JSON.parse(cache.getLocal('user'))
            this.account = user.account
            this.token = cache.getToken()
            this.getOperatorUserList()
            this.getRoleList()
        },
        methods: {
            // 用户状态
            getUserStatus(row, column, cellValue) {
                if (cellValue === false) {
                    return '无效'
                } else {
                    return '有效'
                }
            },
            // 用户类型
            getUserType(row, column, cellValue) {
                if (cellValue === 1) {
                    return '企业人员'
                }
                if (cellValue === 2) {
                    return '服务商'
                }
                if (cellValue === 3) {
                    return '后台管理'
                } else {
                    return ''
                }
            },
            // 删除用户信息
            async operatorUserDelete(row) {
                if (this.account && this.token) {
                    const url = '/auth/oper/user/delete'
                    let response = await AxiosRequestData(url, this.token, {
                        mobile: row.mobile,
                        reqChannel: 4,
                        currentUserMobile: this.account
                    }, false, 1)
                    if (response) {
                        if (response.code === 0) {
                            this.$message({
                                message: '用户信息删除成功！',
                                type: 'success'
                            })
                            await this.getOperatorUserList()
                        } else {
                            this.$message.error(response.msg)
                        }
                    } else {
                        this.$message.error(response.msg)
                    }
                }
            },
            // 编辑运营商人员信息
            operatorUserEdit(row) {
                this.operatorUserEditShow = true
                this.formStatus = 1
                this.getServiceUserInfo(row)
            },
            // 变更每页显示的数据条数
            handleSizeChange(val) {
                this.pageSize = val
                this.getOperatorUserList()
            },
            // 翻页
            handleCurrentChange(val) {
                this.pageNum = val
                this.getOperatorUserList()
            },
            // 获取运营商信息列表
            async getOperatorUserList() {
                if (this.account && this.token) {
                    const url = '/auth/comm/user/findChildUsers'
                    let response = await AxiosRequestData(url, this.token, {
                        currentUserMobile: this.account,
                        mobile: this.searchPhone,
                        name: this.searchName,
                        pageNum: this.pageNum,
                        pageSize: this.pageSize
                    }, false, 2)
                    if (response) {
                        if (response.code === 0) {
                            this.totalNumber = response.data.total
                            this.totalPage = response.data.pages
                            this.operatorUserList = response.data.records
                        }
                    }
                }
            },
            // 获取用户信息
            async getServiceUserInfo(row) {
                if (this.token) {
                    const url = '/auth/oper/user/findManageInfoByMobile'
                    let response = await AxiosRequestData(url, this.token, {
                        mobile: row.mobile
                    }, false, 2)
                    if (response) {
                        if (response.code === 0) {
                            this.ruleForm.phone = response.data.mobile
                            this.ruleForm.name = response.data.name
                            this.ruleForm.userStatus = response.data.status.toString()
                            this.ruleForm.roles = response.data.userRoles.map(
                                (_, i) => (
                                    response.data.userRoles[i].id
                                )
                            )
                        }
                    }
                }
            },
            // 提交新增用户信息
            async submitUserData() {
                if (this.account && this.token) {
                    const url = '/auth/oper/user/save'
                    let response = await AxiosRequestData(url, this.token, {
                        mobile: this.ruleForm.phone,
                        name: this.ruleForm.name,
                        currentUserMobile: this.account,
                        reqChannel: 4,
                        roleIds: this.ruleForm.roles
                    }, false, 1)
                    if (response) {
                        if (response.code === 0) {
                            this.$message({
                                message: '添加用户信息成功！',
                                type: 'success'
                            })
                            this.operatorUserAdd = false
                            await this.getOperatorUserList()
                            this.operatorUserEmpty('ruleForm')
                        } else {
                            this.$message.error(response.msg)
                        }
                    } else {
                        this.$message.error(response.msg)
                    }
                }
            },
            // 获取运营商角色列表
            async getRoleList() {
                if (this.token) {
                    const url = '/auth/oper/role/findCategoryRoles'
                    let response = await AxiosRequestData(url, this.token, {}, false, 2)
                    if (response) {
                        if (response.code === 0) {
                            if (response.data.length > 0) {
                                this.roleList = response.data.map((_, i) => ({
                                    value: response.data[i].id,
                                    label: response.data[i].remark
                                }))
                            }
                        }
                    }
                }
            },
            // 新增运营商管理人员
            addServiceUser() {
                if (this.formStatus === 1) {
                    this.operatorUserEmpty('ruleForm')
                    this.ruleForm.roles = []
                }
                this.operatorUserAdd = true
            },
            // 新增用户信息
            operatorUserDataAdd(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.submitUserData()
                    } else {
                        return false
                    }
                })
            },
            // 清空用户信息
            operatorUserEmpty(formName) {
                this.$refs[formName].resetFields()
                this.ruleForm.roles = []
                this.operatorUserAdd = false
            },
            // 编辑用户信息
            operatorUserDataEdit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.submitEditUserData()
                    } else {
                        return false
                    }
                })
            },
            // 提交编辑用户信息
            async submitEditUserData() {
                if (this.account && this.token) {
                    const url = '/auth/oper/user/updateManageInfo'
                    let response = await AxiosRequestData(url, this.token, {
                        mobile: this.ruleForm.phone,
                        name: this.ruleForm.name,
                        currentUserMobile: this.account,
                        reqChannel: 4,
                        roleIds: this.ruleForm.roles,
                        status: this.ruleForm.userStatus
                    }, false, 1)
                    if (response) {
                        if (response.code === 0) {
                            this.$message({
                                message: '编辑用户信息成功！',
                                type: 'success'
                            })
                            this.operatorUserEditShow = false
                            await this.getOperatorUserList()
                        } else {
                            this.$message.error(response.msg)
                        }
                    } else {
                        this.$message.error(response.msg)
                    }
                }
            }
        }
    }
</script>

<style scoped>
    .ent_input {
        width: 250px;
    }
    .edit_layout {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
    }
</style>
