<template>
	<view>
		<view class="fixed-box">
			<scroll-view scroll-x class="bg-white nav text-center">
				<view class="cu-item" :class="index==TabCur?'bor':''" v-for="(item,index) in list" :key="index" @tap="tabSelect" :data-id="index">
					{{ item }}
				</view>
			</scroll-view>
			<view class="num-box">
				<text v-if="TabCur === 0">已填 {{ competeCompanyCoachList.length }} / 2 人</text>
				<text v-if="TabCur === 1">已填 {{ competeCompanyLeadersList.length }} / 3 人</text>
			</view>
			<button v-show="TabCur === 0 && cha1 !== 2" class="change" :class="cha === 1 ? 'delsure' : ''" @click="change1">
				<text v-show="cha1 === 0">编辑</text>
				<text v-show="cha1 === 1">确定</text>
			</button>
			<button v-show="TabCur === 1 && cha !== 2" class="change" :class="cha === 1 ? 'delsure' : ''" @click="change">
				<text v-show="cha === 0">编辑</text>
				<text v-show="cha === 1">确定</text>
			</button>
		</view>
		<view class="content-box">
			<view v-show="TabCur === 0">
				<view class="infor-box" v-for="(item,index) in competeCompanyCoachList" :key="index">
					<view class="click-box" @click="details(item.coachId)">
						<view class="infor-content"><text>姓名：</text><text class="con">{{ item.coachName }}</text></view>
						<view class="infor-content" v-if="item.gender === 0"><text>性别：</text><text class="con">女</text></view>
						<view class="infor-content" v-else-if="item.gender === 1"><text>性别：</text><text class="con">男</text></view>
						<view class="infor-content"><text>联系电话：</text><text class="con">{{ item.phone }}</text></view>
					</view>
					<icon v-show="cha1 === 1" type="icon" class="cuIcon-roundclosefill del" @click="del(item.coachId)"></icon>
				</view>
			</view>
			<view v-show="TabCur === 1">
				<view class="infor-box" v-for="(item,index) in competeCompanyLeadersList" :key="index">
					<view class="click-box" @click="details1(item.guideId)">
						<view class="infor-content"><text>姓名：</text><text class="con">{{ item.guideName }}</text></view>
						<view class="infor-content" v-if="item.gender === 0"><text>性别：</text><text class="con">女</text></view>
						<view class="infor-content" v-else-if="item.gender === 1"><text>性别：</text><text class="con">男</text></view>
						<view class="infor-content"><text>联系电话：</text><text class="con">{{ item.phone }}</text></view>
					</view>
					<icon v-show="cha === 1" type="icon" class="cuIcon-roundclosefill del" @click="del(item.guideId)"></icon>
				</view>
			</view>
		</view>
		<view v-show="TabCur === 0 && competeCompanyCoachList.length < 2" class="choice" @tap="jump">
			+添加领队
		</view>
		<view v-show="TabCur === 1 && competeCompanyLeadersList.length < 3" class="choice" @tap="jump">
			+添加教练
		</view>
	</view>
</template>

<script>
	import { querycoach } from 'api/querycoach'
	import { deletecoach } from 'api/deletecoach'
	export default {
		onLoad () {
			this.query()
		},
		data() {
			return {
				list: ['领队', '教练'],
				TabCur: 0,
				competeCompanyCoachList: [],
				competeCompanyLeadersList: [],
				cha: 2,
				cha1: 2
			}
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id - 0;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				console.log(this.TabCur,this.cha,this.cha1)
			},
			async del(num) {
				console.log(num)
				const that = this
				uni.showModal({
					title: '提示',
					content: '确认要删除吗？',
					success: async function (res) {
						if (res.confirm) {
							try{
								const params = {
									param: {
										coachId: num
									}
								}
								const data = await deletecoach(params)
								uni.showToast({
									title: '删除成功',
									icon: 'success',
									duration: 1500
								})
								that.$store.state.project.num++
								that.query()
							}catch(e){
								//TODO handle the exception
							}
						}
					}
				})
			},
			change() {
				const that = this
				if(that.cha - 0 === 0) {
					that.cha = 1
				} else {
					that.cha = 0
				}
			},
			change1() {
				const that = this
				if(that.cha1 - 0 === 0) {
					that.cha1 = 1
				} else {
					that.cha1 = 0
				}
			},
			jump() {
				const that = this
				if (that.TabCur === 1) {
					uni.navigateTo({
						url:`../Coach/Coach`
					})
				} else if (that.TabCur === 0) {
					uni.navigateTo({
						url:`../Leader/Leader`
					})
				}
			},
			async query() {
				const that = this
				try{
					const params = {
						param: {
							companyId: that.$store.state.project.companyId
						}
					}
					const data = await querycoach(params)
					if (data.competeCompanyCoachList[0]) {
						that.competeCompanyCoachList = data.competeCompanyCoachList
						that.cha1 = 0
					} else {
						that.cha1 = 2
						that.competeCompanyCoachList = []
					}
					if (data.competeCompanyLeadersList[0]) {
						that.competeCompanyLeadersList = data.competeCompanyLeadersList
						that.cha = 0
					} else {
						that.cha = 2
						that.competeCompanyLeadersList = []
					}
				}catch(e){
					//TODO handle the exception
					that.cha = 2
				}
			},
			details(id) {
				uni.navigateTo({
					url:`../Leader/Leader?id=${id}`
				})
			},
			details1(id) {
				uni.navigateTo({
					url:`../Coach/Coach?id=${id}`
				})
			}
		},
		watch:{
			'$store.state.project.num'(val) {
				const that = this
				that.query()()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav{
		display: flex !important;
	}
	.cu-item {
		width: 325rpx;
	}
	.bor {
		border-bottom: 4px solid #709AFC;
		color: #709AFC;
	}
	.infor-box {
		position: relative;
		box-shadow: 0px 0px 5px $grey;
		background: #fff;
		margin-top: 10px;
		width: 670rpx;
		margin-left: 40rpx;
		border-radius: 10px;
		padding-left: 75rpx;
	}
	.infor-content {
		// margin-top: 10px;
		padding: 10px 0 10px 0;
		// margin-bottom: 20px;
	}
	.con {
		position: absolute;
		left: 350rpx;
	}
	.choice {
		width: 300rpx;
		margin: 20px auto;
		background: $white;
		box-shadow: 0 0 5px $grey;
		border-radius: 5px;
		color: $gray;
		text-align: center;
		height: 40px;
		line-height: 40px;
		font-size: 14px;
	}
	.num-box {
		position: relative;
		width: auto;
		text-align: left;
		height: 30px;
		line-height: 40px;
		font-size: 14px;
		color: $gray;
		margin-left: 35rpx;
	}
	.del {
		font-size: 22px;
		position: absolute;
		right: 10px;
		z-index: 10;
		top: 10px;
		font-weight: 700;
		color: $red;
	}
	.change {
		position: absolute;
		margin-top: -30px;
		height: 30px;
		line-height: 30px;
		background: #eee;
		font-size: 14px;
		right: 40rpx;
	}
	.delsure {
		background: $green;
		color: $white;
	}
	.click-box {
		margin-right: 50px;
	}
	.fixed-box {
		position: fixed;
		z-index: 100;
		background-color: $white;
		top: 44px;
		width: 100%;
	}
	.content-box {
		margin-top: 90px;
	}
</style>
