<template>
	<el-row>
		<el-col :span="12">
			<el-table v-loading="loading" :data="tableData" border highlight-current-row @row-click="handleCurrentRowChange">
				<el-table-column label="用户列表">
					<el-table-column prop="id" label="编号" width="60" v-if="isShow">
					</el-table-column>
					<el-table-column prop="userName" label="用户名" width="120">
					</el-table-column>
					<el-table-column prop="userDesc" label="姓名" width="120">
					</el-table-column>
				</el-table-column>
			</el-table>
			<el-pagination small @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" layout="total,prev, pager, next"
			 :total="totalRows">
			</el-pagination>
		</el-col>
		<el-col :span="12">
			<el-transfer v-model="value" :data="data" @change="change" :titles="['未分配', '已分配']"></el-transfer>
		</el-col>
	</el-row>
</template>

<script>
	import axios from '@/axios'
	export default {
		data() {
			// const generateData = _ => {
			// 	const data = [];
			// 	for (let i = 1; i <= 15; i++) {
			// 		data.push({
			// 			key: i,
			// 			label: `备选项 ${ i }`,
			// 		});
			// 	}
			// 	return data;
			// };
			return {
				tableData: [],
				data: [],
				value: [],
				currentPage: 1,
				totalRows: 0,
				pageSize: 10,
				selectUserId: ''
			};
		},
		mounted() {
			this.getTableData()
		},
		methods: {
			// 获取table数据
			getTableData() {
				this.loading = true
				var url = 'SysUser/query.do'
				var param = {
					page: this.currentPage,
					rows: this.pageSize,
					userDesc: ''
				}
				axios.get(url, param).then(response => {
					this.tableData = response.data.data.list
					this.totalRows = response.data.data.total
					this.loading = false
				});
				this.loading = false
			},
			// 修改每页条数事件
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.pageSize = val
				this.getTableData()
			},
			// 修改当前页事件
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val
				this.getTableData()
			},
			getAllWare() {
				var url = 'MaintWare/queryAll.do'
				var param = {}
				axios.get(url, param).then(response => {
					this.data=[]
					for (let i = 0; i <= response.data.data.length; i++) {
						this.data.push({
							key: response.data.data[i].id,
							label: response.data.data[i].name
						});
					}
				});
			},

			getSelectedWare() {
				var url = 'MaintUserWare/queryByUserId.do'
				var param = {
					userId: this.selectUserId
				}
				axios.get(url, param).then(response => {
					this.value = response.data.data
				});
			},
			handleCurrentRowChange(row) {
				this.selectUserId = row.id
				this.getAllWare()
				this.getSelectedWare()
			},
			change(val) {
				var url = 'MaintUserWare/save.do'
				var param = {
					selectUserId: this.selectUserId,
					selectWareId: JSON.stringify(val)
				}
				axios.post(url, param).then(response => {

				});
			}
		}
	};
</script>

<style>
</style>
