<template>
	<!-- 编辑综合运输 -->
	<view class="edit_synth">
		<view class="top_box">
			<view class="top_title" v-if="isShowTitle">
				<view class="top_txt">如有填报问题，请咨询公共服务中心</view>
				<view class="bot_txt">中心值班电话：<span style="color: #2D8CF0;">66007587</span></view>
			</view>
			<view class="content_box">
				<view class="basic_box">
					<view class="con_tit">基本信息</view>
					<view class="edit_item">
						<p class="left">填报日期</p>
						<view class="right">
							<uni-datetime-picker type="date" v-model="synthData.reportDate">
								<p class="right_txt">{{synthData.reportDate ? synthData.reportDate : '请选择日期'}}</p>
								<uni-icons type="right" size="16"></uni-icons>
							</uni-datetime-picker>
						</view>
					</view>
				</view>
				<view class="basic_box data_box">
					<view class="con_tit">综合运输数据</view>
					<view class="edit_item input">
						<p class="left">班次</p>
						<view class="right">
							<uni-easyinput v-model="synthData.shifts" placeholder="请输入" placeholderStyle="color:#d4d4d4;"></uni-easyinput>
						</view>
					</view>
					<view class="per_con" v-if="pageType == 'edit'">
						<view class="content top">
							<view class="left">班次环比(%)</view>
							<view class="right" :class="synthData.shiftMom > 0 ? 'green' : synthData.shiftMom < 0 ? 'red' : ''">{{synthData.shiftMom ? synthData.shiftMom.toFixed(2) + '%' :  synthData.shiftMom == 0 ? 0 : ''}}</view>
						</view>
						<view class="content">
							<view class="left">班次同比(%)</view>
							<view class="right" :class="synthData.shiftYoy > 0 ? 'green' : synthData.shiftYoy < 0 ? 'red' : ''">{{synthData.shiftYoy ? synthData.shiftYoy.toFixed(2) + '%' : synthData.shiftYoy == 0 ? 0 : ''}}</view>
						</view>
					</view>
					<view class="edit_item input">
						<p class="left">人数</p>
						<view class="right">
							<uni-easyinput v-model="synthData.people" placeholder="请输入" placeholderStyle="color:#d4d4d4;"></uni-easyinput>
						</view>
					</view>
					<view class="per_con" v-if="pageType == 'edit'">
						<view class="content top">
							<view class="left">人数环比(%)</view>
							<view class="right" :class="synthData.peopleMom > 0 ? 'green' : synthData.peopleMom < 0 ? 'red' : ''">{{synthData.peopleMom ? synthData.peopleMom.toFixed(2) + '%' :  synthData.peopleMom == 0 ? 0 : ''}}</view>
						</view>
						<view class="content">
							<view class="left">人数同比(%)</view>
							<view class="right" :class="synthData.peopleYoy > 0 ? 'green' : synthData.peopleYoy < 0 ? 'red' : ''">{{synthData.peopleYoy ? synthData.peopleYoy.toFixed(2) + '%' : synthData.peopleYoy == 0 ? 0 : ''}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom_box">
			<p class="btn_item" @click="cancelEdit">取消</p>
			<p class="btn_item confirm" @click="confirmRoad">确认</p>
		</view>
	</view>
</template>

<script>
	import { getDateStr } from '../../../common/util'
	export default {
		data() {
			return {
				isShowTitle:false,
				roadTime:[],
				unitData:[],
				synthData:{
					shifts:'', //班次
					reportDate:'', //填报日期
					people:'' //人数
				},
				pageType:''
			}
		},
		onLoad(options) {
			// this.getRoadTime()
			// this.getDetail()
			if(options.pageFrom == 'edit'){
				this.pageType = 'edit'
				let row = JSON.parse(options.item);
				this.synthData = row;
				this.synthData.reportDatetime = this.synthData.reportDatetime ? this.synthData.reportDatetime.substring(0,10) : ''
			}else if(options.pageFrom == 'add'){
				this.pageType = 'add'
			}else if(options.type == 'add'){
				this.pageType = 'add'
			}
			
			
		},
		methods: {
			getDetail(){
				this.$request1(getApp().globalData.baseUrl + '/api/biz/roadtransport/road/find/89D260E420000001F70FB937A7F7088C',{},"GET").then(res =>{
					console.log(res)
				})
			},
			// 获取时段
			getRoadTime(){
				this.$request(getApp().globalData.baseUrl + '/api/dict/dictList?dictType=airport_time&_t=1693372307694',"GET").then(res =>{
					this.roadTime = res.data
					if(this.pageType == 'add'){
						let now = new Date();
						let dateStr = getDateStr(now,0);
						console.log(new Date().getTime())
						if(new Date(dateStr + ' 11:00').getTime() < new Date().getTime() < new Date(dateStr + ' 13:30').getTime()){
							this.roadData.reportPhase = "0012";
							this.index = this.roadTime.findIndex(item => item.dictValue == "0012")
							this.timeName = this.roadTime.find(item => item.dictValue == "0012").dictLabel
						}else{
							this.roadData.reportPhase = "03";
							this.index = this.roadTime.findIndex(item => item.dictValue == "03")
							this.timeName = this.roadTime.find(item => item.dictValue == "03").dictLabel
						}
					}
				})
			},
			// 点击确认按钮
			confirmRoad(){
				let params = this.synthData;
				if(params.reportDate == ''){
					uni.showToast({
						title:"请选择填报日期",
						icon:"none"
					})
				}else{
					uni.showModal({
						title:"提示",
						content:"您确定，提交报送吗？",
						success:(res) =>{
							if(res.confirm){
								this.$request(getApp().globalData.baseUrl + '/api/biz/bizTransportData/saveOrUpdate',params,'POST').then(res =>{
									if(res.code == 200){
										uni.showToast({
											title:'报送成功',
											icon:"none"
										});
										uni.navigateBack()
									}
								})
							}else if(res.cancel){}
						}
					})
				}
				
			},
			// 点击取消按钮
			cancelEdit(){
				uni.navigateBack()
			},
			
			onchange(e){
				console.log('确定===》',e)
			},
			onnodeclick(e){
				console.log('点击===》',e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.edit_synth{
		width: 100%;
		height: 100%;
		
		.top_box{
			margin-top: 30rpx;
			height:88%;
			overflow-y: auto;
			
			.top_title{
				width: 690rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: #666;
				font-size: 26rpx;
				line-height: 40rpx;
				margin-bottom: 20rpx;
			}
			
			.content_box{
				display: flex;
				flex-direction: column;
				.basic_box{
					width: 630rpx;
					padding: 30rpx 30rpx;
					margin: 0 auto;
					background-color: #fff;
					border-radius: 30rpx;
					
					&.data_box{
						margin-top: 30rpx;
					}
					
					.con_tit{
						width: 100%;
						margin-top: 10rpx;
						font-size: 40rpx;
						color: #333;
						font-weight: bold;
						margin-bottom: 9rpx;
					}
					
					.remark_item{
						color: #333;
						font-size: 30rpx;
						font-weight: bold;
						
						.left{
							margin-top: 20rpx;
							margin-bottom: 30rpx;
						}
						
						.right{
							/deep/ .is-input-border{
								border: 1rpx solid #c1c1c1 !important;
								border-radius: 30rpx !important;
							}
						}
					}
					.edit_item{
						width: 100%;
						display: flex;
						justify-content: space-between;
						margin-top: 32rpx;
						align-items: center;
						
						&.input{
							margin-top: 5rpx;
						}
						
						.left{
							// margin-left: 30rpx;
							color: #666;
							font-size: 26rpx;
						}
						.right{
							// margin-right: 30rpx;
							display: flex;
							align-items: center;
							
							
							
							.right_txt{
								color: #333;
								font-size: 28rpx;
							}
							
							.right_txt_box{
								display: flex;
								align-items: center;
								
							}
							
							/deep/ .uni-date-editor{
								display: flex;
								align-items: center;
							}
							/deep/ .uni-easyinput__content-input{
								font-size: 28rpx !important;
								text-align: right;
								color: #333;
							}
							
							/deep/ .is-input-border {
								border: none;
							}
							
							/deep/ .content-clear-icon{
								padding: 0 !important;
							}
						}
					}
					
					.per_con{
						width: 630rpx;
						margin: 0 auto;
						background-color: #F6F6F6;
						border-radius: 30rpx;
						margin-top: 30rpx;
						
						
						.content{
							width: 576rpx;
							padding: 34rpx 32rpx 30rpx 22rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							
							&.top{
								border-bottom: 1rpx solid #FFFFFF;
							}
							
							
							.left{
								font-size: 24rpx;
								color: #666;
							}
							.right{
								color: #333;
								font-size: 28rpx;
								
								&.green{
									color: #1ECE5F;
								}
								
								&.red{
									color: #EB4747;
								}
							}
						}
					}
				}
			}
		}
		.bottom_box{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			display: flex;
			justify-content: space-around;
			// background-color: #F8F8F8;
			padding: 0rpx 0rpx 20px;
			
			.btn_item{
				width: 329rpx;
				height: 90rpx;
				background: #F6F6F6;
				border: 1rpx solid #C1C1C1;
				color: #666;
				width: 329rpx;
				height: 90rpx;
				line-height: 88rpx;
				display: flex;
				justify-content: center;
				font-size: 28rpx;
				font-weight: 400;
				border-radius: 100rpx;
				
				&.confirm {
					background: #2D8CF0;
					border: 1rpx solid #2D8CF0;
					color: #FFFFFF;
				}
			}
		}
	}

</style>
