<template>
	<view class="box">
		<view class="item">
			<view class="lab">科目类型</view>
			<view class="val">
				<myRadio :radioData="radioData1"/>
			</view>
		</view>
		<view class="item">
			<view class="lab">我的教练车</view>
			<view class="val">
				<myRadio :radioData="radioData2"/>
			</view>
		</view>
		<view class="item">
			<view class="lab">可约人数</view>
			<view class="val">
				<myRadio :radioData="radioData3"/>
			</view>
		</view>
		<view class="item">
			<view class="lab">开放范围</view>
			<view class="val">
				<myRadio :radioData="radioData4"/>
			</view>
		</view>
		<view class="btn_row">
			<view class="btnBorder btn" @click="confirmPopup(0)">取消</view>
			<view class="btnBg btn"  @click="confirmPopup(1)">确认</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radioData1: [
					{name: '不限', id: 0},
					{name: '科目二', id: 1},
					{name: '科目三', id: 2},
				],
				radioData2: [
					{name: '浙A66666学', id: 0},
					{name: '浙A66667学', id: 0},
				],
				radioData3: [
					{name: '1人', id: 0},
					{name: '2人', id: 1},
					{name: '3人', id: 2},
					{name: '4人', id: 4},
				],
				radioData4: [
					{name: '我的学员', id: 0},
					{name: '本校学员', id: 1}
				]
			}
		},
		methods: {
			confirmPopup(val) {
				this.$emit('confirmPopup', val)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 28rpx;
		width: 638rpx;
	  .item {
	    .lab {
			font-size: 30rpx;
			margin-bottom: 38rpx;
	    }
	
	    .val {
			margin-bottom: 56rpx;
	     
	    }
	  }
	
	  .btn_row {
		  display: flex;
		  justify-content: space-between;
		  padding: 0 30rpx;
	    .btnBorder {
			
	    }
		.btn {width: 47%;}
	    .btnBg {
	
	    }
	  }
	}
</style>