<template>
	<view class="single">
		<view class="single-lan">
			<button @click="addplayer">
				<uni-icons type="plus"></uni-icons>
				<text>添加玩家</text>
			</button>
			<button @click="transfer">
				<uni-icons type="person-filled"></uni-icons>
				<text>转让计分员</text>
			</button>
			<view class="lan-switch">
				<switch @change="" />
				<text>语音播报</text>
			</view>
			<view class="lan-switch">
				<switch @change="" />
				<text>台版</text>
			</view>
		</view>
		<view class="single-detail">
			<text class="sing-detail-title">对局记录</text>
			<text>点击对局分数进行修改</text>
		</view>
		<view class="single-score">
			<text style="color: red;" class="score-remind">
				点击头像编辑自己的昵称和性别~
			</text>
			<view class="single-score-record">
					<view class="score-record-player">
						<text class="score-head">玩家</text>
						<view v-for="(item,index) in players" :key="index" class="player" @click="gotoNewPage">
							<image :src="item.avatar" mode="widthFix"></image>
							<text>{{item.name}}</text>
						</view>
					</view>
					<view class="score-record-all">
						<text class="score-head">总分</text>
						<view class="all-score" v-for="(item,index) in allscores" :key="item.id">
							{{item.allscore}}
						</view>					
					</view>
					<view class="score-record-all" v-for="match in matchs" :key="match.id">
						<text class="score-head">第{{match.gametime}}局</text>
						<view class="all-score" v-for="(item,index) in match.details" :key="item.id">
							{{item.score}}
						</view>					
					</view>
			</view>
		</view>
		<view class="single-bottom">
			<button 
			style="color: aliceblue; 
			background-color: rgb(55, 47, 172);"
			@click="gotoNewPage1"
			>
			开局计分</button>
			<button
			@click="multiple"
			>结算房间</button>
		</view>	
		<l-popup v-model="isPopupVisible" :closeable="true">
			<view class="popup-add">
				<view class="tilte">
					<text class="title">扫码加入房间</text>
				</view>
				<view class="line"></view>
				<text class="small">邀请好友扫描下方二维码加入房间</text>
				<image src="/static/logo.png" mode=""></image>
				<button class="share">分享给好友邀请加入房间</button>
				<button class="hand" @click="addvirtue">手动添加虚拟玩家</button>
			</view>
		</l-popup>
		<l-popup v-model="isPopupVisible1" :closeable="true">
			<view class="popup-add">
				<view class="tilte">
					<text class="title">提示</text>
				</view>
				<view class="line"></view>
				<text class="small">房间内暂无扫码或分享加入房间的玩家，暂时无法转让计分员</text>
				<button @click="closetransfer">确定</button>
			</view>
		</l-popup>
		<l-popup v-model="virtueplayer" :closeable="true">
			<view class="popup-virtue">
				<view class="tilte">
					<text class="title">添加玩家</text>
				</view>
				<view class="line"></view>
				<view class="lan-input">
					<uni-easyinput v-model="value" placeholder="请输入名称" style="width: 500rpx;"></uni-easyinput>
				</view>
				
				<view class="lan-button">
					<button @click="closevirtue">取消</button>
					<button @click="closevirtue">确定</button>
				</view>
			</view>
		</l-popup>
		<l-popup v-model="isPopupVisible2" :closeable="true">
			<view class="popup-virtue">
				<view class="tilte">
					<text class="title" style="font-weight: 600;">输入倍率，快速结算！</text>
				</view>
				<view class="line"></view>
				<view class="lan-input">
					<uni-easyinput v-model="value" placeholder="请输入倍率" style="width: 400rpx;"></uni-easyinput>
				</view>
				
				<view class="lan-button">
					<button @click="closemultiple">取消</button>
					<button @click="closemultiple">确定</button>
				</view>
			</view>
		</l-popup>
	</view>
</template>
<script setup>
import { ref, onMounted } from 'vue';
//跳转至user-detail
const gotoNewPage = () => {
  wx.navigateTo({
    url: '/pages/user-detail/user-detail'
  })
}

//跳转至compute
const gotoNewPage1 = () => {
  wx.navigateTo({
    url: '/pages/compute/compute'
  })
}


//添加玩家按钮弹窗
const isPopupVisible = ref(false);

const addplayer = ()=>{
	isPopupVisible.value = true;
}

const closeplayer = ()=>{
	isPopupVisible.value = false;
}

//添加虚拟玩家
const virtueplayer = ref(false);

const addvirtue = ()=>{
	isPopupVisible.value = false;
	virtueplayer.value = true;
}

const closevirtue = ()=>{
	virtueplayer.value = false;
}

//转让计分员按钮弹窗
const isPopupVisible1 = ref(false);

const transfer = ()=>{
	isPopupVisible1.value = true;
}

const closetransfer = ()=>{
	isPopupVisible1.value = false;
}

//倍率结算按钮弹窗
const isPopupVisible2 = ref(false);

const multiple = ()=>{
	isPopupVisible2.value = true;
}

const closemultiple = ()=>{
	isPopupVisible2.value = false;
}

const matchs = ref([
        {
          id: 1,
          gametime: 1,
          details: [
            {id: 101, score: "+"+10},
            {id: 102, score: "+"+20},
			{id: 103, score: "-"+30}
          ],
        },
        {
          id: 2,
          gametime: 2,
          details: [
            {id: 201, score: "+"+10},
            {id: 202, score: "+"+20},
			{id: 203, score: "-"+30}
          ]
        }
      ])

