<template>
  <a-card class="user-manage-operation" :bordered="false">
    <div class="table-page-search-wrapper">
		<a-form layout="inline">
			<a-row :gutter="24">
				<a-col :md="6" :sm="12">
					<a-form-item label="账号">
						<a-input placeholder="请输入账号查询" v-model="queryParam.username"></a-input>
					</a-form-item>
				</a-col>
				<a-col :md="6" :sm="12">
					<a-form-item label="姓名">
						<a-input placeholder="请输入姓名查询" v-model="queryParam.realname"></a-input>
					</a-form-item>
				</a-col>
				<a-col :md="6" :sm="12">
					<a-form-item label="汇报上级">
						<a-input placeholder="请输入姓名查询" v-model="queryParam.leaderName"></a-input>
					</a-form-item>
				</a-col>
				<a-col :md="6" :sm="12">
					<a-form-item label="用户角色">
						<a-input placeholder="请输入用户角色" v-model="queryParam.roleName"></a-input>
					</a-form-item>
				</a-col>
				<a-col :md="6" :sm="12">
					<a-form-item label="部门分配">
						<a-tree-select
							style="width: 100%"
							:dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
							:treeData="treeData"
							v-model="queryParam.departId"
							placeholder="无"
						>
						</a-tree-select>
					</a-form-item>
				</a-col>
				<a-col :md="6" :sm="8">
					<a-form-item label="邮箱">
						<a-input placeholder="请输入邮箱查询" v-model="queryParam.email"></a-input>
					</a-form-item>
				</a-col>
				<a-col :md="6" :sm="8">
					<a-form-item label="状态">
						<a-select v-model="queryParam.status" placeholder="请选择用户状态查询">
							<a-select-option value="1">正常</a-select-option>
							<a-select-option value="2">冻结</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :md="6" :sm="8">
					<span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
						<a-button type="primary" @click="handleSearchQuery" icon="search">查询</a-button>
						<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
					</span>
				</a-col>
			</a-row>
		</a-form>
    </div>
    <div>
		<a-table
			ref="table"
			bordered
			size="middle"
			:columns="columns"
			:dataSource="dataSource"
			:pagination="false"
			:loading="controlLoading"
		>
			<template slot="avatarslot" slot-scope="text, record">
				<div class="anty-img-wrap">
					<a-avatar shape="square" :src="getAvatarView(record.avatar)" icon="user"/>
				</div>
			</template>
			<template slot="leaderName" slot-scope="text, record">
				<span>{{ text ? text : '-' }}</span>
			</template>
			<template slot="sex" slot-scope="text, record">
				<span>{{ text ? (text == 1 ? '男' : '女') : '未填写' }}</span>
			</template>
			<template slot="status" slot-scope="text, record">
				<span>{{ text ? (text == 1 ? '正常' : '冻结') : '未填写' }}</span>
			</template>
			<template slot="departName" slot-scope="text, record">
				<span>{{ text ? text : '-' }}</span>
			</template>
				<span slot="action" slot-scope="text, record">
				<a @click="handleEdit(record)">编辑</a>
			</span>
		</a-table>
		<a-pagination
			class="pagin-table-class"
			:total="totalAll"
			:show-total="total => `共 ${totalAll} 条`"
			size="small"
			show-size-changer
			show-quick-jumper
			@change="onShowSizeChange"
			@showSizeChange="onShowSizeChange"
		/>
    </div>
    <user-modal ref="modalForm" @ok="handleModalFormOk"></user-modal>
  </a-card>
</template>
<script>
import UserModal from '@/views/system/modules/UserModal';

