<template>
	<view class="hitchSchedule">
		<view
			class="logo"
			
		>
		<!-- style="background: url(https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=132021381,521786388&fm=11&gp=0.jpg);background-size: 100% 400upx;background-repeat: no-repeat;" -->
			<view class="formItem">
				<view class="formItem-title dis-flex">
					<view class="left"></view>
					<view class="f-30 f-w">请填写发布信息</view>
				</view>
				<view class="formItem-item">
					<view class="f-26 headline">
						<!-- <text class="c-ff4444" style="float: left;margin-left: 10upx;">*</text> -->
						发布角色
					</view>
					<view class="content f-26">
						<picker @change="bindPickerChange" disabled :value="index" :range="array" range-key="title">
							<view class="uni-input">{{ array[index].title }}</view>
						</picker>
					</view>
					<view class="iconfont icon-right" style="font-size: 26upx;line-height: 80upx;padding-right: 30upx;"></view>
				</view>
				<view class="formItem-item" v-if="index == 0">
					<view class="f-26 headline">
						<text class="c-ff4444" style="float: left;margin-left: 10upx;">*</text>
						运输类型
					</view>
					<view class="content f-26">
						<picker @change="carriageArrayChange" :value="carriageArrayindex" :range="carriageArray" range-key="title">
							<view class="uni-input">{{ carriageArray[carriageArrayindex].title }}</view>
						</picker>
					</view>
					<view class="iconfont icon-right" style="font-size: 26upx;line-height: 80upx;padding-right: 30upx;"></view>
				</view>
				<view class="formItem-item" v-else>
					<view class="f-26 headline">
						<text class="c-ff4444" style="float: left;margin-left: 10upx;">*</text>
						运输类型
					</view>
					<view class="content f-26">
						<picker @change="loadingArrayChange" :value="loadingArrayindex" :range="loadingArray" range-key="title">
							<view class="uni-input">{{ loadingArray[loadingArrayindex].title }}</view>
						</picker>
					</view>
					<view class="iconfont icon-right" style="font-size: 26upx;line-height: 80upx;padding-right: 30upx;"></view>
				</view>
				<view class="formItem-item" v-if="index == 1">
					<view class="f-26 headline">
						<text class="c-ff4444" style="float: left;margin-left: 10upx;">*</text>
						班次
					</view>
					<view class="content f-26">
						<picker @change="classesChange" :value="classesindex" :range="classes" range-key="title">
							<view class="uni-input">{{ classes[classesindex].title }}</view>
						</picker>
					</view>
					<view class="iconfont icon-right" style="font-size: 26upx;line-height: 80upx;padding-right: 30upx;"></view>
				</view>
				<view class="formItem-item" v-if="index == 0 && carriageArrayindex == 0">
					<view class="f-26 headline">
						<text class="c-ff4444" style="float: left;margin-left: 10upx;">*</text>
						人数
					</view>
					<view class="content f-26"><input type="number" placeholder="请输入乘车人数" class="input" v-model="numberPeople" value="" /></view>
				</view>
				<view class="formItem-item" v-if="index == 0 && carriageArrayindex == 1">
					<view class="f-26 headline">
						<text class="c-ff4444" style="float: left;margin-left: 10upx;">*</text>
						重量(kg)
					</view>
					<view class="content f-26"><input type="number" placeholder="请输入货物重量" class="input" v-model="numberPeople" value="" /></view>
				</view>
				<view class="formItem-item" v-if="index == 1 && loadingArrayindex == 0">
					<view class="f-26 headline">
						<text class="c-ff4444" style="float: left;margin-left: 10upx;">*</text>
						空位
					</view>
					<view class="content f-26"><input type="number" placeholder="请填写空余位置" class="input" v-model="numberPeople" value="" /></view>
				</view>
				<view class="formItem-item" v-if="index == 1 && loadingArrayindex == 1">
					<view class="f-26 headline">
						<text class="c-ff4444" style="float: left;margin-left: 10upx;">*</text>
						载重(kg)
					</view>
					<view class="content f-26"><input type="number" placeholder="请填写剩余载重" class="input" v-model="numberPeople" value="" /></view>
				</view>
			</view>
			<view class="formItem">
				<view class="formItem-title dis-flex">
					<view class="left"></view>
					<view class="f-30 f-w">请填写路程详情</view>
				</view>
				<view class="formItem-item">
					<view class="f-26 headline">
						<text class="c-ff4444" style="float: left;margin-left: 10upx;">*</text>
						出发时间
					</view>
					<view class="content f-26">
						<w-picker
							:visible.sync="visible"
							mode="shortTerm"
							:expand="90"
							startYear="2021"
							endYear="2029"
							value="2020-04-07"
							:current="true"
							fields="minute"
							@cancel="onCancel"
							@confirm="onConfirm($event, 'date')"
							:disabled-after="false"
							ref="date"
						></w-picker>
						<view :class="goOff == '请选择出发时间'?'col-9':'col-3'"  @click="open">{{goOff}}</view>
					</view>
					<view class="iconfont icon-right" style="font-size: 26upx;line-height: 80upx;padding-right: 30upx;"></view>
				</view>
				<!-- <view class="formItem-item">
					<view class="f-26 headline">
						<text class="c-ff4444" style="float: left;margin-left: 10upx;">*</text>
						出发城市
					</view>
					<view class="content f-26">
						<w-picker :visible.sync="visiblecs" mode="region" :value="[provinceidNameId,areaidNameId,distidNameId]"
						 default-type="value" :hide-area="false" @confirm="onConfirms($event,'region')" @cancel="onCancel" ref="region"></w-picker>
						<view class="uni-input" @tap="visble" v-if="provinceidName || areaidName || distidName">{{ provinceidName }} {{ areaidName }} {{ distidName }}</view>
						<view class="uni-input col-9" @tap="visble" v-else>
							请选择出发城市
						</view>
					</view>
					<view class="iconfont icon-right" style="font-size: 26upx;line-height: 80upx;padding-right: 30upx;"></view>
				</view> -->
				<view class="formItem-item">
					<view class="f-26 headline">
						<text class="c-ff4444" style="float: left;margin-left: 10upx;">*</text>
						出发地址
					</view>
					<view class="content f-26" @click="getLocation(1)"><input disabled type="text" placeholder="请输入详细地址" class="input" v-model="address" value="" /></view>
					<view @click="getLocation(1)" class="f-26" style="margin-top: 24upx;padding-right: 30upx;">
						<image :src="imgfixUrls + 'merchant/where.svg'" />
						<span>定位</span>
					</view>
				</view>
				<!-- <view class="formItem-item">
					<view class="f-26 headline">
						<text class="c-ff4444" style="float: left;margin-left: 10upx;">*</text>
						终点城市
					</view>
					<view class="content f-26">
						<w-picker :visible.sync="visiblecsend" mode="region" :value="[endprovinceidNameId,endareaidNameId,enddistidNameId]"
						 default-type="value" :hide-area="false" @confirm="onConfirmsend($event,'region')" @cancel="onCancel" ref="regionend"></w-picker>
						<view class="uni-input" @tap="visbleend" v-if="endprovinceidName || endareaidName ||enddistidName">{{ endprovinceidName }} {{ endareaidName }} {{ enddistidName }}</view>
						<view class="uni-input col-9" @tap="visbleend" v-else>请选择终点城市</view>
					</view>
					<view class="iconfont icon-right" style="font-size: 26upx;line-height: 80upx;padding-right: 30upx;"></view>
				</view> -->
				<view class="formItem-item" >
					<view class="f-26 headline">
						<text class="c-ff4444" style="float: left;margin-left: 10upx;">*</text>
						终点地址
					</view>
					<view class="content f-26"@click="getLocation(2)"><input disabled type="text" placeholder="请输入详细地址" class="input" v-model="addressTwo" value="" /></view>
					<view @click="getLocation(2)" class="f-26" style="margin-top: 24upx;padding-right: 30upx;">
						<image :src="imgfixUrls + 'merchant/where.svg'" />
						<span>定位</span>
					</view>
				</view>
				<view class="formItem-item">
					<view class="f-26 headline">
						<!-- <text class="c-ff4444" style="float: left;margin-left: 10upx;">*</text> -->
						途经地点
					</view>
					<view class="content f-26" style="height: auto;" @click="openAdd">
						<view class="input col-9" v-if="citys.length == 0">
							请添加途经地点
						</view>
						<view class="tag-item" v-for="item,index in citys" :key="index" v-else>
							{{item}}
							<text class="iconfont icon-close iconclose" @click.stop="deletCity(index)"></text>
						</view>
					</view>
					<view class="iconfont icon-add" style="font-size: 30upx;line-height: 80upx;padding-right: 30upx;" @click="openAdd"></view>
				</view>
			</view>
			<view class="formItem">
				<view class="formItem-title dis-flex">
					<view class="left"></view>
					<view class="f-30 f-w">其他信息</view>
				</view>
				<view class="formItem-item">
					<view class="f-26 headline">
						<text class="c-ff4444" style="float: left;margin-left: 10upx;">*</text>
						联系人
					</view>
					<view class="content f-26"><input type="text" placeholder="请填写联系人姓名" v-model="linkman" class="input"  value="" /></view>
				</view>
				<view class="formItem-item">
					<view class="f-26 headline">
						<text class="c-ff4444" style="float: left;margin-left: 10upx;">*</text>
						联系方式
					</view>
					<view class="content f-26"><input type="number" placeholder="请填写联系方式" maxlength="11" v-model="linkmanPhone" class="input"  value="" /></view>
				</view>
				<view class="formItem-item">
					<view class="f-26 headline">
						<!-- <text class="c-ff4444" style="float: left;margin-left: 10upx;">*</text> -->
						标签
					</view>
						<view class="content f-26" style="height: auto;" @click="tagsShow = true">
							<view class="input col-9" v-if="tags.length == 0">
								请添加标签信息
							</view>
							<view class="tag-item" v-for="item,index in tags" :key="index" v-else>
								{{item.name}}
								<!-- <text class="iconfont icon-close iconclose" @click="deletTags(index)"></text> -->
							</view>
						</view>
					<view class="iconfont icon-right" style="font-size: 26upx;line-height: 80upx;padding-right: 30upx;" @click="tagsShow = true"></view>
				</view>
				<view class="formItem-item" style="display: block;">
					<view class="f-26 headline">
						<!-- <text class="c-ff4444" style="float: left;margin-left: 10upx;">*</text> -->
						备注
					</view>
					<view class="content f-26" style="padding: 0upx 30upx 30upx;height: 150upx;">
						<textarea value=""  class="f-28 textarea" v-model="remark" placeholder="填写备注信息" />
					</view>
				</view>
			</view>
			<button class="comfia" @click="submit" :disabled="ifsubmit">
				提交
			</button>
		</view>
		
		<!-- #ifdef H5 -->
		<PopManager :show="isOpenLaction" :type="'bottom'" :overlay="'false'" :showOverlay="'false'">
			<view class="iframe-wid-hgt" :style="{ height: phoneHeight }" v-if="latlngs">
				<iframe id="mapPage" width="100%" height="100%" frameborder="0" :src="`https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=KIQBZ-6OT3G-AOMQD-IHW6J-PEUDV-VCFAF&referer=myapp&coord=${latlngs.latitude},${latlngs.longitude}`"></iframe>
			</view>
			<view class="iframe-wid-hgt" :style="{ height: phoneHeight }" v-if="!latlngs">
				<iframe id="mapPage" width="100%" height="100%" frameborder="0" :src="`https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=KIQBZ-6OT3G-AOMQD-IHW6J-PEUDV-VCFAF&referer=myapp`"></iframe>
			</view>
		</PopManager>
		<!-- #endif -->
		<PopManager :show="midway" :type="'center'" @clickmask="closeAdd">
			<view class="midway">
				<view class="input">
					<input type="text" v-if="midway" class="f-28" v-model="addSite" placeholder="请输入途经地点" />
				</view>
				<view class="addMidwayBtn">
					<view class="close" @click="closeAdd">
						取消
					</view>
					<view class="add" @click="addCity">
						确定
					</view>
				</view>
			</view>
		</PopManager>
		<PopManager :show="tagsShow" :type="'bottom'" @clickmask="closeTags">
			<view class="tagsPop">
				<view class="tags-title f-34 f-w">
					标签选择
					<text class="iconfont icon-close_light" style="float: right;" @click="closeTags"></text>
				</view>
				<view class="tagsBox">
					<view :class="item.check?'checkTagItem':'tagItem'" v-for="(item,indexs) in tagsList" :key="indexs" @click="checked(indexs)"
					v-if="(item.is_passenger == '2' && index == 0 &&  carriageArrayindex == 0)
					|| (item.is_goods == '2' && index == 0 &&  carriageArrayindex == 1)
					|| (item.are_passenger == '2' && index == 1 &&  loadingArrayindex == 0)
					|| (item.are_goods == '2' && index == 1 &&  loadingArrayindex == 1)">
						{{item.name}}
					</view>
				</view>
				
			</view>
		</PopManager>
		<far-bottom></far-bottom>
		<phoneNavBar :checked="'发布行程'" :page="'hitch'" v-if="!id"></phoneNavBar>
	</view>