const allscores = ref([
	{
		id: 301,
		allscore: "+"+ 20,
	},
	{
		id: 302, 
		allscore: "+"+ 40,
	},
	{	id: 303, 
		allscore: "-"+ 60,
	}
])
// const details = ref(
// 	score[1,2,3]
// )
const players = ref([
	{
		id: 401,
		name: '刘备',
		avatar: 'https://img1.baidu.com/it/u=3612220943,2414740890&fm=253&app=138&f=JPEG?w=526&h=500'
	},
	{
		id: 401,
		name: "赵云",
		avatar: 'https://q3.itc.cn/q_70/images03/20250110/1e71eecf56b34344bcae6a5b85c0bec2.jpeg'
	},
	{
		id: 401,
		name: "张飞",
		avatar: 'https://q1.itc.cn/q_70/images03/20241119/197701bb9ef34b20b6497720081a9972.jpeg'
	}
])

</script>

<style scoped lang="less">
.single{
	.single-lan{
		display: flex;
		border-bottom: 1.5px solid rgb(237, 237, 237);
		margin-top: 10rpx;
		padding-bottom: 10rpx;
		padding-right: 13rpx;
		button::after {
		    border: none;
		    display: none;
		}
		button{
			padding: 0;
			font-size: 14.4px;
			border: 0;
			outline: none;
			background-color: #fff;
			text{
				color: rgb(102, 102, 102);
			}
		}
		.lan-switch{
			display: flex;
			align-items: center;
			switch{
				transform:scale(0.7);
			}
			text{
				font-size: 14.4px;
				color: rgb(102, 102, 102);
			}
		}
	}
	.single-detail{
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid rgb(237, 237, 237);
		padding: 20rpx 0;
		.sing-detail-title{
			font-weight: 600;
			font-size: 37rpx;
			padding: 0 12rpx;
			color: black;
		}
		text{
			font-size: 29rpx;
			color: rgb(102, 102, 102);
		}
	}
	.single-score{
		padding-top: 20rpx;
		display: flex;
		flex-direction: column;
		.score-remind{
			align-self: center;
			font-size: 29rpx;
			padding-bottom: 20rpx;
		}
		.score-record-player{
			display: flex;
			margin: 30rpx 0;
			.score-head{
				width: 90rpx;
				align-self: center;
				padding: 10rpx;
			}
			.player{
				width: 160rpx;
				display: flex;
				flex-direction: column;
				// margin: 0 35rpx;
				align-items: center;
				image{
					width: 100rpx;		
				}
			}
		}
		.score-record-all{
			display: flex;
			.score-head{
				margin: 10rpx 0;
				width: 90rpx;
				align-self: center;
				padding: 10rpx;
			}
			.all-score{
				display: flex;
				width: 160rpx;
				align-items: center;	
				justify-content: center;
			}
		}
	}
	.single-bottom{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: white;
		padding: 20rpx;
		display: flex;
		justify-content: center;
		gap: 20rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1);
		button{
			width: 350rpx;
			border: 2rpx solid rgb(55, 47, 172);
		}
	}
	.popup-add{
		width: 600rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 20rpx;
		padding-bottom: 25rpx;
		.title{
			font-size: 38rpx;
			padding-bottom: 20rpx;
			text{
				padding: 0 100rpx;
			}
		}
		.line{
			width: 580rpx;
			height: 0.1rpx;
			background-color: RGB(211, 211, 211);
			margin-top: 30rpx;
		}
		.small{
			padding-top: 30rpx;
			color: rgb(102, 102, 102);
			width: 450rpx;
			font-size: 28rpx;
			margin-bottom: 10rpx;
		}
		.share{
			margin-top: 30rpx;
		}
		image{
			width: 400rpx;
			height: 400rpx;
			margin-top: 20rpx;
			
		}
		button{
			margin-top: 15rpx;
			width: 450rpx;
			font-size: 30rpx;
			margin-bottom: 15rpx;
			background-color: rgb(55, 47, 172);
			color: #fff;
		}
	}
	.popup-virtue{
		width: 600rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 20rpx;
		padding-bottom: 25rpx;
		.title{
			font-size: 38rpx;
			padding-bottom: 20rpx;
			margin-bottom: 20rpx;
			text{
				padding: 0 100rpx;
			}
		}
		.line{
			width: 580rpx;
			height: 0.1rpx;
			background-color: RGB(211, 211, 211);
			margin-top: 30rpx;
			margin-bottom: 50rpx;
		}
		.small{
			padding-top: 30rpx;
			color: rgb(102, 102, 102);
			width: 450rpx;
			font-size: 28rpx;
			margin-bottom: 10rpx;
		}
		.share{
			margin-top: 30rpx;
		}
		image{
			width: 400rpx;
			height: 400rpx;
			margin-top: 20rpx;
			
		}
		uni-easyinput{
			padding-top: 30rpx;
		}
		.lan-button{
			padding-top: 50rpx;
			display: flex;
		}
		button{
			margin-top: 15rpx;
			width: 260rpx;
			margin: 0 12rpx;
			font-size: 30rpx;
			background-color: rgb(55, 47, 172);
			color: #fff;
		}
	}
}
</style>