import {mapGetters} from 'vuex';
import {queryIdTree} from '@/api/api';
import {getAction} from '@/api/manage';
import {urlAcount} from './user-manage-operation-server.js';
export default {
    name: 'user-manage-operation',
    components: {
      	UserModal
    },
    data() {
		return {
			controlLoading: false,
			dataSource: [],
			totalAll: 0,
			tablePag: {
				page: 1, 
				size: 10
			},
			description: '这是用户管理页面',
			treeData: [],
			queryParam: {},
			columns: [
				{
					title: '用户账号',
					align: 'center',
					dataIndex: 'username',
					width: 120
				},
				{
					title: '真实姓名',
					align: 'center',
					width: 100,
					dataIndex: 'realname'
				},
				{
					title: '头像',
					align: 'center',
					width: 120,
					dataIndex: 'avatar',
					scopedSlots: { customRender: 'avatarslot' }
				},
				{
					title: '性别',
					align: 'center',
					width: 80,
					dataIndex: 'sex',
					scopedSlots: { customRender: 'sex' },
					sorter: true
				},
				{
					title: '手机号码',
					align: 'center',
					width: 100,
					dataIndex: 'phone'
				},
				{
					title: '邮箱',
					align: 'center',
					dataIndex: 'email'
				},
				{
					title: '汇报上级',
					align: 'center',
					dataIndex: 'leaderName',
					scopedSlots: {customRender: 'leaderName'}
				},
				{
					title: '所属部门',
					align: 'center',
					dataIndex: 'departName',
					scopedSlots: {customRender: 'departName'}
				},
				{
					title: '用户角色',
					align: 'center',
					dataIndex: 'roleName',
					scopedSlots: {customRender: 'roleName'}
				},
				{
					title: '状态',
					align: 'center',
					width: 80,
					dataIndex: 'status',
					scopedSlots: {customRender: 'status'}
				},
				{
					title: '操作',
					dataIndex: 'action',
					scopedSlots: {customRender: 'action'},
					align: 'center',
					width: 170
				}
			]
		}
    },
    created() {
		this.$nextTick(() => {
			this.loadTreeData();
		});
    },
	mounted() {
		this.handleGetDataInit();
	},
    methods: {
		...mapGetters(['userInfo']),
		searchReset() {
			this.queryParam = {};
			this.handleGetDataInit();
		},
		handleEdit(record, sign) {
			this.$refs.modalForm.edit(record, sign);
			this.$refs.modalForm.title = "编辑";
			this.$refs.modalForm.disableSubmit = false;
		},
		handleSearchQuery() {
			this.tablePag = {
                page: 1,
                size: 10
            };
			this.handleGetDataInit();
		},
		handleModalFormOk() {
			this.tablePag = {
                page: 1,
                size: 10
            };
			this.handleGetDataInit();
		},
		handleGetDataInit() {
			this.controlLoading = true;
			const paramsData = this.queryParam;
			paramsData.id = this.userInfo().id;
			paramsData.pageNo = this.tablePag.page;
      		paramsData.pageSize = this.tablePag.size;
            getAction(urlAcount + '/bytedance-api/sys/user/listV2', paramsData).then(result => {
                if (result.code === 200) {
					this.controlLoading = false;
					this.dataSource = result.result.list;
					this.totalAll =  result.result.total;
                }
                else {
                    this.$message.error(result.message);
                }
            }).catch(error => {
                console.log(error, 'eeee');
            });
        },
		onShowSizeChange(current, pageSize) {
			console.log(current, pageSize, 'current, pageSize');
            this.tablePag = {
                page: current,
                size: pageSize
            };
            this.handleGetDataInit();
        },
		loadTreeData() {
			queryIdTree().then(res => {
				if (res.success) {
					this.treeData = [];
					for (let i = 0; i < res.result.length; i++) {
						let temp = res.result[i];
						this.treeData.push(temp);
					}
				}
			});
		},
		getAvatarView(avatar) {
			return window._CONFIG['domianURL'] + '/sys/common/view' + '/' + avatar;
		}
    }
};
</script>
<style lang="less" scoped>
	@import '~@assets/less/common.less';
	.user-manage-operation {
		.pagin-table-class {
			display: flex;
			justify-content: flex-end;
			margin-top: 20px;
		}
	}
</style>