</template>

<script>
import App from '@/common/js/app.js';
import wPicker from '@/components/w-picker/w-picker.vue';
import PopManager from '@/components/template/PopManager';
import phoneNavBar from '@/components/template/phoneNavBar';
export default {
	components: {
		wPicker,
		PopManager,
		phoneNavBar
	},
	data() {
		return {
			tagsShow:false,
			midway:false,
			visiblecs:false,
			visiblecsend:false,
			ifsubmit:false,
			provinceidName:'',
			areaidName:'',
			distidName:'',
			provinceidNameId:'',
			areaidNameId:'',
			distidNameId:'',
			endprovinceidName:'',
			endareaidName:'',
			enddistidName:'',
			endprovinceidNameId:'',
			endareaidNameId:'',
			enddistidNameId:'',
			addSite:'',
			remark:'',
			tagsList:[
				
			],
			array: [
				{
					title: '乘客',
					id: 0
				},
				{
					title: '车主',
					id: 1
				}
			],
			carriageArray: [
				{
					title: '载客',
					id: 0
				},
				{
					title: '载货',
					id: 1
				}
			],
			loadingArray: [
				{
					title: '找客',
					id: 0
				},
				{
					title: '找货',
					id: 1
				}
			],
			classes: [
				{
					title: '一次',
					id: 0
				},
				{
					title: '每天',
					id: 1
				}
			],
			classesindex: 0,
			index: 0,
			carriageArrayindex: 0,
			loadingArrayindex: 0,
			numberPeople: '',
			passengerWeight: '',
			vacancy: '',
			visible:false,
			goOff:'请选择出发时间',
			phoneHeight:null,
			owenscitylist:null,
			latlngs:null,
			latlngTwo:{},
			latlng:{},
			isOpenLaction:false,
			addressTwo:'',
			address:'',
			citys:[],
			tags:[],
			id:'',
			linkmanPhone:'',
			linkman:'',
			infos:{},
			userInfo:{},
			lblis:{}
		};
	},
	onLoad(e) {
		let _this = this;
		uni.getSystemInfo({
			success(res) {
				_this.phoneHeight = res.windowHeight + 'px';
			}
		});
		_this.owenscitylist = uni.getStorageSync('cityList')
		_this.latlngs = uni.getStorageSync('curLoction');
		_this.index = e.index || 0;
		if(e.id){
			this.id = e.id;
			_this.getMyHitch();
		}else{
			_this.getMyHitch();
		}
		
	},
	onShow() {
		let _this = this;
		// #ifdef H5
		window.addEventListener(
			'message',
			function(event) {
				// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
				let loc = event.data;
				if (_this.klis) {
					return
				}
				if (loc && loc.module == 'locationPicker') {
					//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
					console.log('location', loc);
					// _this.userInfo.address = loc.poiaddress;
					// _this.userInfo.lat = loc.latlng.lat;
					// _this.userInfo.lng = loc.latlng.lng;
					
					if(_this.isOpenLaction == 1){
						_this.address = loc.poiname;
						_this.latlng = loc.latlng;
					}else{
						_this.addressTwo = loc.poiname;
						_this.latlngTwo = loc.latlng;
					}
					
					// debugger
					_this.isOpenLaction = false;
					let lblis = {
						lat: loc.latlng.lat,
						lng: loc.latlng.lng,
						detailed_address: loc.poiaddress
					}
	
				}
			},
			false
		);
		// #endif
		//#ifdef APP-PLUS
		if(_this.userInfo.lat){
			if(_this.isOpenLaction == 1){
				_this.address = _this.userInfo.address;
				_this.latlng.lat = _this.userInfo.lat;
				_this.latlng.lng = _this.userInfo.lng;
			}else{
				_this.addressTwo = _this.userInfo.address;
				_this.latlngTwo.lat = _this.userInfo.lat;
				_this.latlngTwo.lng = _this.userInfo.lng;
			}
			_this.isOpenLaction = false;
		}
		//#endif
	},
	methods: {
		// 时间转时间戳
		getDataTime(timeValue) {
			let time;
			if(timeValue == '请选择出发时间'){
				time = '';
			}else{
				let ontime;
				ontime = timeValue.replace(/-/g, '/');
				let date = new Date(ontime);
				time = date.getTime() / 1000;
			}
			
			return time;
		},
		// 时间戳转时间
		getTimeData(dataValue) {
			// debugger
			 let date = new Date(Number(dataValue) * 1000) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			        let Y = date.getFullYear() + '-'
			        let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
			        let D = date.getDate() + ' '
			        let h = date.getHours() + ':'
			        let m = date.getMinutes()
			        let s = date.getSeconds()
			        // return Y+M+D+h+m+s
			        // console.log(timestampToTime (1533293827000))
			return {
				label: Y + M + D + h + m
			};
		},
		getMyHitch(){
			let _this = this;
			App._post_form(
				`&p=vehicle&do=editRoute`,
				{id:_this.id},
				res => {
					console.log(res);
					_this.tagsList = res.data.label;
					if(_this.id){
						_this.infos = res.data.info;
						_this.index = _this.infos.type;
						if(_this.infos.transport_type == '1'){
							_this.index = 0 ;
							_this.carriageArrayindex = 0;
						}else if(_this.infos.transport_type == '2'){
							_this.index = 0 ;
							_this.carriageArrayindex = 1;
						}
						else if(_this.infos.transport_type == '3'){
							_this.index = 1 ;
							_this.carriageArrayindex = 0;
						}else{
							_this.index = 1 ;
							_this.carriageArrayindex = 1;
						}
						_this.goOff = _this.getTimeData(_this.infos.start_time).label;
						// _this.provinceidNameId = _this.infos.start_province_id;
						// _this.areaidNameId = _this.infos.start_city_id;
						// _this.distidNameId = _this.infos.start_area_id;
						_this.address = _this.infos.start_address;
						_this.latlng.lng = _this.infos.start_lng;
						_this.latlng.lat = _this.infos.start_lat;
						// _this.endprovinceidNameId = _this.infos.end_province_id;
						// _this.endareaidNameId = _this.infos.end_city_id;
						// _this.enddistidNameId = _this.infos.end_area_id;
						_this.addressTwo = _this.infos.end_address;
						_this.latlngTwo.lng = _this.infos.end_lng;
						_this.latlngTwo.lat = _this.infos.end_lat;
						_this.citys = _this.infos.pass_by;
						_this.linkman = _this.infos.contacts;
						_this.linkmanPhone = _this.infos.contacts_phone;
						_this.numberPeople = _this.infos.weight || _this.infos.people;
						_this.classesindex = _this.infos.frequency - 1;
						_this.remark = _this.infos.remarks;
						_this.tags = [];
						_this.tagsList.map(item=>{
							item.check = false;
							_this.infos.label_id.forEach((items,index)=>{
								if(items == item.id){
									item.check = true;
									_this.tags.push(item);
								}
							})
						});
						// _this.owenscitylist.map(item=>{
						// 	if(item.id == _this.provinceidNameId){
						// 		_this.provinceidName = item.name
						// 	}
						// 	if(item.id == _this.endprovinceidNameId){
						// 		_this.endprovinceidName = item.name
						// 	}
						// 	item.area.map(items=>{
						// 		if(items.id == _this.endareaidNameId){
						// 			_this.endareaidName = items.name;
						// 		}
						// 		if(items.id == _this.areaidNameId){
						// 			_this.areaidName = items.name;
						// 		}
						// 		items.dist.map(itemss=>{
						// 			if(itemss.id == _this.enddistidNameId){
						// 				_this.enddistidName = itemss.name;
						// 			}
						// 			if(itemss.id == _this.distidNameId){
						// 				_this.distidName = itemss.name;
						// 			}
						// 		})
						// 	})
						// })
					}else{
						// _this.index = _this.index - 1;
					}
				},
				false,
				() => {}
			);
		},
		submit(){
			let data = {
				type:Number(this.index) + 1,
				transport_type:(this.index == 0 && this.carriageArrayindex == 0)?1:(this.index == 0 && this.carriageArrayindex == 1)?2:(this.index == 1 && this.loadingArrayindex == 0)?3:4,
				start_time:this.getDataTime(this.goOff),
				start_address:this.address,
				start_lng:this.latlng.lng,
				start_lat:this.latlng.lat,
				end_address:this.addressTwo,
				end_lng:this.latlngTwo.lng,
				end_lat:this.latlngTwo.lat,
				pass_by:this.citys,
				contacts:this.linkman,
				contacts_phone:this.linkmanPhone
			};
			if((this.index == 0 && this.carriageArrayindex == 0) || (this.index == 1 && this.loadingArrayindex == 0)){
				data.people = this.numberPeople;
			}else{
				data.weight = this.numberPeople;
			}
			if(this.index ==  1){
				data.frequency = this.classesindex + 1;
			}
			
			for(let k in data){
				if(!data[k]){
					console.log(data);
					uni.showToast({
						icon:'none',
						title:'请完善发布信息'
					})
					return false
				}
			}
			data.remarks = this.remark;
			data.label_id = [];
			this.tags.map(item=>{
				data.label_id.push(item.id);
			});
			let datas = {
				type:'post'
			};
			if(this.id){
				datas.id = this.id;
			}
			datas.data = JSON.stringify(data);
			this.ifsubmit = true;
			setTimeout(()=>{
				this.ifsubmit = false;
			},2000)
			console.log(data)
			App._post_form(
				`&p=vehicle&do=editRoute`,
				datas,
				res => {
					if(res.data.length == 0){
							App.navigationTo({
								url: `pages/subPages2/hitchRide/hitchList/hitchList?flag=${'issue'}`
							});
					}else{
							App.navigationTo({
								url: `pages/mainPages/payment/payment?orderid=${res.data.orderid}&plugin=${res.data.type}`
							});
					}
					this.ifsubmit = false;
				},
				false,
				() => {}
			);
		},
		checked(index){
			this.tags = [];
			this.tagsList[index].check = !this.tagsList[index].check;
			this.tagsList.map(item=>{
				if(item.check){
					this.tags.push(item)
				}
			})
		},
		closeTags(){
			this.tagsShow = false;
		},
		deletTags(index){
			this.tags.splice(index,1)
		},
		deletCity(index){
			this.citys.splice(index,1)
		},
		addCity(){
			this.midway = false;
			this.citys.map(item=>{
				
			})
			if(!this.addSite && this.addSite == ''){
				uni.showToast({
					icon:'none',
					title:'途经地点不能为空'
				});
				return
			}
			this.citys.push(this.addSite);
			this.addSite = '';
		},
		openAdd(){
			this.addSite = '';
			this.midway = true;
		},
		closeAdd(){
			this.midway = false;
		},
		getLocation(num) {
			let _this = this;
			_this.isOpenLaction = num;
			// #ifdef MP-WEIXIN
			uni.chooseLocation({
				keyword: '',
				success: function(e) {
					if(_this.isOpenLaction == 1){
						_this.address = e.name;
						_this.latlng.lat = e.latitude;
						_this.latlng.lng = e.longitude;
						return
					}else{
						_this.addressTwo = e.name;
						_this.latlngTwo.lat = e.latitude;
						_this.latlngTwo.lng = e.longitude;
						return
					}
					// console.log(e);
				}
			});
			// #endif
			//#ifdef APP-PLUS
			      App.navigationTo({
			       url: 'pages/subPages2/map/index'
			      });
			      //#endif
		},
		visble(){
			this.visiblecs = true;
		},
		visbleend(){
			this.visiblecsend = true;
		},
		open(){
			this.$refs.date.show()
		},
		onConfirm(e){
			console.log(e);
			this.goOff  = e.result;
		},
		onConfirmsend(e){
			console.log(e);
			this.endprovinceidName = e.obj.province.label;
			this.endareaidName = e.obj.city.label;
			this.enddistidName = e.obj.area.label;
			this.endprovinceidNameId = e.value[0];
			this.endareaidNameId = e.value[1];
			this.enddistidNameId = e.value[2];
		},
		onConfirms(e){
			console.log(e);
			this.provinceidName = e.obj.province.label;
			this.areaidName = e.obj.city.label;
			this.distidName = e.obj.area.label;
			this.provinceidNameId = e.value[0];
			this.areaidNameId = e.value[1];
			this.distidNameId = e.value[2];
		},
		onCancel(e) {
			// this.$refs.date.hide()
			console.log(e);
		},
		classesChange(e) {
			this.classesindex = e.detail.value;
		},
		loadingArrayChange(e) {
			this.numberPeople = '';
			this.loadingArrayindex = e.detail.value;
		},
		carriageArrayChange(e) {
			this.numberPeople = '';
			this.carriageArrayindex = e.detail.value;
		},
		bindPickerChange(e) {
			this.numberPeople = '';
			this.index = e.detail.value;
		}
	}
};
</script>

