<template>
	<view class="main">
		<view class="search">
			<view class="item">
				<view class="label">培训名称：</view>
                 <input class="tui-input"
                        placeholder-class="phcolor"
                        placeholder="请输入培训名称"
                        v-model="formData.name"
                        maxlength="20"></input>
				<button size="mini" type="primary"  @click="search">搜索</button>
			</view>
		</view>
		
		<view class="list">
			<view class="list-item" v-for="item in list" :key="item.id">
				<view class="litem">
					<view class="title">培训名称：</view>
					<view class="info">{{item.name}}</view>
				</view>
				<view class="litem">
					<view class="title">班组名称：</view>
					<view class="info">{{item.org_name}}</view>
				</view>
				<view class="litem">
					<view class="title">培训时间：</view>
					<view class="info">{{item.train_time}}</view>
				</view>
		
				<view class="litem">
					<view class="title">培训视频：</view>
					<view class="info">
						<span v-for="(vo, index) in item.train_video" :key="index">{{vo.name}} </span>
					</view>
				</view>
				<view class="operate">
					<button size="mini" type="warn"  @click="del(item.id)" class="del">删除</button>
					<button size="mini" type="primary"  @click="edit(item)" class="edit">编辑</button>
				</view>
				
			</view>
		</view>
		<view style="margin-top: 20rpx;">
			<uni-pagination show-icon :page-size="formData.limit" :current="formData.page" :total="total" @change="change" />
		</view>
		
	</view>
</template>

<script>
	import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
	export default {
		data() {
			return {
				formData:{
					name:'',
					page:1,
					limit:10
				},
				list:[],
				total:0
			};
		},
		onLoad() {
			this.getTeamsList()
		},
		computed: {
		  ...mapState(["hasLogin", "userinfo"]),
		},
		onShow() {
			  if(!this.hasLogin)
			  {
				uni.redirectTo({
					url: '/pages/common/login/login?href2=train/teams/index'
				});
				return false;
			  }
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url:'add'
			})
		},
		methods:{
			edit(item){
				uni.setStorageSync('team_info',item)
				uni.navigateTo({
					url:'edit'
				})
			},
			search(){
				this.formData.page = 1;
				this.getTeamsList()
			},
			change(e){
				this.formData.page = e.current
				this.getTeamsList()
			},
			getTeamsList()
			{
				getApp().globalData.request.get(
				  "learn/train/getTeamsList",this.formData
				).then(res=>{
					this.list = res.data.data
					this.total = res.data.total
				})
			},
			del(id)
			{
				getApp().globalData.request.get(
				  "learn/train/delTeams",{id:id}
				).then(res=>{
					if(res.code == -1)
					{
						uni.showToast({
							title: res.msg,
							duration: 2000
						});
					}else{
						uni.showToast({
							title: '删除成功',
							duration: 2000
						});
						this.getTeamsList()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
   .main{
	   min-height: 500rpx;
	   padding: 20rpx;
	   font-size: 26rpx;
   }
   .tui-input {
     font-size: 30rpx;
     height: 88rpx;
     border: 1rpx solid #e6e6e6;
     border-radius: 4rpx;
     padding: 0 25rpx;
     box-sizing: border-box;
   }
   .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;
			   button{
				   background-color: #008782;
			   }
			   .del{
				   margin: 0;
			   }
			   .edit{
				   margin: 0 20rpx;
			   }
		   }
	   }
   }
</style>
