<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 pad-zy20 pad-sx6" :class="statusNum==index ? 'service-range-activeStatus' : ''">{{item.title}}</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" style="padding: 6rpx 46rpx;" :class="hoursNum==index ? 'service-range-activeStatus' : ''">{{item.title}}</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" @tap="openPicker">
						<view>{{region}}</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>
					<input class="fon28 width100" type="text" v-model="detailed_address" placeholder="请输入详细地址" placeholder-style="font-size:28rpx;"/>
				</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 pad-zy30 pad-sx6" :class="rangeNum==index ? 'service-range-activeStatus' : ''">{{item}}KM</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" @tap="submitData" style="margin-top: -60rpx;">提交保存</view>
		<city @choseVal="choseValue" :lotusAddressData="lotusAddressData"></city>
	</view>
</template>

<script>
	import city from '@/components/city/city-new.vue';
	// import city from '@/components/city/city.js';
	export default {
		components:{
			city
		},
		data() {
			return {
				personnelStatus:[{id:1,title:'工作状态'},{id:0,title:'休息状态'}],
				statusNum:0,
				workingHours:[{id:3,title:'不限'},{id:1,title:'白天'},{id:2,title:'晚上'}],
				hoursNum:0,
				serviceRange:['30','80','500','>500'],
				rangeNum:0,
				lotusAddressData:{
				    visible:false,
				    provinceName:'',
				    cityName:'',
				    townName:'',
				},
				region:'',//地区
				newProvice:'',//省/市
				newCity:'',//市/区
				newDistrict:'',//区
				detailed_address:'',//详细地址
				remarkText:'',//备注
				eareWidth:'',
				flag:true,
				area_id:''
			}
		},
		onReady() {
			const query = wx.createSelectorQuery()
			query.select('#timeBox').boundingClientRect((rect) => {
				this.eareWidth = rect.width;
			}).exec()
			// this.getDistrict();
		},
		methods: {
			// 提交保存
			submitData(){
				if(this.checkEmpty()) {
					if(this.flag) {
						this.flag = false;
						let params = {
							is_working:this.personnelStatus[this.statusNum].id,//人员状态
							working_hours:this.workingHours[this.hoursNum].id ,//工作时段
							area_id:this.area_id,
							area:this.region,//地区
							address:this.detailed_address,//详细地址
							service_distance: parseFloat(this.serviceRange[this.rangeNum]) || 0,//服务范围
							remark:this.remarkText//备注
						}
						this.$requst.post('/universal/api.user/service_area',params).then(res=>{
							if(res.code) {
								this.$toolAll.tools.showToast('保存成功');
								setTimeout(()=>{
									uni.navigateBack({delta:1})
								},1000)
							} else {
								this.$toolAll.tools.showToast(res.msg);
							}
						})
					}
				}
			},
			// 判空事件
			checkEmpty(){
				let result = false;
				if(!this.region) {
					this.$toolAll.tools.showToast('请选择地区');
				} else if(!this.detailed_address){
					this.$toolAll.tools.showToast('请输入详细地址');
				} else {
					result = true;
				}
				return result;
			},
			// getDistrict() {
			// 	let ya = this
			// 	uni.getLocation({
			// 		success:(res)=> {
			// 			uni.request({
			// 				url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude},${res.longitude}&key=B2ABZ-SIDKS-WD2O3-6CJ2U-CDZOT-U3FKF`,
			// 				header: {
			// 					'Content-Type':'application/json'
			// 				},
			// 				success:(res)=> {
			// 					// console.log('地址数据：',res)
			// 					let provinceStr = res.data.result.address_component.province;
			// 					if(provinceStr=='北京市') {
			// 						provinceStr = '北京';
			// 					} else if(provinceStr=='天津市') {
			// 						provinceStr = '天津';
			// 					} else if(provinceStr=='上海市') {
			// 						provinceStr = '上海';
			// 					} else if(provinceStr=='重庆市') {
			// 						provinceStr = '重庆';
			// 					}
			// 					ya.newProvice = provinceStr;
			// 					ya.newCity = res.data.result.address_component.city;
			// 					ya.newDistrict = res.data.result.address_component.district;
			// 					this.region = ya.newProvice + ya.newCity + ya.newDistrict;
			// 				}
			// 			})
			// 		},
			// 	})
			// },
			//打开picker
			openPicker() {
			    this.lotusAddressData.visible = true;
				console.log(this.lotusAddressData.visible,'12121212121')
			    // this.lotusAddressData.provinceName = this.newProvice;
			    // this.lotusAddressData.cityName = this.newCity;
			    // this.lotusAddressData.townName = this.newDistrict;
			},
			//回传已选的省市区的值
			choseValue(res){
			    //res数据源包括已选省市区与省市区code
			    // console.log(res);
			    this.lotusAddressData.visible = res.visible;//visible为显示与关闭组件标识true显示false隐藏
			    //res.isChose = 1省市区已选 res.isChose = 0;未选
			    if(res.isChose){
			        this.lotusAddressData.provinceName = res.province;//省
			        this.lotusAddressData.cityName = res.city;//市
			        this.lotusAddressData.townName = res.town;//区
					this.area_id = res.area_id;
			        this.region = `${res.province}${res.city=='市辖区'?'':res.city}${res.town}`; //region为已选的省市区的值
					this.regionObj = {
						province:res.province,
						provinceCode:res.provinceCode,
						city:res.city,
						cityCode:res.cityCode,
						town:res.town,
						townCode:res.townCode
					}
			    }
			},
			// 人员状态选择
			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>
