<template>
    <div class="userContainer">
        <div class="obviousBox">
            <searchArea :searchData="searchData" @submit="searchByForm"></searchArea>
            <functional-area @add="addInfo" :leftBtn="leftBtn" :rightBtn="rightBtn"></functional-area>
        </div>
        <div class="user" v-loading="loading">
            <el-table :data="tableData" style="width: 100%" max-height="600" border fit>
                <el-table-column prop="name" label="员工姓名" align="center"></el-table-column>
                <el-table-column prop="account" label="账号" align="center"></el-table-column>
                <el-table-column label="状态" align="center">
                    <template slot-scope="scope">
                        <span>{{ accountStatusTransform(scope.row.accountStatus) }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="300">
                    <template slot-scope="scope">
                        <el-button @click="tableEditClick(scope.row.id)" type="text">编辑</el-button>
                        <el-popconfirm title="是否删除该内容？删除后无法恢复，请谨慎操作。" @confirm="tableDeleteClick(scope.row.id)">
                            <el-button type="text" slot="reference">删除</el-button>
                        </el-popconfirm>
                        <el-button @click="tableProhibitClick(scope.row.id)" type="text" v-if="scope.row.accountStatus && (scope.row.accountStatus === '0')">禁用</el-button>
                        <el-button @click="tableBackClick(scope.row.id)" type="text" v-if="scope.row.accountStatus && (scope.row.accountStatus === '-1')">启用</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pageSize">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="selectForm.currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="selectForm.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import searchArea from '@/components/searchArea/index';
import FunctionalArea from '@/components/FunctionalArea/index';
import userAPI from "@/api/user";

export default {
    name: 'list',
    mixins: [], //表格列表相关属性和方法在mixin中
    components: {
        searchArea,
        FunctionalArea,
    },
    data() {
        return {
            loading: false,
            leftBtn: [
                {
                    label: '新增员工',
                    eventName: 'add',
                },
            ],
            rightBtn: [],
            searchData: [
                {
                    label: '员工姓名',
                    key: 'name',
                    type: 'input',
                    value: '',
                    clearable: true
                },
            ],
            tableData: [],
            total: 0,
            selectForm: {
                currentPage: 1,
                pageSize: 10,
            },
        };
    },
    mounted() {
        this.init();
    },
    activated() {
        // 在首次挂载、
        // 以及每次从缓存中被重新插入的时候调用
        this.init();
    },
    methods: {
        accountStatusTransform(status) {
            switch (status) {
                case '0':
                    return '正常';
                case '-1':
                    return '禁用';
            }            
        },
        tableEditClick(id) {
            this.$router.push({
                name: 'editUser',
                query: {id},
            });
        },
        tableDeleteClick(id) {
            userAPI.addOrUpdateUser({id: id, userStatus:"-1"}).then(res => {
                if (res.code === 1000) {
                    this.$message.success("删除成功！")
                    this.init()
                }
            }).catch(err => {
                this.$message.error("删除失败，请重试")
            })
        },
        tableProhibitClick(id) {
            userAPI.addOrUpdateUser({id: id, accountStatus:"-1"}).then(res => {
                if (res.code === 1000) {
                    this.$message.success("禁用成功！")
                    this.init()
                }
            }).catch(err => {
                this.$message.error("禁用失败，请重试")
            })
        },
        tableBackClick(id) {
            userAPI.addOrUpdateUser({id: id, accountStatus:"0"}).then(res => {
                if (res.code === 1000) {
                    this.$message.success("启用成功！")
                    this.init()
                }
            }).catch(err => {
                this.$message.error("启用失败，请重试")
            })
        },
        addInfo() {
            this.$router.push({
                name: 'addUser',
            });
        },
        searchByForm(form) {
            this.selectForm = {currentPage: 1, pageSize: 10, ...form};
            this.init();
        },
        handleSizeChange(val) {
            this.selectForm.pageSize = val;
            this.selectForm.currentPage = 1;
            this.init();
        },
        handleCurrentChange(val) {
            this.selectForm.currentPage = val;
            this.init();
        },
        init() {
            let param = {...this.selectForm}
            userAPI.getUserList(param).then(res => {
                if (res.code === 1000) {
                    this.tableData = res.data.list
                    this.total = res.data.total
                } else {
                    this.$message.error("获取数据失败，请重试")
                }
            }).catch(err => {
                this.$message.error("网络异常，请重试")
            })
        },
    },
};
</script>

<style scoped lang="scss">
.userContainer {
    height: 100%;

    .bottomButton {
        display: flex;
        justify-content: center;
        margin-top: 16px;
    }

    .user {
        box-sizing: border-box;
        padding: $main-inside-padding;

        .addNotice {
            margin-bottom: 10px;
        }

        .el-table {
            .enclosure {
                display: inline-block;
                width: 100%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            .el-button {
                margin: 0 15px;
            }
        }
    }

    .pageSize {
        display: flex;
        justify-content: center;
        text-align: right;
    }
}

.obviousBox {
    // background-color: #e6e8e7;
}
</style>
