<template>
	
	<view class="content flex_col flex_start">
		
		<view class="head flex_row flex_around" v-if="!!showHeader">
			<view class="tap-btn" :class="[getTabClass(e)]" @click="clickHead(i)" v-for="(e,i) in headDate" :key="i">
				{{e.name}}
			</view>
		</view>
		
		<!--schedule item -->
		<block v-if="headIndex==0">
		<view class="item flex_col flex_start_y bg-white  " v-for="(i,k) in pageList" :key="k">
			
			<view class="title flex_row flex_start">
				<view class="text-m text-left">{{match_name}}</view>
				<!-- <view class="bandage"></view> -->
			</view>
			
			<view class="info flex_row flex_between">
				<view class="time">{{i.schedule_start_date}}</view>
				<view class="type">{{i.schedule_name}}</view>
			</view>
			
			<view class="card  flex_row flex_between" v-for="(u,ukey) in i.son_list">
				<view class="persion flex_row">
					<image class="bg-brown" :src="u.member_img" :key="ukey" mode=""></image>
					<text>{{u.member_name}}</text>
				</view>
				
				<view class="btn-box flex_row">
					<view class="btn state-0 flex_row" v-if="u.is_set_score" @click="openGrade(u)">已打分</view>
					<view class="btn state-1 flex_row" v-else @click="openGrade(u)">打分</view>
					<view class="btn state-2 flex_row" @click="openGradeRank(u)">数据</view>
				</view>
			</view>
		</view>
		</block>
		<!--match item -->
		<block v-if="headIndex==1">
		<view class="item flex_col flex_start_y bg-white ">
			
			<view class="title flex_row flex_start">
				<view class="text-m text-left">{{match_name}}</view>
				<!-- <view class="bandage"></view> -->
			</view>
			
			<!-- <view class="info flex_row flex_between">
				<view class="time">{{i.schedule_start_date}}</view>
				<view class="type">{{i.schedule_name}}</view>
			</view> -->
			
			<view class="card  flex_row flex_between" v-for="(u,ukey) in pageList" :key="ukey">
				<view class="persion flex_row">
					<image class="bg-brown" :src="u.member_img" :key="ukey" mode=""></image>
					<text>{{u.member_name}}</text>
				</view>
				
				<view class="btn-box flex_row">
					<view class="btn state-0 flex_row" v-if="u.is_set_score" @click="openGrade(u)">已打分</view>
					<view class="btn state-1 flex_row" v-else @click="openGrade(u)">打分</view>
					<view class="btn state-2 flex_row" @click="openGradeRank(u)">数据</view>
				</view>
			</view>
		</view>
		</block>
		
		<!-- 无数据 -->
		<no-data :txt="no_data_txt_arr[headIndex]" v-if="pageList.length==0"></no-data>
		
		<!-- 弹出交互 uview popup有bug,废弃重写-->
<!-- 		<u-popup :show="showGrade" @close="close" @open="open" mode="center" :closeOnClickOverlay="true" :closeable="true" :round="10">
			<view class="grade flex_col flex_start" >
				<text class="g-title">赛事打分</text>
				<text class="g-txt">李静分数录入</text>
				<input type="text" value="" placeholder="请录入分数" />
				<view class="g-tip">请输入成员该赛程最终得分，非累计</view>
				<view class="g-btn flex_row">保存</view>
			</view>
		</u-popup> -->
		
		<!-- 打分弹出 -->
		<view class="overlay flex_col" v-if="showGrade">
			<view class="grade flex_col flex_start" >
				<image class="g-close" src="../../static/images/event/event_close.png" mode="" @click="closeGrade()"></image>
				<text class="g-title">赛事打分</text>
				<text class="g-txt">{{gradeData.user.member_name||""}}分数录入</text>
				<input type="number " class="" v-model="gradeData.score" value="" placeholder="请录入分数" placeholder-class="place-style"/>
				<view class="g-tip">请输入成员该赛程最终得分，非累计</view>
				<view class="g-btn flex_row" @click="saveGrade()">保存</view>
			</view>
		</view>
		
		<!-- 赛事数据录入弹出 -->
		<view class="overlay flex_col" v-if="showGradeRank">
			<view class="grade grade-more flex_col flex_start" >
				<image class="g-close" src="../../static/images/event/event_close.png" mode="" @click="closeGradeRank()"></image>
				<text class="g-title">{{match_name}}数据</text>
				<text class="g-txt">{{gradeDataRank.user.member_name}}分数录入</text>
				<view class="g-input-box">
					<view class="b-item flex_row" v-for="(si,sk) in gradeDataRank.list" :key="sk">
						<text>{{si.rank_param_name}}</text>
						<input type="number" value="" v-model="si.val" placeholder="请录入数据" placeholder-class="place-style"/>
					</view>
					<!-- <view class="b-item flex_row">
						<text>助攻</text>
						<input type="number" value="" placeholder="请录入数据" placeholder-class="place-style"/>
					</view>
					<view class="b-item flex_row">
						<text>场次</text>
						<input type="number" value="" placeholder="请录入数据" placeholder-class="place-style"/>
					</view> -->
					
				</view>
				<view class="g-tip">请输入成员该赛程最终得分，非累计</view>
				<view class="g-btn flex_row" @click="saveRank()">保存</view>
			</view>
		</view>
		
	</view>
