<template>
    <div class="ground">
        <sum-head title="地勤人员" text="总人数" :sum="String(data.total)"></sum-head>

        <div class="filter-container">
            <span>状态：</span>
            <el-select v-model="listQuery.ifDisenable" size="small" placeholder="请选择" class="filter-item">
                <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
            <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>
            <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="addGround">添加地勤人员</el-button>
        </div>

        <el-table
                v-loading="listLoading"
                :data="data.resultList"
                element-loading-text="Loading"
                size="small"
                border>
            <el-table-column label="工号" align="center">
                <template slot-scope="scope">
                    {{ scope.row.workCardNumber }}
                </template>
            </el-table-column>
            <el-table-column label="姓名" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.username  }}</span>
                </template>
            </el-table-column>
            <el-table-column label="帐号" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.account }}</span>
                </template>
            </el-table-column>
            <el-table-column label="手机号码" align="center">
                <template slot-scope="scope">
                    {{ scope.row.mobile }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="负责区域">
                <template slot-scope="scope">
                    <span>{{ scope.row.manageAreaName }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="创建时间">
                <template slot-scope="scope">
                    <span v-dateformat="scope.row.createTime"></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="editGround(scope.row)">修改</el-button>
                    <el-button type="primary" size="mini" @click="resetPwd(scope.row.id)">重置</el-button>
                    <el-button type="danger" size="mini" @click="delGround(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>

        <ground-edit ref="GroundEdit" type="ground" :action="action" @updateList="getList"></ground-edit>
    </div>
</template>

<script>
import SumHead from '@/components/SumHead'
import GroundEdit from './components/groundEdit'

import api from '@/api/ground'
export default {
    name: "ground",
    components: {
        SumHead,
        GroundEdit
    },
    data() {
        return {
            listQuery: {
                pageNumber: '1',
                pageSize: '10',
                // orderDirection: '',
                // orderProperty: 'id',
                ifDisenable: '',
                manageAreaId: '',
                keyword: ''
            },
            stateOptions: [
                { label: '全部', value: '' },
                { label: '正常', value: '1' },
                { label: '停用', value: '0' }
            ],
            data: {
                total: 0
            },
            listLoading: false,
            action: 'add'
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            this.listLoading = true
            api.getList(this.listQuery).then(res => {
                console.log(res)
                this.data = res.results
                this.listLoading = false
                // this.data.resultList.forEach((item)=> {
                //     console.log(item.id)
                // })
            }).catch(error => {
                console.log(error)
            })
        },
        curPage(val) {
            console.log(val)
            this.listQuery.pageNumber = val
            this.getList()
        },
        addGround() {
            this.action = 'add'
            this.$refs.GroundEdit.open()
        },
        editGround(data) {
            this.action = 'edit'
            this.$refs.GroundEdit.open(data)
        },
        resetPwd(id) {
            this.$confirm('你确定要重置这条地勤人员密码吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                // center: true
            }).then(() => {
                api.resetGround({ id }).then(res => {
                    console.log(res)
                    this.$message({
                        type: 'success',
                        message: '重置成功!'
                    });
                }).catch(error => {
                    console.log(error)
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消重置'
                });
            });
        },
        delGround(id, index) {
            this.$confirm('你确定要删除这条地勤人员信息吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                // center: true
            }).then(() => {
                api.delGround({ 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>
    .ground {
        position: relative;
        padding: 5px 16px 0;
        margin-bottom: 30px;

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