<template>
    <div id="personnel_info">
        <el-row type="flex" :gutter="20">
            <el-col :span="8">
                <el-input
                    v-model="searchText"
                    clearable
                    prefix-icon="el-icon-search"
                    placeholder="请输入员工姓名"
                ></el-input>
            </el-col>
            <el-col :span="16">
                <el-button @click="handleSearch" type="primary">搜索</el-button>
                <el-button @click="handleAdd">新增人员</el-button>
            </el-col>
        </el-row>
        <br />
        <el-container>
            <el-table :data="tableData" border stripe style="width: 100%" :height="tableHeight">
                <el-table-column
                    type="index"
                    :index="pageIndex"
                    align="center"
                    label="序号"
                    width="50"
                ></el-table-column>
                <el-table-column prop="name" label="员工姓名"></el-table-column>
                <el-table-column prop="mobile" label="手机号"></el-table-column>
                <el-table-column prop="status" label="状态" :formatter="fmtStatus"></el-table-column>
                <el-table-column label="操作" align="center" width="160">
                    <template slot-scope="scope">
                        <el-button @click="handleEdit(scope.row)" type="primary" size="small">编辑</el-button>
                        <el-button @click="handleDelete(scope.row)" size="small">删除</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="pagination.currentPage"
                        :page-sizes="pagination.pageSizes"
                        :page-size="pagination.pageSize"
                        layout="total, sizes, prev, pager, next"
                        :total="pagination.total"
                    ></el-pagination>
                </div>
            </el-col>
        </el-row>
        <el-dialog
            :title="dialogData.editMode ? '编辑人员信息' : '人员新增'"
            :visible.sync="dialogVisible"
            center
        >
            <personnelAddEdit @complete="completeAddEdit" :inputData="dialogData"></personnelAddEdit>
        </el-dialog>
    </div>
</template>

<script>
import cache from "@/utils/cache";
import {
    searchAccountUsers,
    entUserDelete,
    getEntUserDetail,
    getEntUserRoles,
} from "@/api/user_config";
import personnelAddEdit from "./components/personnel_add_edit";

export default {
    name: "personnel_info",
    components: {
        personnelAddEdit,
    },
    data() {
        return {
            searchText: "",
            tableData: [],
            pagination: {
                currentPage: 1,
                pageSizes: [10, 30, 50, 100],
                pageSize: 10,
                total: 0,
            },
            dialogVisible: false,
            dialogData: {
                editMode: false,
                inputBaseData: {},
                inputDetailInfo: {},
                roles: [],
                bindEntList: [], // 当前登录用户的详细信息中获取
            },
            tableHeight: "",
        };
    },
    created() {
        this.tableHeight = window.innerHeight - 250;
        this.callSearchAccountUsers(
            this.pagination.currentPage,
            this.pagination.pageSize
        );
    },
    mounted() {
        this.tableHeight = window.innerHeight - 250;
        window.onresize = () => {
            return (() => {
                this.tableHeight = window.innerHeight - 250;
            })();
        };
    },
    methods: {
        pageIndex(index) {
            let currentPage = this.pagination.currentPage; // 当前页码，具体看组件取值
            let pageSize = this.pagination.pageSize; // 每页条数，具体是组件取值
            return index + 1 + (currentPage - 1) * pageSize;
        },
        fmtStatus(row, column, cellValue) {
            return cellValue ? "有效" : "无效";
        },
        handleSearch() {
            this.callSearchAccountUsers(1, this.pagination.pageSize);
        },
        handleAdd() {
            let tempDialogData = {};
            tempDialogData.editMode = false;
            getEntUserRoles()
                .then((val) => {
                    let roles = val.data;
                    // for (let i = 0; i < roles.length; i++) {
                    //     if (roles[i].remark === "企业管理者") {
                    //         roles.splice(i, 1);
                    //     }
                    // }
                    tempDialogData.roles = roles;
                    let mobile = JSON.parse(cache.getSession("user")).account;
                    return getEntUserDetail(mobile);
                })
                .then((val) => {
                    tempDialogData.bindEntList = val.data.ents;
                    this.dialogData = tempDialogData;
                    this.dialogVisible = true;
                })
                .catch((err) => {
                    this.$message.error(err);
                });
        },
        handleEdit(row) {
            let tempDialogData = {};
            tempDialogData.editMode = true;
            tempDialogData.inputBaseData = row;
            getEntUserDetail(row.mobile)
                .then((val) => {
                    tempDialogData.inputDetailInfo = val.data;
                    return getEntUserRoles();
                })
                .then((val) => {
                    let roles = val.data;
                    // for (let i = 0; i < roles.length; i++) {
                    //     if (roles[i].remark === "企业管理者") {
                    //         roles.splice(i, 1);
                    //     }
                    // }
                    tempDialogData.roles = roles;
                    let mobile = JSON.parse(cache.getSession("user")).account;
                    return getEntUserDetail(mobile);
                })
                .then((val) => {
                    tempDialogData.bindEntList = val.data.ents;
                    this.dialogData = tempDialogData;
                    this.dialogVisible = true;
                })
                .catch((err) => {
                    this.$message.error(err);
                });
        },
        handleDelete(row) {
            entUserDelete(row.mobile)
                .then((val) => {
                    let index = this.tableData.indexOf(row);
                    if (this.tableData.indexOf(row) != -1) {
                        this.tableData.splice(index, 1);
                    }
                    this.$message.success(val.msg);
                })
                .catch((err) => {
                    this.$message.error(err);
                });
        },
        completeAddEdit(issuccess) {
            this.dialogVisible = false;
            if (issuccess) {
                this.callSearchAccountUsers(
                    this.pagination.currentPage,
                    this.pagination.pageSize
                );
            } else {
                // this.$message.error('取消了');
            }
        },
        handleSizeChange(val) {
            this.callSearchAccountUsers(1, val);
        },
        handleCurrentChange(val) {
            this.callSearchAccountUsers(val, this.pagination.pageSize);
        },
        /**
         * 搜索当前登陆用户管理的用户列表
         * @param {Number} pageNum : 当前页码
         * @param {Number} pageSize : 每页数量
         */
        callSearchAccountUsers(pageNum, pageSize) {
            let _this = this;
            searchAccountUsers({
                searchUserName: this.searchText,
                pageNum: pageNum,
                pageSize: pageSize,
            })
                .then((val) => {
                    _this.pagination.total = val.data.total;
                    _this.pagination.pageSize = val.data.size;
                    _this.pagination.currentPage = val.data.current;
                    _this.tableData = val.data.records;
                })
                .catch((_) => {
                    _this.$message.error(val.msg);
                });
        },
    },
};
</script>
