<template>
	<view>
		<u-navbar title="充电桩设置"></u-navbar>

		<view class="options">

			<u-cell-group>

				<u-cell-item title="开放共享" :arrow="false">

					<view class="">

						<u-radio-group>

							<u-radio @change="radioChange" v-for="(item, index) in list2" :key="index" :name="item.name"
								:disabled="item.disabled" active-color="#00b962">

								{{item.name}}

							</u-radio>

						</u-radio-group>

					</view>



				</u-cell-item>

				<u-cell-item title="开放预约" :arrow="false">
					<view class="">

						<u-radio-group @change="radioGroupChange">

							<u-radio @change="radioChange" v-for="(item, index) in list2" :key="index" :name="item.name"
								:disabled="item.disabled" active-color="#00b962">

								{{item.name}}

							</u-radio>

						</u-radio-group>

					</view>
				</u-cell-item>

				<u-cell-item title="预约自动确认" :arrow="false">
					<view class="">

						<u-radio-group @change="radioGroupChange">

							<u-radio @change="radioChange" v-for="(item, index) in list2" :key="index" :name="item.name"
								:disabled="item.disabled" active-color="#00b962">

								{{item.name}}

							</u-radio>

						</u-radio-group>

					</view>
				</u-cell-item>

				<u-cell-item title="允许预约日期" value="周一/周二/周三/周四/周五/周六/周日"></u-cell-item>

				<u-cell-item title="允许预约时段" value="10:00至12:00"></u-cell-item>

				<u-cell-item :arrow="false" class="time-cell border-bottom" title="预约时长选项">




				</u-cell-item>


				<!-- <p>预约时长选项</p> -->


				<view class="" style="padding-left: 16px;">
					<u-radio-group @change="radioGroupChange" class="radio-padding" shape="square">

						<u-radio @change="radioChange" v-for="(item, index) in timeList" :key="index" :name="item.name"
							:disabled="item.disabled" active-color="#00b962">

							{{item.name}}

						</u-radio>
					</u-radio-group>

				</view>









			</u-cell-group>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list2: [{
						name: "是"
					},
					{
						name: "否"
					}
				],
				timeList: [{
						name: "10分钟"
					},
					{
						name: "20分钟"
					},
					{
						name: "30分钟"
					}
				]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	/deep/.u-cell_title {

		width: 30% !important;
	}

	/deep/ .u-cell {
		line-height: 20px;
		padding: 12px 20px 12px 0;
		margin-left: 12px;
	}

	/deep/.u-radio-group {
		justify-content: start !important;
	}

	/deep/.u-radio-group:last-child {

		justify-content: space-between !important;
		padding: 0 0 10px 0px;
	}


	/deep/.u-cell__value {

		text-align: left;

		color: #101010;

		font-size: 16px
	}

	/deep/.u-radio-group {
		line-height: 30px;
		width: 100%;
		display: flex;
		justify-content: space-around;

	}



	/deep/.border-bottom:after {
		border-bottom-width: 0px !important;



	}
</style>
