<template>
	<view class="select">
		<view class="select_item clear">
		    <view class="select_item_lf">项目类别</view>
		    <navigator open-type="navigate" hover-class="none" url="../serve_class/serve_class" class="select_item_rg" v-if="from.serviceName == ''">添加项目类别 <text class="iconfont more"></text></navigator>
		    <navigator open-type="navigate" hover-class="none" url="../serve_class/serve_class" class="select_item_rg black" v-else>{{from.serviceName}} <text class="iconfont more"></text></navigator>
		</view>
		<view class="select_item clear">
		    <view class="select_item_lf">项目标题</view>
		    <view class="select_item_rg">
		        <input v-model="from.name" class="select_item_rg1" placeholder="输入您的项目标题" placeholder-class="select_item_rg_place1"></input>
		    </view>
		</view>
		<view class="select_item clear">
		    <view class="select_item_lf">原价</view>
		    <view class="select_item_rg">
		        <view class="price_icon">元</view>
		        <input v-model="from.price" type="number" class="select_item_rg2" placeholder="输入价格" placeholder-class="select_item_rg_place"></input>
		        <view class="price_icon">¥</view>
		    </view>
		</view>
		<view class="select_item clear">
		    <view class="select_item_lf">优惠价</view>
		    <view class="select_item_rg">
		        <view class="price_icon">元</view>
		        <input v-model="from.disPrice" type="number" class="select_item_rg2" placeholder="输入价格" placeholder-class="select_item_rg_place"></input>
		        <view class="price_icon">¥</view>
		    </view>
		</view>
		<view class="select_item clear">
		    <view class="select_item_lf">服务有效期</view>
		    <view class="select_item_rg" style="display: flex;">
		        <view class="radio1" style="margin-right: 20rpx;" @tap="changeTime">
					<image :src="timeStatus == 1?'https://wx.fujinyangche.com/nvrnetwork/images/select.png':'https://wx.fujinyangche.com/nvrnetwork/images/no_select.png'"></image>
					<view class="radio1_text">长期有效</view>
		        </view>
		        <view class="radio1">
					<image :src="timeStatus == 1?'https://wx.fujinyangche.com/nvrnetwork/images/no_select.png':'https://wx.fujinyangche.com/nvrnetwork/images/select.png'"></image>
					<picker mode="date" @change="changeTime2">
						<view class="radio1_text">{{time}}</view>
					</picker>
		        </view>
		    </view>
		</view>
		<view class="select_item clear">
		    <view class="select_item_lf">服务预约</view>
		    <view class="select_item_rg" style="display: flex;">
		        <view class="radio1" style="margin-right: 20rpx;" @tap="changeDay">
					<image :src="dayStatus == 1?'https://wx.fujinyangche.com/nvrnetwork/images/select.png':'https://wx.fujinyangche.com/nvrnetwork/images/no_select.png'"></image>
					<view class="radio1_text">无需预约</view>
		        </view>
		        <view class="radio1" >
					<image :src="dayStatus == 1?'https://wx.fujinyangche.com/nvrnetwork/images/no_select.png':'https://wx.fujinyangche.com/nvrnetwork/images/select.png'"></image>
					<view class="radio1_text" style="display: flex; align-items: center">提前<input type="number" @input="changeDay2" :value="from.aheadDays" class="day"/>天预约</view>
		        </view>
		    </view>
		</view>
		<view class="select_item clear">
		    <view class="select_item_lf">服务单位</view>
		    <view class="select_item_rg" >
		        <view class="danwei">
					<picker @change="PickerChange" mode = "selector" :value="index" :range="fuwu_danwei">
						<view class="danwei_text">{{fuwu_danwei[index]}}</view>
					</picker>
		        </view>
		        <input v-model="from.serviceTime" type="number" class="select_item_rg1" style="width:18%;text-align: center;" placeholder-class="select_item_rg_place1"></input>
		    </view>
		</view>
		<!-- 项目介绍 -->
		<view class="content">
		    <view class="content_title">项目介绍</view>
		    <textarea v-model="from.serviceIntroduce"  maxlength="500" placeholder="输入您的项目介绍内容…" class="content_text" placeholder-class="content_text_place"></textarea> 
		</view>
		<!-- 上传图片 -->
		<view class="content choseimg">
		    <view class="content_title">上传图片</view>
		    <view class="fengmian">
		          <view class="faceImgWrap" v-for="item,index in from.faceImg" :key="index">
					   <image mode="aspectFill" :src="url + item"></image>
					   <view class="iconfont delate_icon" @tap="deleteImg(index)"></view>
		          </view>
		        <image mode="aspectFill" :src="img" @tap="chooseImg"></image>
		    </view>
		</view>
		<view class="footer">
		    <button class="submit" @tap="submit">保存</button>
		</view>
	</view>
</template>

