<template>
	<div style="padding:1vh" v-permission="['user_view']">
		<q-card inline class="fit shadow-6">
			<q-card-main>
				<q-table ref="table" color="primary"  hide-bottom 
					:data="serverData" 
					:columns="columns" 
					separator="cell" 
					selection="multiple" 
					:selected.sync="selected" 
					row-key="id" 
					:pagination.sync="serverPagination" 
					@request="request" 
					:loading="loading" 
					:rows-per-page-label="$t('Rows per page')" 
					:rows-per-page-options="[5,10,20,30,40,50,60,200,500]"
					:no-data-label="$t('No data')">
					<template slot="top-left" slot-scope="props">
						<q-select v-model="centerid" :options="centerlist" prefix="中心：" style="width:160px" clearable />&nbsp;&nbsp;
						<q-select v-model="departmentid" :options="departmentlist" prefix="部门：" style="width:160px" clearable />&nbsp;&nbsp;
                        <!-- <q-input v-model="terms" type="text" prefix="工号：" />&nbsp;&nbsp; -->
						<q-btn push dense color="primary" icon="search" @click="search">{{$t('Search')}}</q-btn>&nbsp;&nbsp;
						<!-- <q-btn push dense color="primary" icon="add" @click="addUser">{{$t('Add')}}</q-btn>&nbsp;&nbsp; -->
					</template>
					<template slot="top-right" slot-scope="props">
						<q-btn flat round dense :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'" @click="props.toggleFullscreen" />
					</template>
					<template slot="top-selection" slot-scope="props">
						<q-btn icon="create" color="positive" label="同步数据" @click="updateUser" />&nbsp;&nbsp;
					</template>
                     <q-td slot="body-cell-account" slot-scope="props" :props="props" style="width:100px">
						{{props.value}}
					</q-td>
                    <q-td slot="body-cell-changelist" slot-scope="props" :props="props">
						<div v-for="(item,index) in props.value" :key="index+'change'" style="padding-bottom: 10px;"> 
                            <span>{{item.name}}:</span>
                             <img width="40vm" v-if="item.name.indexOf('头像')>-1" :src="item.oldvalue">
                             <B v-else>{{item.oldvalue}}</B>
                           <span> 变更为</span>
                            <img width="40vm" v-if="item.name.indexOf('头像')>-1" :src="item.value">
                             <B v-else>{{item.value}}</B>
                        </div>
					</q-td>
				</q-table>
			</q-card-main>
		</q-card>
	</div>
</template>

<script>
	import {
		pagedlistWeixin,
		updatePlatformpersonnel,
		updateRedis,
		getUserListByPid //根据pid获取部门信息
	} from "@/service/user/user";
	import { getDeptAllMenu } from "@/service/department/dept_menu";
	import { getSysCodelistByKindcode } from "@/service/syscodelist/syscodelist";
	export default {
		name: "user",
		data() {
			return {
				serverData: [],
				serverPagination: {
					page: 1,
					rowsNumber: 0, // specifying this determines pagination is server-side
					rowsPerPage: 10, // current rows per page being displayed
				},
				centerid: "",
				departmentid: "",
				centerlist: [], //中心list
				departmentlist: [], //部门
				columns: [{
						name: "account",
						label: "工号",
						field: "account",
						sortable: false,
						align: "center"
					},
					{
						name: "username",
						required: true,
						label: "用户",
						align: "center",
						field: "username",
						sortable: false
					},
					{
						name: "changelist",
						label: "更改项目",
						field: "changelist",
						sortable: false,
						align: "center"
					}
	
				],
				filter: {
					username: "",
					phoneNumber: "",
					account: ""
				},
				selected: [],
                loading: false,
			};
		},
		methods: {
			async request(props) {
				this.getUserListByPid_user("1", "1");
				this.loading = true;
				this.serverPagination = props.pagination;
				let table = this.$refs.table,
					{
						page,
						rowsPerPage,
						sortBy,
						descending
					} = props.pagination;
				let query = {
					pageNum: page,
					pageSize: rowsPerPage,
					centerid: this.centerid,
					departmentid: this.departmentid || this.centerid || "1"
				};
				let dataRes = await pagedlistWeixin(query);
				let data = dataRes.data.data;
				this.serverPagination.rowsNumber = data.total;
				this.serverData = data.list;
				setTimeout(() => {
					this.loading = false;
				}, 500);
				
			},
			getUserListByPid_user_pid() {
				this.getUserListByPid_user(this.centerid, "2");
			},
			/**
			 * 根据pid获取部门信息
			 */
			async getUserListByPid_user(pid, type) {
				let list = await getUserListByPid(pid);
				if(list.data.data.length > 0) {
					if(type == "1") {
						this.centerlist = [];
					} else {
						this.departmentlist = [];
					}

					for(var item of list.data.data) {
						let obj = {
							label: item.name,
							value: item.id
						};
						if(type == "1") {
							this.centerlist.push(obj);
						} else {
							this.departmentlist.push(obj);
						}
					}
				}
			},
			/**更新数据*/
			async updateUser() {
                let users =this.selected;
                console.log(users)
                let res = await updatePlatformpersonnel({"list":users})
                console.log(res)
                this.selected = [];
                this.search();
				// this.updateRedis_use();
			},
			search() {
				this.request({
					pagination: this.serverPagination,
					filter: this.filter
				});
			},

			findRoleById(id) {
				let menu = {};
				let _this = this;
				let getMenu = function(roleList) {
					for(var item of roleList) {
						if(item.id === id) {
							_this.editingMenu = item; //正在编辑的菜单,引用原始菜单
							menu = Object.assign({}, item);
							menu.children = null;
							break;
						} else {
							if(item.children && item.children.length > 0) {
								getMenu(item.children);
							}
						}
					}
				};
				getMenu(this.roleList);
				return menu;
			},
			//调用审批接口，更新缓存
			async updateRedis_use(){
			 		let menuListRes = await updateRedis();
            },
			
		},
		watch: {
			centerid() {
                this.departmentid  = ""
                this.departmentlist  = []
                if(this.centerid){
                    this.getUserListByPid_user_pid();
                }
            },
            
		},

		mounted() {
			this.request({
				pagination: this.serverPagination,
				filter: this.filter
			});
		}
	};
</script>
<style scoped>
	.liststype {
		width: 98%;
		/* padding-left: 4%; */
		/* float: left; */
	}
</style>