<template>
	<view class="pubService">
		<view class="form">
			<view class="title">
				基础信息
			</view>
			<view class="formItem ">
				<view class="formName">
					服务标题
					<text class="f-20 c-ff4444">*</text>
				</view>
				<view class="formContent">
					<input type="text" class="input" v-model="fromData.title" value="" placeholder="请输入服务标题说明" />
				</view>
			</view>
			
			<view class="formItem" style="line-height: 0;height: auto;">
				<view class="formName" style="line-height: 100upx;">
					服务类型
					<text class="f-20 c-ff4444">*</text>
				</view>
				<view class="formContent" style="padding: 30upx 0;" @click="showoccupation = true">
					<input type="number" v-if="fromData.catearray.length == 0" maxlength="11" style="line-height: 40upx;height: 50upx;" disabled class="inputLeft" value="" placeholder-class="col-9" placeholder="点击选择所属服务" />
					<view v-else class="f-28 col-3">
						<view class="check-item" v-for="(item,index) in fromData.catearray" :key="index">
						{{item.title}}
						<image :src="imgfixUrls + 'homemakingImg/imgcolse.png'" mode="" @click.stop="deletcheck(item.id)"></image>
						</view>
					</view>
				</view>
				<view class="iconfont icon-right t-r f-28" style="font-size: 28upx;color: #999999;line-height: 100upx;"  @click="showoccupation = true">
					
				</view>
			</view>
			<view class="formItem" style="line-height: 0;height: auto;">
				<view class="formName" style="line-height: 100upx;">
					支付方式
					<!-- <text class="f-20 c-ff4444">*</text> -->
				</view>
				<view class="formContent" >
					<picker @change="Change" :value="indexs" :range="arrs"  range-key="title">
						<view class="input" >{{arrs[indexs].title}}</view>
					</picker>
				</view>
				<view class="iconfont icon-right t-r f-28" style="font-size: 28upx;color: #999999;line-height: 100upx;"  >
					
				</view>
			</view>
			<view class="formItem " v-if="indexs != 0">
				<view class="formName">
					支付金额
					<text class="f-20 c-ff4444">*</text>
				</view>
				<view class="formContent dis-flex">
					<input type="text" class="input" v-model="fromData.price" value="" placeholder="请输入支付金额" /><text class="f-28 col-3">元</text>
				</view>
			</view>
			<view class="formItem " v-if="indexs != 0">
				<view class="formName">
					计费单位
					<text class="f-20 c-ff4444">*</text>
				</view>
				<view class="formContent dis-flex">
					<input type="text" class="input" v-model="fromData.unit" value="" placeholder="例：小时、平方、KG" />
				</view>
			</view>
		</view>
		<view class="line">
			
		</view>
		<view class="form">
			<view class="title">
				首图展示
			</view>
			<view class="f-24 col-9" style="padding-top: 20upx;">
				(推荐尺寸200x200)
			</view>
			<view class="imgs">
			<view class="img-item" v-if="fromData.thumb">
				<image :src="fromData.thumb" mode=""></image>
				<image class="imgclise" @click="deletImg(0,true)" :src="imgfixUrls + 'homemakingImg/imgcolse.png'" mode=""></image>
			</view>
			<view class="img-item" @click="uploadFiles(1, 6)" v-else>
				<image :src="imgfixUrls + 'homemakingImg/upload.png'" mode=""></image>
			</view>
			</view>
		</view>
		<view class="line">
			
		</view>
		<view class="form">
			<view class="title">
				案例图
			</view>
			<view class="f-24 col-9" style="padding-top: 20upx;">
				(上传案例图，最多上传5张照片)
			</view>
			<view class="imgs">
				<view class="img-item" v-for="(item,index) in fromData.adv" :key="index">
					<image :src="item" mode=""></image>
					<image class="imgclise" @click="deletImg(index)" :src="imgfixUrls + 'homemakingImg/imgcolse.png'" mode=""></image>
				</view>
				<view class="img-item" @click="uploadFiles(2, 5)" v-if="fromData.adv.length < 5">
					<image :src="imgfixUrls + 'homemakingImg/upload.png'" mode=""></image>
				</view>
			</view>
		</view>
		<view class="line">
			
		</view>
		<view class="form">
			<view class="title" style="padding-bottom: 30upx;">
				上传视频
			</view>
			<view class="videoBox">
				<view class="video" @click="upVideo" v-if="!fromData.videourl">
					<image :src="imgfixUrls + 'homemakingImg/videoUpload.png'" mode=""></image>
				</view>
				<view class="video" v-else>
					<video x5-video-player-type='h5' x5-video-player-fullscreen='true' x5-video-orientation='portraint' class="text-video-left" :controls="false" :src="fromData.videourl" controls></video>
					<!-- <video x5-video-player-type='h5' x5-video-player-fullscreen='true' x5-video-orientation='portraint' class="text-video-left" :src="" controls></video> -->
					<image class="imgclise" @click="deletvideo" :src="imgfixUrls + 'homemakingImg/imgcolse.png'" mode=""></image>
				</view>
			</view>
		</view>
		<view class="line">
			
		</view>
		<view class="form">
			<view class="title" style="padding-bottom: 30upx;">
				服务说明
			</view>
			<view class="textarea-box">
				<textarea value="" class="textarea" v-model="fromData.detail" placeholder="请输入服务说明" />
			</view>
		</view>
		<view class="issue" @click.stop="Adservice">
			发布服务
		</view>
		<PopManager :show="showoccupation" :type="'bottom'" :overlay="'false'" :showOverlay="'false'" @clickmask="showoccupation = false">
			<view class="cicupation">
				<view class="cicupation-left">
					<view :class="item.checked?'left-item':'left-nocheck'" v-for="(item,index) in cate" :key="index" @click="checkLeft(item.id)" >
						{{item.title}}
					</view>
				</view>
				<view class="cicupation-right">
					<view :class="item.checked?'right-item':'right-nocheck'" v-for="(item,index) in rightList" :key="index" @click="checkRight(item.id)">
					{{item.title}}
					</view>
				</view>
			</view>
		</PopManager>
		<!-- <TabBars :tabBarAct="0" pageType="18"></TabBars> -->
	</view>