<style>
page {
	background-color: #f8f8f8;
}
</style>
<style lang="scss" scoped>
.hitchSchedule {
	
	.logo {
		// height: 400rpx;
		padding-bottom: 240upx;
		width: 750upx;
		padding-top: 50upx;
		.formItem {
			width: 690upx;
			background-color: #ffffff;
			border-radius: 15upx;
			padding: 30upx;
			box-sizing: border-box;
			margin-left: 30upx;
			margin-bottom: 30upx;
			.formItem-title {
				padding-bottom: 30upx;
				.left {
					height: 26upx;
					margin-top: 8upx;
					width: 8upx;
					background-color: #ff4444;
					border-radius: 60upx;
					margin-right: 30upx;
				}
			}
			.formItem-item {
				display: flex;
				background-color: #f8f8f8;
				border-radius: 10upx;
				margin-bottom: 30upx;
				image{
					width: 22upx;
					height: 22upx;
				}
				.headline {
					width: 130upx;
					height: 80upx;
					line-height: 80upx;

					text-align: right;
				}
				.content {
					flex: 1;
					height: 80upx;
					line-height: 80upx;
					padding-left: 30upx;
					// background-color: #f8f8f8;
					.input {
						height: 80upx;
						line-height: 80upx;
						font-size: 26upx;
					}
					.tag-item{
						margin-right: 20upx;
						// width: 100upx;
						padding: 0 10upx;
						display: inline-block;
						height: 50upx;
						border-radius: 10upx;
						background-color: #FF4444;
						color: #FFFFFF;
						line-height: 50upx;
						text-align: center;
						margin-top: 18upx;
						.iconclose{
							font-size: 20upx;
							margin-left: 10upx;
						}
					}
					.textarea{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
	.iframe-wid-hgt{
		width: 100vw;
	}
	.tagsPop{
		width: 750upx;
		padding: 30upx;
		box-sizing: border-box;
		border-radius: 30upx 30upx 0 0;
		background-color: #FFFFFF;
		// height: 560upx;
		// overflow: auto;
		.tagsBox{
			height: 400upx;
			overflow: auto;
		}
		.tags-title{
			margin-bottom: 30upx;
		}
		.tagItem{
			padding: 0 20upx;
			height: 60upx;
			line-height: 60upx;
			display: inline-block;
			border-radius: 10upx;
			text-align: center;
			font-size: 28upx;
			border: 1upx solid #EEEEEE;
			margin-right: 20upx;
			margin-bottom: 20upx;
		}
		.checkTagItem{
			padding: 0 20upx;
			height: 60upx;
			line-height: 60upx;
			display: inline-block;
			border-radius: 10upx;
			text-align: center;
			font-size: 28upx;
			background-color: #FF4444;
			color: #FFFFFF;
			margin-right: 20upx;
			margin-bottom: 20upx;
		}
	}
	.midway{
		width: 630upx;
		padding: 30upx;
		box-sizing: border-box;
		background-color: #f8f8f8;
		border-radius: 20upx;
		.input{
			padding: 20upx 30upx;
			background-color: #FFFFFF;
			border-radius: 10upx;
		}
		.addMidwayBtn{
			display: flex;
			margin-top: 50upx;
			.close{
				width: 180upx;
				height: 60upx;
				line-height: 80upx;
				background-color: #CCCCCC;
				color: #FFFFFF;
				border-radius: 10upx;
				text-align: center;
				line-height: 60upx;
				flex: 1;
				margin: 0 60upx;
				font-size: 32upx;
				font-weight: 700;
			}
			.add{
				width: 180upx;
				margin: 0 60upx;
				flex: 1;
				height: 60upx;
				line-height: 60upx;
				background-color: #ff4444;
				color: #FFFFFF;
				border-radius: 10upx;
				text-align: center;
				line-height: 60upx;
				font-size: 32upx;
				font-weight: 700;
			}
		}
	}
	.comfia{
		width: 600upx;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		color: #FFFFFF;
		background-color: #FF4444;
		border-radius: 15upx;
		font-size: 30upx;
		font-weight: 700;
		margin: auto;
		// margin-bottom: 240upx;
	}
}
</style>
