<template>
    <div class="check">
        <form-option title="人员管理">
            <el-form :inline="true" :model="formData" ref="form" label-width="80px">
                <el-form-item label="人员姓名:" prop="name">
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>
                <el-form-item label="检查职务:" prop="position">
                    <el-select v-model="formData.position" placeholder="请选择">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="主办人员" value="1"></el-option>
                        <el-option label="协办人员" value="2"></el-option>
                        <el-option label="主/协" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属机构:" prop="enforceOrgs">
                    <el-cascader
                        :options="orgOptions"
                        class="user-cascader"
                        v-model="formData.enforceOrgs"
                        :props="orgProps"
                        :show-all-levels="false"
                        clearable>
                    </el-cascader>
                </el-form-item>
                <el-form-item label="账号状态:" prop="user_status">
                    <el-select v-model="formData.user_status" placeholder="请选择">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="正常" value="0"></el-option>
                        <el-option label="冻结" value="1"></el-option>
                        <el-option label="停用" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-button class="ml" icon="el-icon-refresh-right" @click="resetForm">重置</el-button>
                <el-button type="primary" icon="el-icon-search" @click="handleQueryData">查询</el-button>
            </el-form>
        </form-option>
        
        <div class="custom-table">
            <el-table :data="list" border v-loading="loading">
                <el-table-column prop="no" align="center" label="序号" width="60" />
                <el-table-column prop="name" show-overflow-tooltip label="人员姓名" />
                <el-table-column prop="sexDesc" show-overflow-tooltip label="性别" align="center" />
                <el-table-column prop="enforce_org_name" show-overflow-tooltip label="所属机构" />
                <el-table-column prop="role" show-overflow-tooltip label="角色" />
                <el-table-column prop="positionDesc" show-overflow-tooltip align="center" label="检查职务" />
                <el-table-column prop="phone_num" show-overflow-tooltip label="联系方式" />
                <el-table-column prop="user_status" label="账号状态" align="center">
                    <template slot-scope="scope">
                        <el-tooltip v-if="scope.row.user_status == 1" class="item" effect="dark" :content="scope.row.freezeEndTime" placement="top">
                            <el-tag type="warning">冻结</el-tag>
                        </el-tooltip>
                        <el-tag v-else-if="scope.row.user_status == 2" type="danger">停用</el-tag>
                        <el-tag v-else type="success">正常</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="date" label="最后登录" align="center" />
                <el-table-column prop="action" label="操作" align="center" width="220">
                    <template slot-scope="scope">
                        <div class="action">
                            <div class="action-item" @click="handleDetail(scope.row.id)">
                                <i class="el-icon-view blueFont"></i>
                                <el-button type="text" size="small">查看</el-button>
                            </div>
                            <div class="action-item" @click="handleEdit(scope.row)">
                                <i class="el-icon-edit blueFont"></i>
                                <el-button type="text" size="small">编辑</el-button>
                            </div>
                            <div class="action-item" v-if="scope.row.user_status != 2" @click="handleFreeze(scope.row)">
                                <i class="el-icon-magic-stick blueFont"></i>
                                <el-button type="text" size="small">{{ scope.row.user_status == 1 ? '解冻' : '冻结' }}</el-button>
                            </div>
                            <div class="action-item" v-if="scope.row.user_status != 1" @click="handleStop(scope.row)">
                                <i class="el-icon-remove-outline blueFont"></i>
                                <el-button type="text" size="small">{{ scope.row.user_status == 2 ? '启用' : '停用' }}</el-button>
                            </div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <Page :page="query.page" :size="query.size" :total="total" @pageChange="pageChange"></Page>
        </div>

        <freeze-user :show.sync="showFreezeUserDialog" :user="currentUser" @close="onCloseFreezeUser"></freeze-user>

        <user-action :show.sync="showUserActionDialog" :user="currentUser" @close="onCloseFreezeUser"></user-action>

        <user-edit :show.sync="showUserEditDialog" :user="currentUser" @close="onCloseFreezeUser"></user-edit>
    </div>
</template>

<script>
import FormOption from "@/component/FormOption";
import FreezeUser from './components/FreezeUser.vue';
import UserAction from './components/UserAction.vue';
import UserEdit from './components/UserEdit.vue';