</template>
<script>
	import {schedule_matchList,schedule_scoreSave,
	scoreSave,scoreMemberList,
	rankOcondList,rankSave} from "../../nxTemp/apis/userAPI.js"
	
	export default {
		data() {
			return {
				showGrade:false,//赛事个人打分弹窗
				showGradeRank:false,//赛事数据弹窗
				showHeader:true,//是否显示头部导航
				headIndex:0,//
				headDate:[{name:'赛程打分'},{name:'赛事打分'}],
				postData:{//请求数据
					page:1,
					page_size:10,
					match_id:"",
					// brand_id:""
				},
				listLoadFinished:false,//是否已加载全部列表
				listTotal:0,//列表总长
				match_name:"",//赛程名称(赛程,赛事一同使用)
				pageList:[],
				gradeData:{//打分弹窗数据
					user:"",
					score:0
				},
				gradeDataRank:{//入围数据录入
					user:"",
					score:0,
					list:""
				},
				brand_id:"",
				no_data_txt_arr:["暂无赛程安排~","暂无人员参加~"]
			};
		},
		computed:{

		},
		onLoad(opts) {
			console.log(8888,opts);
			this.setOnloadOpts(opts)
			this.updatePage()
		},
		onUnload() {
			this.resetPostData()
		},
		onPullDownRefresh(){
			console.log("onPullDownRefresh");
		},
		onReachBottom(){
			console.log("onReachBottom");
			this.updatePage()
		},
		methods: {
			//更新页面列表
			updatePage() {
				if(this.listLoadFinished)return this.$tools.showNone("已加载完毕")
				getPostAPI(this)(this.postData).then(res => {
					this.pageList.push(...res.list)
					this.match_name = res.match_name
					checkListLoadFinished(res,this);
				}).catch(e=>{
					this.$tools.showNone(e.errMsg)
				})

				function getPostAPI(that){
					return [schedule_matchList,scoreMemberList][that.headIndex]
					// return [schedule_matchList,matchList][that.headIndex]
				}
				//检测是否完成加载
				function checkListLoadFinished(res,that){
					if(that.pageList.length == res.total)that.listLoadFinished = true
					else that.postData.page++
				}
				function getFilterList(list){
					return list
				}
			},
			//预留
			getFilteredItem(item){
				return Promise.resolve({}=item)
			},
			//重置请求参数
			setOnloadOpts(opts){
				console.log("onLoad:",opts);
				opts.showHeader = JSON.parse(opts.showHeader)
				this.postData.match_id = opts.match_id||""
				this.headIndex = opts.showHeader?0:1;// 一定有赛事打分， 但不一定有赛程
				this.showHeader = opts.showHeader
				// this.postData.brand_id = opts.brand_id||""
				this.brand_id = opts.brand_id||""
			},
			resetPostData(){
				// this.postData = {
				// 	page:1,
				// 	page_size:10,
				// 	match_id:""
				// }
				this.postData.page = 1;
				this.pageList = [];
				this.listLoadFinished = false;
			},
			saveGrade() {//保存分数
				let {score} = this.gradeData
				let {order_no,schedule_son_id,id:schedule_id} = this.gradeData.user
				if(score<=0)return this.$tools.showNone("请输入分数");
				getPostAPI(this)(getPostData(this)).then(res => {
					this.$tools.showNone("已保存");
					this.closeGrade()
				}).catch(e=>{
					this.$tools.showNone(e.errMsg)
					this.closeGrade()
				})
				function getPostAPI(that){
					return [schedule_scoreSave,scoreSave][that.headIndex]
				}
				function getPostData(that){
					let {brand_id} = that
					return [{order_no,schedule_son_id,schedule_id,score},{order_no,score,brand_id}][that.headIndex]
				}
			},
			openGrade(user) {
			  this.showGrade = true
			  this.gradeData.user = user
			  this.gradeData.score = ""
			  console.log('open',JSON.stringify(user));
			},
			closeGrade() {
			  this.showGrade = false
			  console.log('closeGrade');
			},
			async openGradeRank(user) {
			  this.gradeDataRank.user = user
			  this.gradeDataRank.score = ""
			  let res = await this.updateRankList()
			  this.showGradeRank = true
			  console.log('openGradeRank',res);
			},
			closeGradeRank() {
			  this.showGradeRank = false
			  console.log('closeGradeRank');
			},
			saveRank(){
				let {order_no} = this.gradeDataRank.user
				let {brand_id} = this
				brand_id = parseInt(brand_id)
				let rank_data = getRankData(this)
				if(!checkData(rank_data)) return this.$tools.showNone("请输入合适的分数")
				rankSave({
					order_no,brand_id,rank_data
				}).then(res => {
					this.$tools.showNone("保存成功")
					this.closeGradeRank()
				}).catch(e=>{
					this.$tools.showNone(e.errMsg)
				})
				function getRankData(that){
					return that.gradeDataRank.list.map((item)=>{
						let {id,val} = item
						return {id,val}
					})
				}
				function checkData(list){
					return list.every((e)=>{
						return parseInt(e.val)>0
					})
				}
			},
			updateRankList(){
				let {order_no} = this.gradeDataRank.user
				let {brand_id} = this
				return rankOcondList({
					order_no,brand_id
				}).then(res => {
					console.log("updateRankList:",res);
					this.gradeDataRank.list = res.list
				}).catch(e=>{
					this.$tools.showNone(e.errMsg)
				})
			},
			getTabClass(item){
				let {headDate,headIndex} = this
				return headDate[headIndex].name==item.name?'active':''
			},
			clickHead(index){
				this.headIndex = index
				console.log("click index: ",index);
				this.resetPostData();
				this.updatePage();
			},
			jumpPage(){
				this.$Router.push({name:"login"})
			},
		}
	}
