<template>
	<view>
		<image style="width: 100%; height: 1074rpx;" src="@/static/bg (3).png"></image>
		<view class="custom-navigation-bar">
			<view class="left-button" @click="handleBack">
				<uni-icons type="left" color="#fff" size="30"></uni-icons>
			</view>
			<view class="title">
				{{ title }}
			</view>
		</view>
		<view style="margin-top: -30rpx;">
			<uni-row class="demo-uni-row">
				<!-- 	<uni-col :span="2">
			 		 城市：请选择
			 	</uni-col>
			 	<uni-col :span="8">
			 	</uni-col> -->
				<uni-col :span="8">
					<picker @change="bindPickerChange" :value="value" :range="array"
						style="color: #fff;width:300rpx;margin-left: 30rpx;">
						<view class="uni-input">{{array[value]?array[value]:'城市：请选择'}} <uni-icons type="down"
								color="#fff" size="20"></uni-icons></view>
					</picker>
				</uni-col>
				<uni-col :span="8" :offset="7">
					<button class="but" @click="addjule">创建俱乐部</button>
				</uni-col>
			</uni-row>
			<view class="tuxiang">
				<view>
					<image class="tuxiang1" src="@/static/bg (2).png"></image>
				</view>
				<view>
					<image class="tuxiang2" src="@/static/bg (2).png"></image>
				</view>
				<view>
					<image class="tuxiang3" src="@/static/bg (2).png"></image>
				</view>
			</view>
		</view>
		<view class="text">
			<view class="text1">青岛吴霖田径俱 乐部有限公司</view>
			<view class="text1">青岛吴霖田径俱 乐部有限公司</view>
			<view class="text1">青岛吴霖田径俱 乐部有限公司</view>
		</view>
		<view class="text2">
			<view class="text12">南京市</view>
			<view class="text12">南京市</view>
			<view class="text12">南京市</view>
		</view>
		<view class="text3">
			<view class="text13">988</view>
			<view class="text132">988</view>
			<view class="text133">988</view>
		</view>
		<view class="text4">
			<view class="text14">积分</view>
			<view class="text142">积分</view>
			<view class="text143">积分</view>
		</view>
		<view class="borderbottom" style="margin-bottom: 20rpx;"></view>
		<uni-row class="demo-uni-row">
			<uni-col :span="8" :offset="1">
				俱乐部名称1
			</uni-col>
			<uni-col :span="4" :offset="7">
				城市
			</uni-col>
			<uni-col :span="4">
				<text> 积分 </text>
				<image src="../../../static/问号.png" mode="" class="imagejifn" @click="jifendetail"></image>
			</uni-col>
		</uni-row>
		<uni-popup ref="popup" type="bottom" background-color="#fff" border-radius="10px 10px 0 0">
			<view class="guize">
				<view class="guizetop">积分规则</view>
				<view class="guizetext" v-for="(item,index) in 8">
					团队成员每报名1项加5分
				</view>
			</view>
		</uni-popup>
		<view style="margin-top: 20rpx;">
			<uni-table border stripe emptyText="暂无更多数据">
				<uni-tr v-for="(item, index) in tableData" :key="index" @rowClick='adds(index)'>
					<uni-td>{{ item.date }}</uni-td>
					<uni-td>
						<view class="name">{{ item.name }}</view>
					</uni-td>
					<uni-td align="center">{{ item.address }}</uni-td>
				</uni-tr>

			</uni-table>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '俱乐部排行',
				value: '',
				range: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],
				array: ['中国', '美国', '巴西', '日本'],
				tableData: [{
					date: 111,
					name: 222,
					address: 333
				}, {
					date: 111,
					name: 222,
					address: 333
				}],
			}
		},
		methods: {
			addjule(){
				uni.navigateTo({
					url: "/pages/user/clubs/add/add"
				})
			},
			adds(index) {
				uni.navigateTo({
					url: "/pages/user/clubs/detail/detail"
				})
			},
			jifendetail() {
				this.$refs.popup.open('bottom')
			},
			bindPickerChange(e) {
				this.value = e.detail.value
			},
			detail() {
				uni.navigateTo({
					url: "/pages/user/notice/detail/detail"
				})
			},
			handleBack() {
				// uni.navigateBack()
				uni.switchTab({
					url: "/pages/user/index"
				})
			},
			toPage() {
				console.log(1111232)
				uni.navigateTo({
					url: "/pages/user/index"
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.guize {
		width: 750rpx;
		height: 600rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;

		.guizetop {
			text-align: center;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			padding: 20rpx;
			font-size: 30rpx;
			color: #333333;
		}

		.guizetext {
			padding: 10rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
		}
	}

	.imagejifn {
		width: 31rpx;
		height: 31rpx;
		position: absolute;
		top: 4rpx;
		right: 32rpx;
	}

	.borderbottom {
		height: 160rpx;
		border-bottom: 1px dashed black;
	}

	.text2 {
		display: flex;
		justify-content: center;

		.text12 {
			text-align: center;
			width: 30%;
			height: 23rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 36rpx;
			opacity: 0.6;
			margin-top: 20rpx;
		}
	}

	.text4 {
		display: flex;
		justify-content: center;

		.text14 {
			text-align: center;
			width: 30%;
			height: 23rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 22rpx;
			color: #CA151F;
			line-height: 36rpx;
			margin-top: -50rpx;
		}

		.text142 {
			text-align: center;
			width: 30%;
			height: 23rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 22rpx;
			color: #CA151F;
			line-height: 36rpx;
			margin-top: -170rpx;
		}

		.text143 {
			text-align: center;
			width: 30%;
			height: 23rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 22rpx;
			color: #CA151F;
			line-height: 36rpx;
			margin-top: 20rpx;
		}
	}

	.text3 {
		display: flex;
		justify-content: center;

		.text13 {
			text-align: center;
			width: 30%;
			height: 23rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			color: #CA151F;
			line-height: 36rpx;
			margin-top: 235rpx;
		}

		.text132 {
			text-align: center;
			width: 30%;
			height: 23rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			color: #CA151F;
			line-height: 36rpx;
			margin-top: 110rpx;
		}

		.text133 {
			text-align: center;
			width: 30%;
			height: 23rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			color: #CA151F;
			line-height: 36rpx;
			margin-top: 310rpx;
		}
	}

	.text {
		display: flex;
		justify-content: center;

		.text1 {
			width: 204rpx;
			height: 63rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 36rpx;
		}
	}

	.tuxiang {
		display: flex;
		justify-content: center;
	}

	.tuxiang1 {
		width: 112rpx;
		height: 112rpx;
		background: #FFE3E4;
		margin-top: 44rpx;
		border-radius: 50%;
		border: 2px solid #CA151F;
	}

	.tuxiang2 {
		width: 140rpx;
		height: 140rpx;
		margin-left: 48rpx;
		background: #FFE3E4;
		border-radius: 50%;
		border: 2px solid #CA151F;
	}

	.tuxiang3 {
		width: 112rpx;
		height: 112rpx;
		margin-top: 44rpx;
		margin-left: 45rpx;
		background: #FFE3E4;
		border-radius: 50%;
		border: 2px solid #CA151F;
	}

	.but {
		background: #FFFFFF;
		border-radius: 28rpx;
		color: #CA151F;
	}

	.border {
		border: 0px;
	}

	.custom-navigation-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 220rpx;
		/* #ifdef MP-WEIXIN */
		margin-top: -1060rpx;
		/* #endif */
	}

	.left-button,
	.right-button {
		padding: 0 12px;
	}

	.title {
		flex: 1;
		// text-align: center;
		color: #fff;
		font-size: 18px;
		font-weight: bold;
	}
</style>