<template>
	<view>
		<status-nav navBarTitle="服务范围" returnColor="#c2c2c2"></status-nav>
		<container-subgroup>
			<view slot="content" style="margin: 0rpx -30rpx 0rpx -30rpx;padding-bottom: 120rpx;" class="fon28 bacf">
				<view class="bbot disac pad-sx30 pad-zy30">
					<view class="mar-y30 flexs">人员状态 <text style="color: red;">*</text></view>
					<view class="disac">
						<view @tap="chooseStatus(index,0)" v-for="(item,index) in personnelStatus" :key="index" class="service-range-status mar-y10" :class="statusNum==index ? 'service-range-activeStatus' : ''">{{item}}</view>
					</view>
				</view>
				<view class="bbot disac pad-sx30 pad-zy30">
					<view id="timeBox" class="mar-y30 flexs">工作时段 <text style="color: red;">*</text></view>
					<view class="disac">
						<view @tap="chooseStatus(index,1)" v-for="(item,index) in workingHours" :key="index" class="service-range-status mar-y10" :class="hoursNum==index ? 'service-range-activeStatus' : ''">{{item}}</view>
					</view>
				</view>
				<view class="bbot disac pad-sx30 pad-zy30">
					<view class="mar-y30 flexs disjbac" :style="{width: eareWidth + 'px'}">地 <view>区<text style="color: red;">*</text></view></view>
					<view class="disjbac width100">
						<view>湖南省株洲市芦淞区</view>
						<i class="icon icon-next col9" style="font-size: 30rpx;"></i>
					</view>
				</view>
				<view class="bbot disac pad-sx30 pad-zy30">
					<view class="mar-y30 flexs">详细地址 <text style="color: red;">*</text></view>
					<view class="disac">
						<input class="fon28" type="text" placeholder="请输入详细地址" placeholder-style="font-size:28rpx;"/>
					</view>
				</view>
				<view class="bbot disac pad-sx30 pad-zy30">
					<view class="mar-y30 flexs">服务范围 <text style="color: red;">*</text></view>
					<scroll-view scroll-x style="width: 76%;">
						<view class="disac">
							<view @tap="chooseStatus(index,2)" v-for="(item,index) in serviceRange" :key="index" class="service-range-status mar-y10 flexs" :class="rangeNum==index ? 'service-range-activeStatus' : ''">{{item}}</view>
						</view>
					</scroll-view>
				</view>
				<view class="bbot disjcac fc pad-sx30 pad-zy30">
					<textarea class="fon28" v-model="remarkText" maxlength="50" placeholder="特殊情况请备注" placeholder-style="font-size: 28rpx;color:#bbbbbb;" style="height: 160rpx;width: 100%;" />
					<view class="col9">{{remarkText.length}}/50</view>
				</view>
			</view>
		</container-subgroup>
		<!-- 提交保存 -->
		<view class="person-btn" style="margin-top: -60rpx;">提交保存</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				personnelStatus:['工作状态','休息状态'],
				statusNum:0,
				workingHours:['不限','白天','晚上'],
				hoursNum:0,
				serviceRange:['30KM','80KM','1500KM','其他','其他','其他','其他'],
				rangeNum:0,
				remarkText:'',
				eareWidth:''
			}
		},
		onReady() {
			const query = wx.createSelectorQuery()
			query.select('#timeBox').boundingClientRect((rect) => {
				this.eareWidth = rect.width;
			}).exec()
		},
		methods: {
			// 人员状态选择
			chooseStatus(index,num){
				switch (num){
					case 0:
					this.statusNum = index;
						break;
					case 1:
					this.hoursNum = index;
						break;
					case 2:
					this.rangeNum = index;
						break;
				}
			},
		}
	}
</script>

<style>

</style>