</script>

<style lang="less" scoped>
.content{
	
	.head{
		width: 100%;
		height: 112rpx;
		background-color: white;
		.tap-btn{
			font-size: 36rpx;
			color: #333333;	
			font-weight: 700;
			width: 200rpx;
			height: 72rpx;
			text-align: center;
			line-height: 72rpx;
		}
		.active{
			color: white;
			background: #009874;
			border-radius: 36rpx;
		}
	}
	
	.item{
		color: #333333;
		position: relative;
		margin-top: 24rpx;
		// border-radius: 10rpx;
		width: 750rpx;
		// height: 124rpx;
		
		.title{
			font-size: 36rpx;
			color: #333333;	
			// margin-bottom: 10rpx;
			font-weight: 700;
			height: 116rpx;
			width: 100%;
			padding-left: 60rpx;
			border-bottom: 1rpx solid #f2f2f7;
		}
		.info{
			font-weight: 700;
			font-size: 32rpx;
			color: #333333;
			height: 96rpx;
			width: 100%;
			padding: 26rpx 24rpx 26rpx 60rpx;
			border-bottom: 1rpx solid #f2f2f7;
		}
		.card{
			height: 188rpx;
			width: 100%;
			padding: 40rpx 24rpx 40rpx 50rpx;
			border-bottom: 1rpx solid #f2f2f7;
			.persion{
				> image{
					width: 108rpx;
					height: 108rpx;
				}
				> text{
					font-size: 32rpx;
					color: #333333;
					margin-left: 24rpx;
				}
			}
			
			.btn-box{
				.btn{
					margin-left: 20rpx;
					width: 132rpx;
					height: 60rpx;
					background: #FF873D;
					border-radius: 6rpx;
					color: white;
				}
				.state-0{
					background-color: #36C990;
				}
				.state-1{
					background-color: #009874;
				}
				.state-2{
					background-color: #FF873D;
				}
			}
		}
		.bandage{
			width: 16rpx;
			height: 16rpx;
			// position: absolute;
			// right: 60rpx;
			background: #EA5061;
			border-radius: 50%;
			font-size: 24rpx;
			color: white;
			text-align: center;
			line-height: 34rpx;
			margin-top: -16rpx;
			margin-left: 10rpx;
		}
	}
}
.overlay{
	position: fixed;
	height: 100vh;
	width: 100%;
	background: rgba(0,0,0,0.6);
	z-index: 90;
	.grade{
		z-index: 999;
		width: 620rpx;
		// height: 600rpx;
		background: #FFFFFF;
		padding: 50rpx;
		border-radius: 10rpx;
		.g-close{
			align-self: flex-end;
			width: 32rpx;
			height: 32rpx;
		}
		.g-title{
			margin-top: 20rpx;
			font-size: 32rpx;
			color: #333333;
			font-weight: 700;
		}
		.g-txt{
			margin: 58rpx auto 12rpx auto;
			font-size: 28rpx;
			color: #333333;
		}
		 input{
			width: 456rpx;
			height: 88rpx;
			background: #FFFFFF;
			border: 2rpx solid #D8D8D8;
			border-radius: 10rpx;
			padding:0 20rpx;
		}
		.g-tip{
			align-self: flex-start;
			font-size: 24rpx;
			color: #9A9A9D;
			margin-top: 10rpx;
			margin-bottom: 52rpx;
			margin-left: 32rpx;
		}
		.g-btn{
			width: 240rpx;
			height: 88rpx;
			background: #009874;
			border-radius: 10rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			font-weight: 700;
			margin-bottom: 34rpx;
		}
	}
	.grade-more{
		padding-left:72rpx;
		padding-right: 80rpx;
		.g-input-box{
			.b-item{
				margin-top: 20rpx;
				> text{
					font-size: 28rpx;
					color: #9C9C9F;
					padding-right: 20rpx;
				}
				input {
					width: 384rpx;
				}
			}
		}
		.g-tip{
			margin-left: 12rpx;
		}
	}
	.place-style{
		font-size: 28rpx;
		color: #9A9A9D;
		// text-align: center;
		// line-height: 88rpx;
	}
}

</style>
