<template style="background-color: #e7e7e7;">
	<view style="width: 100%;height: 100%;">
		<u-gap height="20" bg-color="#e7e7e7"></u-gap>
		<!-- 电话咨询 -->
		<view class="v">
			<!-- 标题 -->
			<view class="title">电话咨询</view>
			<!-- 线 -->
			<u-line color="#e7e7e7" />
			<!-- 基础价格 -->
			<view class="list">
				<!-- 左 -->
				<view class="left">
					<view class="t1">基础价格<text style="font-size: 24rpx;color: #666666;margin-left: 10rpx;">(元)</text></view>
					<view class="t2">基础价格为包含十分钟的起步价</view>
				</view>
				<!-- 右 -->
				<view class="right">
					<u-input v-model="telePhone.Basics" type="text" :border="true" placeholder="请输入金额" />
				</view>
			</view>
			<!-- 步进价格 -->
			<view class="list">
				<!-- 左 -->
				<view class="left">
					<view class="t1">步进价格<text style="font-size: 24rpx;color: #666666;margin-left: 10rpx;">(元/每分钟)</text></view>
					<view class="t2">步进价格为超过起步价时长的价格</view>
				</view>
				<!-- 右 -->
				<view class="right">
					<u-input v-model="tlePhone.additional" type="text" :border="true" placeholder="请输入金额" />
				</view>
			</view>
			<!-- 服务时间 -->
			<view class="list">服务时间</view>
			<view style="margin-top: 20rpx;">
				<!-- 分段器 -->
				<view>
					<u-subsection :list="list" :current="dhcurrent" @change="dhchange"></u-subsection>
				</view>
				<view style="margin-top: 30rpx;width: 100%;">
					<view v-if="dhcurrent == 0">
						<view class="flex align-center">
							<!-- 全选复选框 -->
							<u-checkbox-group @change="" v-for="(aitem, aindex) in all1" :key="aindex" class="flex">
								<!-- 全选按钮 -->
								<u-checkbox @change="test" v-model="aitem.checked" v-if="dhcurrent == aitem.id" shape="circle">
								</u-checkbox>
							</u-checkbox-group>
							<view style="width: 80%;">全选</view>
					</view>

					<view style="width: 100%;" class="flex">
						<u-checkbox-group @change="" v-for="(item, index) in timeList1" :key="index" style="width: 100%;height: 100%;">

							<view style="width: 300rpx;">
								<!-- 按钮 -->
								<u-checkbox @change="" v-model="item.checked" shape="circle">
								</u-checkbox>
								<text style="">{{item.name}}</text>
							</view>

						</u-checkbox-group>
					</view>



				</view>
				<view v-else-if="dhcurrent == 1">
					<u-checkbox-group @change="" v-for="(aitem, aindex) in all2" :key="aindex">
						<!-- 全选按钮 -->
						<u-checkbox @change="test" v-model="aitem.checked" v-if="dhcurrent == aitem.id"></u-checkbox>
					</u-checkbox-group>






				</view>
				<view v-else-if="dhcurrent == 2">
					<u-checkbox-group @change="" v-for="(aitem, aindex) in all3" :key="aindex">
						<!-- 全选按钮 -->
						<u-checkbox @change="test" v-model="aitem.checked" v-if="dhcurrent == aitem.id"></u-checkbox>
					</u-checkbox-group>


				</view>

			</view>
		</view>
		<!-- 服务人次 -->
		<view class="list">
			<!-- 左 -->
			<view class="left">
				<view class="t1">服务人次<text style="font-size: 24rpx;color: #666666;margin-left: 10rpx;">(人/每小时)</text></view>
				<view class="t2">本项目每小时最大接收的服务人次</view>
			</view>
			<!-- 右 -->
			<view class="right">
				<u-input v-model="tlePhone.peopleNum" type="text" :border="true" placeholder="请输入人次" />
			</view>
		</view>
	</view>

	<u-gap height="20" bg-color="#e7e7e7"></u-gap>
	<!-- 图文咨询 -->

	<u-gap height="20" bg-color="#e7e7e7"></u-gap>
	<!-- 门诊预约 -->

	<view class="bottomButton" @click="bc">保存</view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {

		},
		mounted() {

		},
		data() {
			return {
				list: [{
						name: '00:00-08:00'
					},
					{
						name: '00:80-16:00'
					},
					{
						name: '16:00-24:00'
					}
				],
				//电话 图文 门诊的分段器
				dhcurrent: 2,
				twcurrent: 0,
				mzcurrent: 0,
				//电话
				telePhone: {
					Basics: '', //基础价格
					additional: '', //步进

					peopleNum: '' //服务人次
				},
				//图文
				imgText: {
					Basics: '', //基础价格
					additional: '', //步进

					peopleNum: '' //服务人次
				},
				//门诊
				mz: {
					Basics: '', //基础价格
					additional: '', //步进

					peopleNum: '' //服务人次
				},
				//第一个时间列表
				timeList1: [{
					id: 0,
					name: '00:00-01:00',
					checked: false
				}, {
					id: 1,
					name: '01:00-02:00',
					checked: false
				}, {
					id: 2,
					name: '02:00-03:00',
					checked: false
				}, {
					id: 3,
					name: '03:00-04:00',
					checked: false
				}, {
					id: 4,
					name: '04:00-05:00',
					checked: false
				}, {
					id: 5,
					name: '05:00-06:00',
					checked: false
				}, {
					id: 6,
					name: '06:00-07:00',
					checked: false
				}, {
					id: 7,
					name: '07:00-08:00',
					checked: false
				}],
				timeList2: [{
					id: 0,
					name: '00:00-01:00',
					checked: false
				}, {
					id: 1,
					name: '01:00-02:00',
					checked: false
				}, {
					id: 2,
					name: '02:00-03:00',
					checked: false
				}, {
					id: 3,
					name: '03:00-04:00',
					checked: false
				}, {
					id: 4,
					name: '04:00-05:00',
					checked: false
				}, {
					id: 5,
					name: '05:00-06:00',
					checked: false
				}, {
					id: 6,
					name: '06:00-07:00',
					checked: false
				}, {
					id: 7,
					name: '07:00-08:00',
					checked: false
				}],
				timeList3: [{
					id: 0,
					name: '00:00-01:00',
					checked: false
				}, {
					id: 1,
					name: '01:00-02:00',
					checked: false
				}, {
					id: 2,
					name: '02:00-03:00',
					checked: false
				}, {
					id: 3,
					name: '03:00-04:00',
					checked: false
				}, {
					id: 4,
					name: '04:00-05:00',
					checked: false
				}, {
					id: 5,
					name: '05:00-06:00',
					checked: false
				}, {
					id: 6,
					name: '06:00-07:00',
					checked: false
				}, {
					id: 7,
					name: '07:00-08:00',
					checked: false
				}],
				all1: [{
					name: '全选',
					id: 0,
					checked: false
				}],
				all2: [{
					name: '全选',
					id: 1,
					checked: false
				}],
				all3: [{
					name: '全选',
					id: 2,
					checked: false
				}]
			}
		},
		methods: {
			bc(e) {
				console.log('电话' + this.telePhone)
				console.log('图文' + this.imgText)
				console.log('门诊' + this.mz)
				console.log('电话' + this.dhcurrent)
				console.log('图文' + this.twcurrent)
				console.log('门诊' + this.mzcurrent)
				console.log()
				console.log()
			},
			test(e) {


			},
			dhchange(index) {
				this.dhcurrent = index
			},
			twchange(index) {
				this.twchange = index
			},
			mzchange(index) {
				this.mzchange = index
			}

		}
	};
</script>

<style lang="scss">
	.v {
		padding: 28rpx 28rpx 40rpx 28rpx;

		.title {
			font-size: 30rpx;
			font-weight: bold;
			margin-bottom: 28rpx
		}

		.list {
			margin-top: 40rpx;
			display: flex;

			.left {
				width: 65%;

				.t1 {
					font-size: 28rpx;
					margin-bottom: 14rpx;
				}

				.t2 {
					font-size: 22rpx;
					color: #999999;
				}
			}

			.right {
				width: 35%;
			}
		}
	}

	.btnAll {
		display: flex;
		margin-bottom: 28rpx;

	}

	.but {
		margin-bottom: 28rpx;
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bottomButton {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #0B73B9;
		color: #FFFFFF;
		z-index: 1;
	}
</style>
