<template>
	<view class="content">
		<view class="opinionLine" v-for="(item,index) in suggestList">
			<view class="lineNum"> <span>建议（{{index+1}}）</span> 
			 <view class="delOpBox" v-if="index>0" @click="delOp(index)">
				 <image src="../../static/img/icon_list_del@2x.png" mode="" class="delopImg"></image>
				 <view class="delOpTxt">删除</view>
			 </view>
			</view>
			<view class="lineCont">
				<view class="lineContLeft">负责人</view>
				<view class="lineContRight" >
					<input type="text" value="" v-model="item.managerName" class="lineContInput" placeholder-style="color:#cccccc;" placeholder="请输入负责人姓名"/>
				</view>
			</view>
			<view class="lineCont">
				<view class="lineContLeft">预计完成时间</view>
				<view class="lineContRight" @click="pickerClick(item)">
					<picker mode="date" :value="item.orderFinishTime" @change="bindTimeChange" :start="nowDate">
					      <view class="uni-picker">
						     <span v-if='item.orderFinishTime'>{{item.orderFinishTime}}</span>
							 <span v-else class="timeNoSpan">请选择预计完成时间</span>
							 <image src="../../static/img/jiantou.png" mode="" class="jiantouImg"></image>
						  </view>
					 </picker>
				</view>
			</view>
			<view class="lineCont">
				  <textarea placeholder-style="color:#CCCCCC" placeholder="请输入您的建议~" 
				   class="textareaCont" maxlength='200' v-model="item.suggest"/>
			</view>
			<view class="addBox" @click="addOp" v-if="index==suggestList.length-1">
				<image src="../../static/img/icon_list_add@2x.png" mode="" class="addImg"></image>
				<view class="addTxt">增加建议</view>
			</view>
		</view>
		
		<view style="height: 150rpx;"></view>
		<view class="bottom">
			<view class="zc" @click="zc">暂存</view>
			<view class="submit" @click="submit">提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				date:'',
				suggestList:[
					{
						suggest:'',
						orderFinishTime:'',
						managerName:'',
					}
				],
				sheetID:'',
				shopName:'',
				Contactor:'',
				nowDate:'',
			}
		},
		onLoad(opt) {
          //页面加载初始化生命周期函数
		  this.sheetID=opt.sheetID;
		  this.Contactor=opt.Contactor;
		  this.shopName=opt.shopName;
		  if(opt.type==3){
			  this.suggestList=this.$store.state.suggestList;
			  this.addOp()
		  }
		  this.getTime()
		},
		methods: {
			bindTimeChange(e){
				console.log(e)
				this.pickerItem.orderFinishTime=e.detail.value;
			},
			pickerClick(item){
				this.pickerItem=item
			},
			addOp(){
				var obj={
					suggest:'',
					orderFinishTime:'',
					managerName:'',
				}
				this.suggestList.push(obj)
			},
			delOp(index){
				var that=this;
				var num=index+1
				uni.showModal({
				    title: '提示',
				    content: '您确定要删除建议'+ num +'吗？',
				    success: function (res) {
				        if (res.confirm) {
				          that.suggestList.splice(index,1)
											 
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
				
			},
			zc(){
				var goname=true;
				var gotime=true;
				var gosuggest=true;
				var that=this;
				this.suggestList.forEach(item=>{
					if(item.managerName==''){
						goname=false;
					}
					if(item.orderFinishTime==''){
						gotime=false;
					}
					if(item.suggest==''){
						gosuggest=false;
					}
				})
				if(!goname){
					uni.showToast({
					    title: '请填写负责人',
						 icon:'none',
					    duration: 2000,
					});
					return false;
				}else if(!gotime){
					uni.showToast({
					    title: '请选择预约时间',
						 icon:'none',
					    duration: 2000,
					});
					return false;
				}else if(!gosuggest){
					uni.showToast({
					    title: '请填写建议',
						 icon:'none',
					    duration: 2000,
					});
					return false;
				}
				console.log(this.suggestList);
				
				uni.showLoading({ });
				this.$http('accompany/SuperCheckSheet/saveSuperCheckSheetSuggest', {
					sheetID:this.sheetID,
					
					suggestList:JSON.stringify(this.suggestList)
				}, 'POST').then(res => {
				     uni.showToast({
				         title: '保存成功',
				     	 icon:'success',
				         duration: 2000,
				     });
					 //this.$store.commit('mutationsCategoryList',this.categoryList)
					 setTimeout(function(){
					 	/* uni.navigateBack({
					 		delta:2
					 	}) */
						uni.navigateTo({
							url:'../reportManage/reportDetail?id='+that.sheetID+'&type=4'
						})
					 },1000)
					
				})
			},
			submit(){
				var goname=true;
				var gotime=true;
				var gosuggest=true;
				this.suggestList.forEach(item=>{
					if(item.managerName==''){
						goname=false;
					}
					if(item.orderFinishTime==''){
						gotime=false;
					}
					if(item.suggest==''){
						gosuggest=false;
					}
				})
				if(!goname){
					uni.showToast({
					    title: '请填写负责人',
						 icon:'none',
					    duration: 2000,
					});
					return false;
				}else if(!gotime){
					uni.showToast({
					    title: '请选择预约时间',
						 icon:'none',
					    duration: 2000,
					});
					return false;
				}else if(!gosuggest){
					uni.showToast({
					    title: '请填写建议',
						 icon:'none',
					    duration: 2000,
					});
					return false;
				}
				uni.showLoading({ });
				this.$http('accompany/SuperCheckSheet/saveSuperCheckSheetSuggest', {
					sheetID:this.sheetID,
					
					suggestList:JSON.stringify(this.suggestList)
				}, 'POST').then(res => {
				    this.submitSuperCheckSheet()
				})
			},
			submitSuperCheckSheet(){
				var that=this;
				uni.showLoading({ });
				this.$http('accompany/SuperCheckSheet/submitSuperCheckSheet', {
					sheetID:this.sheetID,
					
				}, 'POST').then(res => {
				    uni.showToast({
				        title: '保存成功',
				    	 icon:'success',
				        duration: 2000,
				    });
					setTimeout(function(){
						uni.navigateTo({
							url:'shopEvaStar?id='+res.data+'&sheetID='+that.sheetID+'&shopName='+that.shopName+'&Contactor='+that.Contactor
						})
						if(res.data){
							
						}else{
							/* uni.navigateBack({
								delta:2
							}) */
							/* uni.navigateTo({
								url:'../reportManage/reportDetail?id='+that.sheetID+'&type=4'
							}) */
						}
					},1000)
					
					
				})
			},
			getTime(){
				var date = new Date(),
				year = date.getFullYear(),
				month = date.getMonth() + 1,
				day = date.getDate(),
				hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
				minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
				second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				var timer = year + '-' + month + '-' + day //+ ' ' + hour + ':' + minute + ':' + second;
				this.date=timer;
				this.nowDate=timer;
				return timer;
			},
           
		}
	}
</script>

<style scoped>
	.content{
		 background: #F4F5F7;
		 min-height: 100vh;
		
	}
	/* #ifdef H5 */
		.content{
			 background: #F4F5F7;
			 min-height:calc(100vh - 44px);
			
		}
	/* #endif */
	.lineNum{
      line-height: 74rpx;	
	  padding-left: 24rpx;
	  color: #999999;
	  font-size: 24rpx;
	  display: flex;
	  justify-content: space-between;
	}
	.lineCont{
		background: #FFFFFF;
		display: flex;
		padding: 30rpx 24rpx;
		border-bottom: 1px solid #EEEEEE;
	}
	.lineContLeft{
		width: 200rpx;color: #3C3C3C;
		font-size: 28rpx;
	}
	.uni-picker{
		width: 500rpx;
		display: flex;
		justify-content: space-between;
	}
	.jiantouImg{
		width: 14rpx;
		height: 26rpx;
		margin-top: 5rpx;
	}
	.timeNoSpan{
		color: #CCCCCC;
		font-size: 28rpx;
	}
	.lineContInput{
		font-size: 28rpx;
	}
	.textareaCont{
		width: 702rpx;
		height: 200rpx;
	}
	.addTxt{
		line-height: 36rpx;
		color: #3F90F7;
		padding-left: 16rpx;
	}
	.addImg{
		width: 36rpx;
		height: 36rpx;
	}
	.addBox{
		display: flex;
		justify-content: center;
		background: #FFFFFF;
		padding: 30rpx;
	}
	.bottom{
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0px -4px 8px 0px rgba(153,153,153,0.08);
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: space-around;
	}
	.submit{
		width: 336rpx;
		height: 74rpx;
		background: linear-gradient(124deg, #FF8700 0%, #FF4F00 100%);
		border-radius: 37rpx;
		text-align: center;
		line-height: 74rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		margin-top: 22rpx;
	}
	.zc{
		width: 336rpx;
		height: 74rpx;
		background: #F4F5F7;
		border-radius: 37rpx;
		text-align: center;
		line-height: 74rpx;
		color: #3C3C3C;
		font-size: 30rpx;
		margin-top: 22rpx;
	}
	.delopImg{
		width: 22rpx;height: 24rpx;
		margin-top: 24rpx;
		margin-right: 10rpx;
	}
	.delOpBox{
		display: flex;
		color: #3F90F7;
		font-size: 24rpx;
		padding: 0 24rpx;
	}
</style>
