<template>
	<view class="main">
		<view class="search">
			<view class="item">
				<view class="label">组织：</view>
				<view>
					<as-tree-select v-model="formData.unit" 
					 title="组织" placeholder="请选择组织"
					 :options="sortOptions" :checkStrictly="true">
					</as-tree-select>
				</view>
			</view>
            <view class="item">
				<view class="label">用户名：</view>
				<view >
					<input v-model="formData.name" placeholder="请输入用户名" class="uni-input"/>
				</view>
			</view>
			<view class="item">
				<view class="label">昵称：</view>
				<view >
					<input v-model="formData.nickname" placeholder="请输入用户昵称" class="uni-input"/>
				</view>
				<button size="mini" type="primary" style="background-color: #008782;"  @click="search">搜索</button>
			</view>
			
		</view>
		
		<view class="list">
			<uni-table ref="table" :loading="loading" border stripe type="selection" emptyText="暂无更多数据" @selection-change="selectionChange">
			<uni-tr>
				<uni-th  align="center">用户名</uni-th>
				<uni-th  align="center">昵称</uni-th>
				<uni-th  align="center">手机号</uni-th>
				<uni-th  align="center">部门</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in tableData" :key="index">
				<uni-td>{{ item.name }}</uni-td>
				<uni-td>{{ item.nickname }}</uni-td>
				<uni-td>{{ item.mobile }}</uni-td>
				<uni-td>
					<span v-for="(item, index) in item.user_orgs" :key="index">{{item.org.name}} </span>
				</uni-td>
			</uni-tr>
		</uni-table>
		 <view style="margin-top: 20rpx;">
		 	<uni-pagination show-icon :page-size="formData.limit" :current="formData.page" :total="total" @change="change" />
		 </view>
		</view>
		<button size="default" type="primary" style="margin-top: 30rpx;background-color:#008782;" @click="enrollDone">立即报名</button>
		<button size="default" type="primary" style="margin-top: 30rpx;background-color:#008782;" @click="turnUrl">查看报名记录</button>
	</view>
</template>

<script>
	import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
	export default {
		data() {
			return {
				m_id:0,
				formData:{
					id:'',
					limit:10,
					page:1,
					name:'',
					nickname:'',
					unit:'',
					mobile:''
				},
				sortOptions:[],
				searchVal: '',
				tableData: [],
				loading: false,
				total:0,
				selectedIndexs:[]
			};
			
		},
		onLoad({m_id}) {
			this.m_id = m_id
			this.getOrgInfo()
			this.getUserList()
		},
	computed: {
	  ...mapState(["hasLogin", "userinfo"]),
	},
	onShow() {
		  if(!this.hasLogin)
		  {
		  	uni.redirectTo({
		  		url: '/pages/common/login/login?href2=user/user/index'
		  	});
		  	return false;
		  }
	},
		methods:{
			turnUrl(){
				uni.navigateTo({
					url:'enroll_list?m_id='+this.m_id
				})
			},
			enrollDone(){
				if(this.selectedIndexs.length<1)
				{
					uni.showToast({
						title:"请选择报名人员"
					})
					return false;
				}
				let ids = this.selectedIndexs.map(i => this.tableData[i].id).join(",")
				getApp().globalData.request.post(
				  "learn/train/enrollUp",
				  {
				  	ids:ids,
				  	m_id:this.m_id
				  }
				).then(res=>{
					if(res.code == -1)
					{
						uni.showToast({
							title: res.msg,
							duration: 2000
						});
					}else{
						uni.showToast({
							title: '报名成功',
							duration: 2000
						});
						this.$refs.table.clearSelection()
					}
				})
			},
			change(e){
				this.$refs.table.clearSelection()
				this.formData.page = e.current
				this.getUserList()
			},
			search(){
				this.formData.page = 1;
				this.getUserList()
			},
			getUserList(){
				getApp().globalData.request.post(
				  "learn/train/userList",
				  this.formData
				).then(res=>{
					this.total = res.data.total
					this.tableData = res.data.data
				})
			},
			getOrgInfo(){
				getApp().globalData.request.post(
				  "learn/train/getOrgInfo"
				).then(res=>{
					this.sortOptions = res.data
				})
			},
			selectionChange(e)
			{
				this.selectedIndexs = e.detail.index
			}
		}
	}
</script>

<style lang="scss" scoped>
   .main{
	   padding: 30rpx;
	   font-size: 26rpx;
   }
   .search{
	   .item{
		   margin: 10rpx 0;
		   display: flex;
		   align-items: center;
		   .label{
			   width: 120rpx;
			   text-align: right;
		   }
		   .uni-input{
			   padding: 7px 10px;
			   border: 1px solid #e5e5e5;
			   border-radius: 4px;
			   font-size: 14px;
		   }
	   }
   }
</style>
