<template>
	<view class="main">
		<view class="search">
			<view class="item">
				<view class="label">所属培训：</view>
				<uni-data-select
					  v-model="formData.m_id"
					  :localdata="manageList"
					></uni-data-select>

				<button size="mini" type="primary"  @click="search">搜索</button>
			</view>
		</view>
		
		<view class="list">
			<view class="list-item" v-for="item in userList" :key="item.id">
				<view class="litem">
					<view class="title">培训主题：</view>
					<view class="info">{{item.manage.name}}</view>
				</view>
				<view class="litem">
					<view class="title">开展时间：</view>
					<view class="info">{{item.manage.drawup}}</view>
				</view>
				<view class="litem">
					<view class="title">培训地点：</view>
					<view class="info">{{item.manage.location}}</view>
				</view>
				<view class="litem">
					<view class="title">用户名：</view>
					<view class="info">{{item.user.name}}</view>
				</view>
				<view class="litem">
					<view class="title">昵称：</view>
					<view class="info">{{item.user.nickname}}</view>
				</view>
				<view class="litem">
					<view class="title">部门：</view>
					<view class="info">
						<span v-for="(vo, index) in item.user_orgs" :key="index">{{vo.org.name}} </span>
					</view>
				</view>
				<view class="operate">
					<button size="mini" type="primary" style="background-color:#008782;"  @click="cancel(item.id)" class="del">取消参与</button>
				</view>
				
			</view>
		</view>
		<view style="margin-top: 20rpx;">
			<uni-pagination show-icon :page-size="formData.limit" :current="formData.page" :total="userTotal" @change="change" />
		</view>
		
	</view>
</template>

<script>
	import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
	export default {
		data() {
			return {
				formData:{
					m_id:'',
					page:1,
					limit:10
				},
				manageList:[],
				userList:[],
				userTotal:0
			};
		},
	computed: {
	  ...mapState(["hasLogin", "userinfo"]),
	},
		onLoad({m_id}) {
			this.formData.m_id = m_id
			this.getManageList()
			this.getEnrollList()
		},
  onShow() {
	  if(!this.hasLogin)
	  {
	  	uni.redirectTo({
	  		url: '/pages/common/login/login?href2=train/enroll_list'
	  	});
	  	return false;
	  }
  },
		methods:{
			search(){
				this.formData.page = 1;
				this.getEnrollList()
			},
			change(e){
				this.$refs.table.clearSelection()
				this.formData.page = e.current
				this.getEnrollList()
			},
			getManageList()
			{
				getApp().globalData.request.get(
				  "learn/train/manageList"
				).then(res=>{
					this.manageList = res.data
				})
			},
			getEnrollList()
			{
				getApp().globalData.request.get(
				  "learn/train/enrollList",this.formData
				).then(res=>{
					this.userList = res.data.data
					this.userTotal = res.data.total
				})
			},
			cancel(id)
			{
				getApp().globalData.request.get(
				  "learn/train/cancelEnroll",{id:id}
				).then(res=>{
					if(res.code == -1)
					{
						uni.showToast({
							title: res.msg,
							duration: 2000
						});
					}else{
						uni.showToast({
							title: '取消成功',
							duration: 2000
						});
						this.getEnrollList()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
   .main{
	   min-height: 500rpx;
	   padding: 20rpx;
	   font-size: 26rpx;
   }
   .search{
	   z-index: 99;
   	   .item{
   		   margin: 10rpx 0;
   		   display: flex;
   		   align-items: center;
   		   .label{
   			   width: 150rpx;
   			   text-align: right;
   		   }
   		   .uni-input{
   			   padding: 7px 10px;
   			   border: 1px solid #e5e5e5;
   			   border-radius: 4px;
   			   font-size: 14px;
   		   }
   	   }
   }
   
   .list{
	   font-size: 28rpx;
	   .list-item{
		   display: flex;
		   flex-direction: column;
		   margin-top: 30rpx;
		   padding: 20rpx;
		   border-radius: 20rpx;
		   background-color: #eee;
		   
		   .litem{
			   display: flex;
			   margin: 4rpx 0;
			   .title{
				   width: 160rpx;
			   }
			   
			   .info{
				   flex:1;
			   }
		   }
		   
		   .operate{
			   display: flex;
			   justify-content: flex-end;
			   .del{
				   margin: 0;
			   }
		   }
	   }
   }
</style>