import { getUsers } from '@/api/system_user';
import { orgMixin } from '@/mixin/org';
import { notEmpty, formatDate } from '@/utils/tool';

export default {
    components: {
        FormOption,
        FreezeUser,
        UserAction,
        UserEdit,
    },
    mixins: [orgMixin],
    data() {
        return {
            formData: {
                name: '',
                position: '',
                enforceOrgs: '',
                user_status: '',
            },
            query: {
                page: 1,
                size: 10,
            },
            positionDic: {
                1: '主办人员',
                2: '协办人员',
                3: '主/协'
            },
            total: 0,
            list: [],
            loading: false,
            showFreezeUserDialog: false,
            currentUser: null,
            showUserActionDialog: false,
            showUserEditDialog: false,
        };
    },
    computed: {
        pageTotal() {
            const page = Math.ceil(this.total / this.query.size);
            return page > 0 ? page : 1;
        },
    },
    mounted() {
        this.loadOrgTree();
        this.handleQuery();
    },
    methods: {
        handleQueryData() {
            this.query.page = 1;
            this.handleQuery();
        },
        resetForm() {
            this.$refs.form.resetFields();
            this.handleQuery();
        },
        pageChange(page, size) {
            this.query.page = page;
            this.query.size = size;
            this.handleQuery();
        },
        handleQuery() {
            this.loading = true;
            let query = [];
            if (notEmpty(this.formData.name)) {
                query.push(`name==*${this.formData.name.trim()}*`);
            }
            if (notEmpty(this.formData.position)) {
                query.push(`position==${this.formData.position}`);
            }
            if (notEmpty(this.formData.user_status)) {
                query.push(`user_status==${this.formData.user_status}`);
            }
            if (this.formData.enforceOrgs && this.formData.enforceOrgs.length > 0) {
                const orgId = this.formData.enforceOrgs[this.formData.enforceOrgs.length - 1];
                if (notEmpty(orgId)) {
                    query.push(`enforce_org_id==${orgId}`);
                }
            }
            this.query.query = query.join(';');
            getUsers(this.query).then(res => {
                this.total = res.total || 0;
                const list = res.data || [];
                list.map((item, index) => {
                    item.no = (this.query.page - 1) * this.query.size + index + 1;
                    if (item.sex) {
                        item.sexDesc = item.sex == 1 ? '女' : '男';
                    }
                    else {
                        item.sexDesc = '';
                    }
                    let date = '';
                    if (item.last_login_time) {
                        date = formatDate(item.last_login_time, true);
                    }
                    item.date = date;
                    if (item.position) {
                        item.positionDesc = this.positionDic[item.position] || '无';
                    }
                    else {
                        item.positionDesc = '无';
                    }
                    let role = [];
                    if (item.roles && item.roles.length > 0) {
                        item.roles.map(obj => {
                            if (notEmpty(obj.name)) {
                                role.push(obj.name);
                            }
                        });
                    }
                    item.role = role.join('/');
                    item.freezeEndTime = '';
                    if (item.user_status == 1) {
                        let end = '';
                        if (item.status_end_time) {
                            end = formatDate(item.status_end_time, true);
                        }
                        item.freezeEndTime = '冻结时间：' + end;
                    }
                });
                this.list = list;
                this.loading = false;
            });
        },
        handleDetail(id) {
            this.$router.push(`/integrated/user/detail/${id}`);
        },
        handleEdit(row) {
            this.currentUser = row;
            this.showUserEditDialog = true;
        },
        onCloseFreezeUser(flag) {
            if (flag == true) {
                this.handleQuery();
            }
            this.currentUser = null;
        },
        handleFreeze(row) {
            this.currentUser = row;
            if (row.user_status != 1) {
                this.showFreezeUserDialog = true;
            }
            else {
                this.showUserActionDialog = true;
            }
        },
        handleStop(row) {
            this.currentUser = row;
            this.showUserActionDialog = true;
        },
    },
};
</script>

<style lang="scss">
.check {
    .option .el-select .el-input__inner {
        padding-right: 15px;
    }
}
.user-cascader {
    .el-input__inner {
        width: 300px !important;
    }
}
</style>

<style lang="scss" scoped>
.action {
    display: flex;
    &-item:not(:first-child) {
        margin-left: 10px;
    }
}
</style>