<script>
	import api from "../../../../../../api.js";
	import schema from 'async-validator';
	let app = getApp();
	export default {
		data() {
			return {
				id:'',//服务项目id
				url:app.globalData.url,
				img:'https://wx.fujinyangche.com/nvrnetwork/images/choseimg.png',//图片临时路径
				timeStatus:1,
				dayStatus:1,
				time:'截止日期',
				from:{
					serviceName:'',//项目类别
					name:'',//项目标题
					price:'',//原价
					disPrice:'',//优惠价
					validityDateFormat:'',//服务有效期
					aheadDays:'',//服务预约
					serviceTime:1,//服务单位
					serviceIntroduce:'',//项目介绍
					faceImg:[],//服务器返回路径
				},//表单数据
				fuwu_danwei:['次','套','个','台','瓶','桶','件','箱','面','袋'],//服务单位
				index:0,
				descriptor:{
				  serviceName: {
				    type: "string",
				    required: true,
				    message:'请选择项目类别'
				  },
				  name: {
				    type: "string",
				    required: true,
				    message:'请输入项目标题'
				  },
				  price:{
					type: "string",
					required: true,
					message:'请输入价格'  
				  },
				  serviceIntroduce:{
				  	type: "string",
				  	required: true,
				  	message:'请输入服务介绍'   
				  },
				  faceImg:{
					type: "string",
					required: true,
					message:'请上传封面图'    
				  }
				},//表单验证协议
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getData();
		},
		onShow() {
			// 然后在onshow里面
			const pages = getCurrentPages();
			const currPage = pages[pages.length - 1];  // 当前页
			if(currPage.serviceName !== undefined){
				this.from.serviceName = currPage.serviceName;
			}
			
		},
		methods: {
			//回显信息
			getData(){
				let data = {
					id:this.id
				}
				api.getUserMyServrWrite(data).then((res)=>{
					console.log(res);
					let serviceTime = res.data.data.serviceTime;
					let danwei = serviceTime.charAt(serviceTime.length-1)
					let index = this.fuwu_danwei.indexOf(danwei);
					serviceTime = serviceTime.substring(0,serviceTime.length-1);
					let validityDateFormat = res.data.data.validityDateFormat;
					let aheadDays = res.data.data.aheadDays;
					if(validityDateFormat == ""){
						this.time = '截止日期',
						this.timeStatus = 1;
						this.from.validityDateFormat = "";
					}else{
						this.time = validityDateFormat,
						this.timeStatus = 0;
						this.from.validityDateFormat = validityDateFormat;
					}
					if(aheadDays == ""){
						this.dayStatus = 1;
						this.from.aheadDays = "";
					}else{
						this.dayStatus = 0;
						this.from.aheadDays = aheadDays;
					}
					this.from.serviceName = res.data.data.serviceName;
					this.from.name = res.data.data.name;
					this.from.price = res.data.data.price;
					this.from.disPrice = res.data.data.disPrice;
					this.from.serviceTime = serviceTime;
					this.index = index;
					this.from.serviceIntroduce = res.data.data.serviceIntroduce;
					this.from.faceImg = res.data.data.imgList;
				})
			},
			//服务有效期
			changeTime(){
				this.timeStatus = 1;
				this.time = '截止日期';
				this.from.validityDateFormat = '';
			},
			changeTime2(e){
			    let value = e.detail.value;
				this.timeStatus = 0;
				this.time = value;
				this.from.validityDateFormat = value;
			},
			//服务预约
			changeDay(e) {
				this.dayStatus = 1;
				this.from.aheadDays = '';
			},
			changeDay2(e) {
			    let value = e.detail.value;
				this.dayStatus = 0;
				this.from.aheadDays = value;
			},
			//服务单位
			PickerChange(e){
				let index = e.detail.value;
				this.index = index;
			},
			// 上传封面图
			chooseImg(e){
			    uni.chooseImage({
			      count: 1,
			      sizeType: ['original', 'compressed'],
			      sourceType: ['album', 'camera'],
			      success:res=> {
			        let tempFilePaths = res.tempFilePaths[0];
			        uni.uploadFile({
			          url: this.url + '/nvrnetwork/service_item/save_img',
			          filePath: tempFilePaths,
			          name: 'img',
			          header: {
			            "Content-Type": "multipart/form-data"
			          },
			          success:res=>{
						  console.log(res)
						  let data = JSON.parse(res.data);
						  console.log(data)
			              this.from.faceImg.push(data.data);
			          }
			        })
			
			      },
			    })
			},
			//删除图片
			deleteImg(index){
				this.from.faceImg.splice(index,1);
			},
			submit(){
				let obj = Object.assign({},this.from);
				obj.serviceTime = obj.serviceTime + this.fuwu_danwei[this.index];
				obj.faceImg = obj.faceImg.join(",")
				let data = {
					token:app.globalData.token,
					id:this.id,
					...obj
				}
				let validator = new schema(this.descriptor);
				validator.validate(data).then(() => {
					api.submitUserMyServe(data).then((res)=>{
						console.log(res);
					})
				}).catch(({ errors, fields }) => {
					uni.showToast({
						icon: 'none',
						duration:2000,
						title:errors[0].message
					})
				})
			}
		}
	}
</script>

<style>
	page{
	  width: 100%;
	  height:100%;
	  background-color: #f7f7f7;
	}
	.select{
	  width:100%;
	  overflow: hidden;
	  /* padding:0 30rpx; */
	  box-sizing: border-box;
	  background-color: #ffffff;
	  margin-top:20rpx;
	  padding: 0 30rpx 200rpx 30rpx;
	}
	.select_item{
	  width:100%;
	  height:100rpx;
	  display: flex;
	  line-height: 100rpx;
	  border-bottom: 1px solid #f2f2f2;
	}
	.select_item_lf{
	  font-size: 30rpx;
	  color:#555555;
	}
	.select_item_rg{
	  margin-left: auto;
	  font-size: 30rpx;
	  color:#999999;
	  height:100%;
	}
	.price_icon{
	  float:right;
	  color:#222222;
	}
	.select_item_rg1{
	  width:88%;
	  height:100%;
	  float:right;
	  text-align: right;
	  color:#222222;
	}
	.select_item_rg2{
	  width:36%;
	  height:100%;
	  float:right;
	  text-align: center;
	  color:#222222;
	}
	.select_item_rg_place{
	  font-size: 30rpx;
	  color:#999999;
	  text-align: center;
	}
	.select_item_rg_place1{
	  font-size: 30rpx;
	  color:#999999;
	  text-align: right;
	}
	.more{
	  font-size: 26rpx;
	  color:#999999;
	}
	.content{
	  width:100%;
	  padding-bottom:28rpx;
	  border-bottom: 1px solid #f2f2f2;
	  margin-top:28rpx;
	}
	.content_title{
	  font-size: 30rpx;
	  color:#555555;
	}
	.content_text{
	  width:100%;
	  height:200rpx;
	  padding:14rpx 20rpx;
	  box-sizing: border-box;
	  background:rgba(249,249,249,1);
	  border-radius:6rpx;
	  border:1px solid rgba(202,202,202,1);
	  margin-top:20rpx;
	  position: relative;
	}
	.content_text_place{
	  font-size: 26rpx;
	  color:#999999;
	}
	.content_text_num{
	  position: absolute;
	  bottom:10rpx;
	  right:12rpx;
	  font-size: 24rpx;
	  color:#999999;
	}
	.faceImgWrap{
	  display: inline-block;
	  width:148rpx;
	  height:148rpx;
	  margin-right: 20rpx;
	  position: relative;
	}
	.fengmian image{
	  width:148rpx;
	  height:148rpx;
	  border-radius: 6rpx;
	}
	.delate_icon{
	  font-size:36rpx;
	  color:#999999;
	  position: absolute;
	  top:0;
	  right:0;
	}
	.choseimg{
	  border-bottom:none;
	}
	.footer{
	  width:100%;
	  height:100rpx;
	  background:rgba(255,255,255,1);
	  box-shadow:0px 4rpx 8rpx 0px rgba(0,0,0,0.5);
	  position: fixed;
	  bottom:0;
	  left:0;
	  z-index:100;
	}
	.submit{
	  width:690rpx;
	  height:80rpx;
	  background:linear-gradient(270deg,rgba(254,107,21,1) 0%,rgba(254,163,48,1) 100%);
	  border-radius:40rpx;
	  text-align: center;
	  font-size: 32rpx;
	  color:#ffffff;
	  position: absolute;
	  top:10rpx;
	  left:50%;
	  transform: translateX(-50%)
	}
	.black{
	  color:#222222;
	}
	.fengmian{
	  margin-top: 30rpx;
	  position: relative;
	}
	.danwei{
	  float:right;
	  margin-top:18rpx;
	}
	.danwei_text{
	  width:64rpx;
	  height:64rpx;
	  text-align: center;
	  line-height: 64rpx;
	  color:#222222;
	  background-color: rgba(249,249,249,1);
	  border-radius: 8rpx;
	}
	.radio1{
	  display: flex;
	  height:100%;
	  align-items: center;
	}
	.radio1 image{
	  display: block;
	  width:28rpx;
	  height:28rpx;
	}
	.radio1_text{
	  font-size: 30rpx;
	  color:#555555;
	  margin-left: 10rpx;
	}
	.day{
	  width:50rpx;
	  height:100%;
	  border:1px solid #CCCCCC;
	  text-align: center;
	  margin:0 10rpx;
	}
</style>
