<template>

	<view class="box flex justify-center align-items flex-column">

		<!-- 全部课程 -->
		<view class="hot flex flex-column align-items" style="margin-top: 32rpx;    height: 100%;">
			<view class="header flex  align-items" style="justify-content: space-between;">
				<!-- <view class="h-left flex align-items">
					<image src="../../static/center/Total.png" mode=""
						style="width: 168rpx; height: 32rpx; margin-left: 14rpx;"></image>
				</view> -->
			<!-- 	<view class="h-right flex align-items" @click="openShow">
					<span style="margin-right: 12rpx; color: #EAEAEA;">筛选</span>
					<image src="../../static/center/Sift.png" mode=""
						style="width: 34rpx; height: 34rpx; margin-right: 9rpx;"></image>
				</view> -->
			</view>
			<view class="new flex align-items" style="">
				<view class="flex justify-center align-items " style="" v-for="(item,index) in list" :key="index"
					:style="{ marginLeft: index % 2 == 0 ? '32rpx' : '0' }">
					<view class="con-center flex justify-center flex-column" style="align-items: flex-start;">
						<image :src="item.image" mode="" style="width: 280rpx; height: 200rpx;"></image>
						<span class="jita">吉他入门教学</span>
						<view class="mingeBox flex justify-center align-items">
							<image :src="item.icon" mode="" style="width: 36rpx; height: 36rpx;"></image>
							<span class="minge">{{item.now}}/{{item.altogether}}名额</span>
						</view>
						<span class="money">￥{{item.money}}</span>
						<span class="line-row"></span>
					</view>
					<span class="line" v-if="index % 2 == 0"></span>
				</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<u-popup :show="show" mode="right" height="100%"   @close="closeShow" class="relative" :custom-style="popupStyle">
			<view class="flex align-items flex-column" style="width:500rpx">
				<view class="pop-header flex align-items flex-column" style="justify-content: space-around;">
					<view class="flex align-items" style="width:449rpx;justify-content: space-between;">
						<span class="types">课程类型</span>
						<span class="select" @click="cancel(0)">取消选择</span>
					</view>
					<span class="pop-line"></span>
				</view>
				<view class="selectBox flex align-items" style="justify-content: flex-start;flex-wrap: wrap;">
					<view class="selectType" v-for="(item,index) in types" :key="index" @click="toggleSelection(item)"
						:class="{ selected: isSelected(item) }">
						{{item}}
					</view>
				</view>
			</view>
			<!-- 上课地点 -->
			<view class="flex align-items flex-column" style="width:500rpx">
				<view class="pop-header flex align-items flex-column" style="justify-content: space-around;">
					<view class="flex align-items" style="width:449rpx;justify-content: space-between;">
						<span class="types">上课地点</span>
						<span class="select" @click="cancel(1)">取消选择</span>
					</view>
					<span class="pop-line"></span>
				</view>
				<view class="selectBox flex align-items" style="justify-content: flex-start;flex-wrap: wrap;">
					<view class="selectType" v-for="(item,index) in areas" :key="index" @click="areaSelection(item)"
						:class="{ selected: areaSelected(item) }">
						{{item}}
					</view>
				</view>
			</view>
			<view class="btn">
				<!-- <u-button :custom-style="customStyle">月落</u-button> -->
				<image src="../../static/center/btn.png" mode=""></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				types: ['电脑技术', '电脑技术', '电脑技术', '电脑技术', '音乐', '绘画', '体育运动'],
				areas: ['老城区', '涧西区', '洛龙区', '西工区', '新安县', '栾川县', '伊川县'],
				typeList: [],
				areaList: [],
				popupStyle:{
					background: "#EAEAEA",
				},
				list: [{
						image: "../../static/center/jita.jpeg",
						name: "吉他入门教学",
						icon: "../../static/center/minge.png",
						now: "200",
						altogether: '600',
						money: "600",
						rank: "../../static/center/rank1.png",
					},
					{
						image: "../../static/center/jita.jpeg",
						name: "吉他入门教学",
						icon: "../../static/center/minge.png",
						now: "200",
						altogether: '600',
						money: "600",
						rank: "../../static/center/rank1.png",
					},
					{
						image: "../../static/center/jita.jpeg",
						name: "吉他入门教学",
						icon: "../../static/center/minge.png",
						now: "200",
						altogether: '600',
						money: "600",
						rank: "../../static/center/rank1.png",
					},
					{
						image: "../../static/center/jita.jpeg",
						name: "吉他入门教学",
						icon: "../../static/center/minge.png",
						now: "200",
						altogether: '600',
						money: "600",
						rank: "../../static/center/rank1.png",
					},
					{
						image: "../../static/center/jita.jpeg",
						name: "吉他入门教学",
						icon: "../../static/center/minge.png",
						now: "200",
						altogether: '600',
						money: "600",
						rank: "../../static/center/rank1.png",
					}
				]

			}
		},
		methods: {
			openShow() {
				this.show = true
			},
			closeShow(){
				this.typeList = []
				this.areaList = []
				this.show = false
			},
			
			//类型选择
			toggleSelection(item) {
				if (this.typeList.includes(item)) {
					// 取消选中
					this.typeList = this.typeList.filter(i => i !== item);
				} else {
					// 选中
					this.typeList.push(item);
				}
				console.log(this.typeList)
			},
			isSelected(item) {
				return this.typeList.includes(item);
			},
			// 上课地点
			areaSelection(item){
				if (this.areaList.includes(item)) {
					// 取消选中
					this.areaList = this.areaList.filter(i => i !== item);
				} else {
					// 选中
					this.areaList.push(item);
				}
			},
			areaSelected(item) {
				return this.areaList.includes(item);
			},
			// 取消选择
			cancel(num){
				if (num == 0) {
					this.typeList = []
				} else {
					this.areaList = []
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	.box {
		padding: 0 30rpx 0rpx 30rpx;
		background-color: #F1F2F8;
	}

	.search {
		margin-top: 30rpx;
		height: 52rpx;
		border: 4rpx #EAEAEA dashed;

		.dashed {
			image {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.input {
			border: 4rpx solid #EAEAEA;
			padding-left: 12rpx;
			height: 100%;
			width: 100%;
		}

		/deep/ .input-placeholder {
			font-weight: 800;
			font-size: 24rpx;
			color: #8B8B8B;
			line-height: 54rpx;

		}

	}

	.w-100 {
		width: 100%;
	}

	.flex {
		display: flex;
	}

	.justify-center {
		justify-content: center;
	}

	.align-items {
		align-items: center;
	}

	.flex-column {
		flex-flow: column;
	}

	.hot {
		width: 100%;
		height: 504rpx;
	}

	.header {
		width: 100%;
		height: 42rpx;
		background: #4974FF;
		margin-top: 42rpx;
		box-shadow: 2rpx 2rpx 0rpx 0rpx rgba(0, 0, 0, 0.4);

		image {}
	}

	.content {
		height: 462rpx;
		overflow-x: auto;
		/* 允许横向滚动 */
		white-space: nowrap;
	}

	.new {
		width: 100%;
		justify-content: flex-start;
		display: flex;
		flex-wrap: wrap;
		position: relative;
	}

	.pos {
		position: absolute;
		bottom: 0rpx;
		right: 0rpx;
	}

	.content,
	.new {
		width: 100%;
		background: #EAEAEA;
		border-radius: 0rpx 0rpx 0rpx 0rpx;


		/* 禁止换行 */
		.con-center {
			width: 280rpx;
			height: 398rpx;

			.jita {
				font-weight: 800;
				font-size: 28rpx;
				color: #343434;
				line-height: 32rpx;
				margin-top: 14rpx;
			}

			.line-row {
				width: 280rpx;
				height: 1rpx;
				background: #D9D9D9;
				margin: 12rpx 0 12rpx 0;
				box-shadow: 1rpx 1rpx 0rpx 0rpx rgba(102, 102, 102, 0.25);
			}

			.mingeBox {
				.minge {
					font-weight: 500;
					font-size: 24rpx;
					color: #7A7A7A;
					line-height: 32rpx;
				}
			}

			.money {
				display: flex;
				align-self: flex-end;
				font-weight: 800;
				font-size: 36rpx;
				color: #FF2323;
				line-height: 32rpx;
				margin-top: 24rpx;
			}
		}

		.line {
			height: 398rpx;
			width: 1rpx;
			background: #D9D9D9;
			margin: 0rpx 34rpx 0 34rpx;
			box-shadow: 1rpx 1rpx 0rpx 0rpx rgba(102, 102, 102, 0.25);
		}
	}

	.ovr:first-child {
		margin-left: 34rpx;
	}

	.ovr:last-child {
		margin-right: 34rpx;
	}

	.footer {
		margin: 120rpx 0 40rpx 0;
		font-weight: 500;
		font-size: 24rpx;
		color: #BCBCBC;
		line-height: 32rpx;
	}

	.pop-header {
		margin-top: 35rpx;

		.types {
			font-weight: 800;
			font-size: 24rpx;
			color: #343434;
			line-height: 32rpx;
		}

		.select {
			font-weight: 400;
			font-size: 20rpx;
			color: #343434;
			line-height: 32rpx;
		}

		.pop-line {
			width: 449rpx;
			height: 2rpx;
			margin-top: 18rpx;
			background: #D9D9D9;
			box-shadow: 1rpx 1rpx 0rpx 0rpx rgba(0, 0, 0, 0.25);
		}
	}

	.selectBox {
		width: 449rpx;

		.selectType {
			height: 21rpx;
			background: #D9D9D9;
			font-weight: 500;
			font-size: 24rpx;
			color: #4B4B4B;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 12rpx 14rpx 17rpx 14rpx;
			margin: 24rpx 12rpx 0 0;
		}
	}

	.selectType.selected {
		background-color: #007bff;
		color: white;
	}
	.relative{
		position: relative;
		background-color: red;
	}
	.btn{
		position: absolute;
		bottom: 53rpx;
		width: 449rpx;
		left: 30rpx;
		image{
			width: 449rpx;
			height: 73rpx;
		}
	}
</style>