</template>

<script>
	import App from '@/common/js/app.js';
	import PopManager from '@/components/template/PopManager';
	import TabBars from '@/components/template/tabBar.vue';
	// #ifdef H5
	import wxApi from '@/common/js/wxApi.js';
	// #endif
	export default{
		data(){
			return{
				fromData:{
					catearray:[],
					adv:[],
					title:''
				},
				showoccupation:false,
				cate:[],
				rightList:[],
				loadlogo:false,
				arrs:[{
					title:'面议',
					id:0
				},
				{
					title:'预约金',
					id:1
				},
				{
					title:'实价',
					id:2
				}],
				indexs:0,
				userinfo:{},
				id:'',
				arid:''
			}
		},
		components:{
			PopManager,
			TabBars
		},
		onLoad(e) {
			this.id = e.id || '';
			this.arid = e.arid || '';
			this.type = e.type;
			this.userinfo = uni.getStorageSync('userinfo');
			this.getinitialize();
		},
		methods:{
			deletcheck(id){
				let _this = this;
				_this.cate.map((item,index)=>{
					item.list.map((items,indexs)=>{
						if(items.id == id){
							items.checked = false;
						}
					})
					
				});
				_this.fromData.catearray.map((items,indexs)=>{
					if(items.id == id){
						_this.fromData.catearray.splice(indexs,1)
					}
				})
				_this.rightList.map((items,indexs)=>{
					if(items.id == id){
						items.checked = false;
					}
				})
			},
			Adservice(){
				let _this = this;
				let data = {
					type:this.type,
					objid:_this.arid,
					id:_this.fromData.id || ''
				};
				let fromData = JSON.parse(JSON.stringify(_this.fromData));
				if(!fromData.title){
					uni.showToast({
						title:'服务标题不能为空',
						icon:'none'
					});
					return
				}
				if(fromData.catearray.length == 0){
					uni.showToast({
						title:'请选择服务类型',
						icon:'none'
					});
					return
				}
				if(!fromData.price && _this.indexs != 0){
					uni.showToast({
						title:'请输入支付金额',
						icon:'none'
					});
					return
				}
				if(!fromData.unit && _this.indexs != 0){
					uni.showToast({
						title:'请输入服务计量单位',
						icon:'none'
					});
					return
				}
				let cateIds = [];
				fromData.catearray.map((item,index)=>{
					cateIds.push(item.id);
				});
				fromData.pricetype = _this.arrs[_this.indexs].id;
				fromData.catearray = cateIds;
				let storehours = JSON.stringify(fromData);
				let base64 = new this.$util.Base64();
				storehours = base64.encode(storehours);
				data.serviceinfo = storehours;
					App._post_form(
						`&p=housekeep&do=editServiceApi`,
						data,
						res => {
							console.log(res);
							App.navigationTo({
								url: `pages/subPages2/homemaking/myServiceList/myServiceList?type=${this.type}&sid=${this.arid}`,
								navType:'reLaunch'
							});
						},
						false,
						() => {
							this.loadlogo = true;
						}
					);
			},
			deletvideo(){
				this.fromData.videourl = '';
			},
			upVideo(){
				let _this = this;
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					success: function(res) {
						uni.showLoading();
						uni.uploadFile({
							url: App.api_root + '&do=uploadFiles', //仅为示例，非真实的接口地址
							filePath: res.tempFilePath,
							name: 'file',
							formData: {
								upload_type: 1,
								is_base: 1
							},
							success: res => {
								
								let data = JSON.parse(res.data),
									base64 = new _this.$util.Base64();
									debugger
								if (data.errno === 0) {
									_this.fromData.videourl = base64.decode(data.data.img)
								} else {	
									App.showError(data.message, () => {});
								}
								uni.hideLoading();
							},
							fail: res => {
								uni.hideLoading();
							}
						});
					}
				});
			},
			deletImg(index,flag = false){
				if(!flag){
					this.fromData.adv.splice(index,1)
				}else{
					this.fromData.thumb = '';
				}
				
			},
			Change(e){
				console.log(e);
				this.indexs = e.detail.value;
			},
			checkRight(id){
				let _this = this;
				_this.rightList.map((item,index)=>{
					// item.checked = false;
					if(item.id == id){
						item.checked = !item.checked;
						if(item.checked){
							_this.fromData.catearray.push(item);
						}else{
							_this.fromData.catearray.map((items,indexs)=>{
								if(items.id == item.id){
									_this.fromData.catearray.splice(indexs,1);
								}
							})
						}
						
					}
				});
				_this.loadlogo = !_this.loadlogo;
				_this.loadlogo = !_this.loadlogo;
			},
			checkLeft(id){
				let _this = this;
				_this.cate.map((item,index)=>{
					item.checked = false;
					if(item.id == id){
						item.checked = true;
						_this.rightList = item.list;
					}
				});
				_this.loadlogo = !_this.loadlogo;
				_this.loadlogo = !_this.loadlogo;
			},
			getinitialize(){
				let _this = this;
					App._post_form(
						`&p=housekeep&do=editServicePage`,
						{id:_this.id,type:_this.type,objid:_this.arid},
						res => {
							console.log(res);
							// debugger
							// _this.areas = res.data.areas;
							_this.fromData = res.data.service;
							_this.cate = res.data.cate;
							_this.indexs = _this.fromData.pricetype || 0;
							// _this.meals = res.data.meals;
							_this.cate.map((item,index)=>{
								item.checked = false;
								item.list.map((items,indexs)=>{
									items.checked = false;
									_this.fromData.catearray.map((itemis,indexss)=>{
										if(items.id == itemis.id){
											items.checked = true;
										}
									})
								})
							});
							// _this.areas.map((item,index)=>{
							// 	item.checked = false;
							// })
						},fail=>{					if(fail.data.message == '认证后才能发布服务项目'){
						if(_this.type != 1){
							App.navigationTo({
								url: `pages/subPages/attestationCenter/index?rzType=1&type=1`,
								navType:'reLaunch'
							});
						}else{
							App.navigationTo({
								url: `pages/subPages/attestationCenter/index?rzType=2`,
								navType:'reLaunch'
							});
						}											
						}					
						console.log(fail)				
						});
			
			},
			uplodephone(length,localIds,type){
			let _this = this;
					wxApi.uoloadIg(localIds[length], data => {
						if (data.errMsg === 'uploadImage:ok') {
							uni.showLoading({});
							let requestData = {
								upload_type: 2,
								id: data.serverId
							};
							App._post_form(
								'&do=uploadFiles',
								requestData,
								res => {
									if (res.errno === 0) {
										if(type == 1){
											_this.fromData.thumb = res.data.img;
										}else{
											let num = length + 1;
											_this.fromData.adv.push(res.data.img);
											if(num < _this.uploadlength){
												uni.setTimeout(_this.uplodephone(num,_this.localIds),500);
											}
										}
											
									}
								},
								false,
								() => {
									
									uni.hideLoading();
								}
							);
						} else {
							uni.hideLoading();
							App.showError('上传失败');
						}
					});
				
			},
			// 文件上传接口
			async uploadFiles(type, num) {
				let _this = this;
				// _this.uoloadIgs(i, 0, res, type);
				// #ifdef H5
				if(App.getClientType() == 2){
					let res = await App.browser_upload(num);
				    if(type == 1){
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							let aa = await App._upLoad(res.tempFilePaths[i]);
								_this.fromData.thumb = aa.data.img;
						}
					}else{
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							let aa = await App._upLoad(res.tempFilePaths[i]);
							if (type == 2) {
								_this.fromData.adv.push(aa.data.img);
								// _this.userInfo.thumbs.push(aa.data.image);
								console.log(_this.fromData.adv,aa.data.img);
								
							}else{
								_this.fromData.adv.push(aa.data.img);
							}
						}
					}
					return
				}
				if(type == 1){
					wxApi.choseImage(res => {
						// let length 
						_this.localIds = res.localIds;
						_this.uploadlength = res.localIds.length;
						_this.uplodephone(0,_this.localIds,type);
					},1);
				}else{
					wxApi.choseImage(res => {
						// let length 
						_this.localIds = res.localIds;
						_this.uploadlength = res.localIds.length;
						_this.uplodephone(0,_this.localIds);
					},5);
				}
					
				// #endif
				// #ifndef H5
				if(type == 1){
					wx.chooseImage({
						count: 1,
						sourceType: ['album', 'camera'],
						success: async function(res) {
							// console.log(_this.userInfo.havestore, _this.page, '-------');
							for (let i = 0; i < res.tempFilePaths.length; i++) {
								let aa = await App._upLoad(res.tempFilePaths[i]);
									_this.fromData.thumb = aa.data.img;
							}
						}
					});
				}else{
					wx.chooseImage({
						count: 5,
						sourceType: ['album', 'camera'],
						success: async function(res) {
							// console.log(_this.userInfo.havestore, _this.page, '-------');
							for (let i = 0; i < res.tempFilePaths.length; i++) {
								let aa = await App._upLoad(res.tempFilePaths[i]);
								if (type == 2) {
									_this.fromData.adv.push(aa.data.img);
									// _this.userInfo.thumbs.push(aa.data.image);
									console.log(_this.fromData.adv,aa.data.img);
									
								}else{
									_this.fromData.adv.push(aa.data.img);
								}
							}
						}
					});
				}
					
				// #endif
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pubService{
		.line{
			height: 20upx;
			background-color: #F8F8F8;
		}
		.issue{
			width: 750upx;
			height: 90upx;
			background: linear-gradient(360deg, #6094FD 0%, #70A8FD 100%);
			line-height: 90upx;
			position: fixed;
			bottom: 0;
			left: 0;
			text-align: center;
			font-size: 32upx;
			color: #FFFFFF;
			font-weight: bold;
			border-radius: 30upx 30upx 0 0;
			z-index: 999;
		}
		.form{
			padding: 30upx;
			.title{
				font-size: 32upx;
				color: #333333;
				font-weight: bold;
			}
			.textarea-box{
				.textarea{
					width: 100%;
					height: 250upx;
					font-size: 28upx;
				}
			}
			.videoBox{
				position: relative;
				.video{
					width: 690upx;
					height: 388upx;
					image{
						width: 100%;
						height: 100%;
					}
					video{
						width: 100%;
						height: 100%;
					}
					.imgclise{
						width: 40upx;
						height: 40upx;
						position: absolute;
						right: 10upx;
						top: 10upx;
						z-index: 9999;
					}
				}
			}
			.imgs{
				padding: 30upx 0;
				display: flex;
				flex-wrap: wrap;
				align-content: flex-center;
				align-items: center;
				justify-content: left;
				.img-item{
					height: 158upx;
					border-radius: 20upx;
					flex: auto;
					margin: 10upx;
					width: 158upx;
					min-width: 158upx;
					max-width: 158upx;
					position: relative;
					image{
						width: 100%;
						height: 100%;
						border-radius: 20upx;
					}
					.imgclise{
						width: 30upx;
						height: 30upx;
						position: absolute;
						right: 10upx;
						top: 10upx;
					}
				}
			}
			.formItem{
				height: 100upx;
				line-height: 100upx;
				display: flex;
				.formName{
					width: 172upx;
					font-size: 28upx;
					color: #333333;
				}
				.formContent{
					flex: 1;
					.input{
						height: 100upx;
						line-height: 100upx;
						font-size: 28upx;
					}
					.inputLeft{
						font-size: 28upx;
						height: 100upx;
						line-height: 100upx;
						width: 100%;
						text-align: left;
					}
					.check-item{
						padding: 0 10upx;
						border-radius: 10upx;
						background-color: #FF4444;
						color: #FFFFFF;
						height: 40upx;
						line-height: 40upx;
						text-align: center;
						display: inline-block;
						margin-right: 10upx;
						margin-bottom: 10upx;
						position: relative;
						image{
							width: 30upx;
							height: 30upx;
							margin-top: 5upx;
							vertical-align: top;
							margin-left: 10upx;
						}
					}
				}
			}
		}
		.cicupation{
			width: 750upx;
			height: 550upx;
			padding: 30upx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			border-radius: 30upx 30upx 0 0;
			display: flex;
			.cicupation-left{
				padding-right: 10upx;
				height: 450upx;
				flex: 1;
				overflow: auto;
				.left-item{
					line-height: 60upx;
					font-size: 26upx;
					text-align: center;
					background-color: #ff4444;
					color: #FFFFFF;
					border-bottom: 1upx solid #EEEEEE;
					border-radius: 15upx;
					margin-bottom: 20upx;
					font-weight: bold;
				}
				.left-nocheck{
					line-height: 60upx;
					font-size: 26upx;
					text-align: center;
					background-color: #F8F8F8;
					border-bottom: 1upx solid #EEEEEE;
					border-radius: 15upx;
					margin-bottom: 20upx;
				}
			}
			.cicupation-right{
				flex: 1;
				padding-left: 10upx;
				height: 450upx;
				overflow: auto;
				.right-item{
					line-height: 60upx;
					font-size: 26upx;
					text-align: center;
					background-color: #ff4444;
					border-bottom: 1upx solid #EEEEEE;
					border-radius: 15upx;
					margin-bottom: 20upx;
					color: #FFFFFF;
				}
				.right-nocheck{
					line-height: 60upx;
					font-size: 26upx;
					text-align: center;
					background-color: #F8F8F8;
					border-bottom: 1upx solid #EEEEEE;
					border-radius: 15upx;
					margin-bottom: 20upx;
				}
			}
		}
	}
</style>
