<template>
    <div class="manager">
        <sum-head title="管理员" text="总管理员数" :sum="String(data.total)"></sum-head>

        <div class="filter-container">
            <span>所属区域：</span>
            <el-select v-model="listQuery.manageAreaId" size="small" placeholder="请选择" class="filter-item" style="width: 160px">
                <el-option v-for="item in $root.regionOptions" :key="item.id" :label="item.name" :value="item.id"/>
            </el-select>
            <span>角色：</span>
            <el-select v-model="listQuery.roleId" size="small" placeholder="请选择" class="filter-item" style="width: 160px">
                <el-option v-for="item in roleOpts" :key="item.id" :label="item.content" :value="item.id"/>
            </el-select>
            <span>状态：</span>
            <el-select v-model="listQuery.ifDisenable" size="small" placeholder="请选择" class="filter-item">
                <el-option v-for="item in stateOptions" :key="item.label" :label="item.label" :value="item.value"/>
            </el-select>
            <el-input placeholder="工号/姓名/帐号/手机号码" v-model="listQuery.keyword" size="small" style="width: 200px;margin-left: 30px;" class="filter-item" />
            <el-button class="filter-item" size="small" type="primary" icon="el-icon-search" @click="curPage(1)">搜索</el-button>

            <el-button class="filter-item add" size="small" type="primary" icon="el-icon-plus" @click="addManager">添加管理员</el-button>
        </div>

        <el-table
                v-loading="listLoading"
                :data="data.resultList"
                element-loading-text="Loading"
                size="small"
                border>
            <el-table-column prop="workCardNumber" label="工号" align="center"></el-table-column>
            <el-table-column prop="username" label="姓名" align="center"></el-table-column>
            <el-table-column prop="account" label="帐号" align="center"></el-table-column>
            <el-table-column prop="mobile" label="手机号码" align="center"></el-table-column>
            <el-table-column prop="roleContent" label="角色" align="center"></el-table-column>
            <el-table-column prop="manageAreaName" label="所属区域" align="center"></el-table-column>
            <el-table-column align="center" label="创建时间">
                <template slot-scope="scope">
                    <span v-if="scope.row.createTime">
                        <i class="el-icon-time" />
                        <span v-dateformat="scope.row.createTime"></span>
                    </span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="帐号状态" width="120">
                <template slot-scope="scope">
                    <el-tag :type="!scope.row.ifDisenable ? 'success' : 'danger'">{{ !scope.row.ifDisenable ? '正常' : '停用' }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="240">
                <template slot-scope="scope">
                    <el-button type="success" size="mini" @click="editManager(scope.row)">修改</el-button>
                    <el-button type="primary" size="mini" @click="resetPwd(scope.row.id)">重置</el-button>
                    <el-button type="danger" size="mini" @click="delManager(scope.row.id, scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination-container" v-show="!listLoading">
            <el-pagination background layout="prev, pager, next" :page-size="Number(listQuery.pageSize)" :total="data.total" @current-change="curPage"></el-pagination>
        </div>

        <manager-edit ref="ManagerEdit" type="manager" :roleOpts="roleOpts" :action="action" @updateList="getList"></manager-edit>
    </div>
</template>

<script>
import SumHead from '@/components/SumHead'
import ManagerEdit from './components/managerEdit'

import api from '@/api/manager'
export default {
    name: "manager",
    components: {
        SumHead,
        ManagerEdit
    },
    data() {
        return {
            listQuery: {
                pageNumber: 1,
                pageSize: 10,
                orderDirection: '',
                orderDirection: '',
                roleName: '',
                roleId: '',
                ifDisenable: '',
                keyword: undefined
            },
            roleOptions: [
                { label: '全部', value: '' },
                { label: '超级管理员', value: '1' },
                { label: '区域管理员', value: '2' },
                { label: '普通管理员', value: '3' }
            ],
            stateOptions: [
                { label: '全部', value: '' },
                { label: '正常', value: '0' },
                { label: '停用', value: '1' }
            ],
            data: {
                total: 0
            },
            listLoading: false,
            action: 'add',
            roleOpts: []
        }
    },
    filters: {
        roleFilter(state) {
            const roleMap = ['超级管理员', '区域管理员', '普通管理员']
            return roleMap[state-1]
        },
    },
    created() {
        this.getList()
        this.getRoleList()
    },
    methods: {
        getRoleList() {
            api.getRole().then(res => {
                console.log('role:', res)
                this.roleOpts = res.results.resultList
                this.roleOpts.splice(0, 0, { content: '全部', id: '' })
            }).catch(error => {
                console.log(error)
            })
        },
        getList() {
            this.listLoading = true
            api.getList(this.listQuery).then(res => {
                console.log(res)
                this.data = res.results
                this.listLoading = false
            }).catch(error => {
                console.log(error)
            })
        },
        curPage(val) {
            console.log(val)
            this.listQuery.pageNumber = val
            this.getList()
        },
        addManager() {
            this.action = 'add'
            this.$refs.ManagerEdit.open()
        },
        editManager(data) {
            this.action = 'edit'
            this.$refs.ManagerEdit.open(data)
        },
        resetPwd(id) {
            this.$confirm('你确定要重置这条管理员密码吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                // center: true
            }).then(() => {
                api.resetCustomer({ id }).then(res => {
                    console.log(res)
                    this.$message({
                        type: 'success',
                        message: '重置成功!'
                    });
                }).catch(error => {
                    console.log(error)
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消重置'
                });
            });
        },
        delManager(id, index) {
            this.$confirm('你确定要删除这条管理员信息吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                // center: true
            }).then(() => {
                api.delCustomer({ id }).then(res => {
                    console.log(res)
                    this.list.splice(index, 1);
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(error => {
                    console.log(error)
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .manager {
        position: relative;
        padding: 5px 16px 0;
        margin-bottom: 30px;

        .filter-container {
            padding: 10px 0 10px 12px;
            .filter-item {
                width: 90px;
                margin-right: 10px;
            }
            .add {
                float: right;
                width: 110px;
            }
        }
        .pagination-container {
            margin: 20px 0 30px;
            float: right;
        }
    }
</style>
