<template>
	<!-- 编辑综合运输 -->
	<view class="edit_box">
		<view class="top_box">
			<view class="top_title">
				<view class="top_txt">如有填报问题，请咨询公共服务中心</view>
				<view class="bot_txt">中心值班电话：<text @click="call(mobile)" class="tel">{{mobile}}</text></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">
							<p>{{synthData.departmentName ? synthData.departmentName : ''}}</p>
						</view>
					</view> -->
					<view class="edit_item">
						<p class="left">统计日期</p>
						<view class="right">
							<!-- <uni-datetime-picker type="date" v-model="synthData.reportDatetime">
								<p class="right_txt">{{synthData.reportDatetime ? synthData.reportDatetime : '请选择日期'}}</p>
								<uni-icons type="right" size="16"></uni-icons>
							</uni-datetime-picker> -->
							<picker mode="date" :value="synthData.reportDatetime" @change="bindDateChange">
								<text class="picker_select"
									:style="synthData.reportDatetime?'color:#333;':''">{{synthData.reportDatetime?synthData.reportDatetime:'请选择'}}</text>
								<uni-icons type="right" size="16" color="#D4D4D4"></uni-icons>
							</picker>
						</view>
					</view>
					<view class="edit_item">
						<p class="left">统计时段</p>
						<view class="right">
							<picker @change="bindPickerChange" :value="index" :range="roadTime" range-key="dictLabel">
								<view class="right_txt_box">
									<p class="right_txt">{{timeName ? timeName : '请选择统计时段'}}</p>
									<uni-icons type="right" size="16" color="#D4D4D4"></uni-icons>
								</view>
								
							</picker>
						</view>
					</view>
				</view>
				<view class="basic_box data_box">
					<view class="con_tit">交通运行情况</view>
					<view class="remark_item">
						<p class="left">交通运输情况：</p>
						<view class="right">
							<!-- <uni-easyinput maxlength="200" type="textarea" autoHeight v-model="synthData.trafficOperationDescription" placeholder="请填写交通运输情况"></uni-easyinput> -->
							<uni-easyinput v-model="synthData.trafficOperationDescription"
								placeholderStyle="color: #D4D4D4;font-size:28rpx;" placeholder="请输入交通运输情况" type="textarea" maxlength="200"
								autoHeight></uni-easyinput>
						</view>
					</view>
					<view class="edit_item input">
						<p class="left">较大以上安全事故次数</p>
						<view class="right">
							<uni-easyinput maxlength="20" type="number" v-model="synthData.significantAccidents" placeholder="请输入" placeholderStyle="color:#d4d4d4;"></uni-easyinput>
						</view>
					</view>
					<view class="edit_item input">
						<p class="left">当日人员伤者数(人)</p>
						<view class="right">
							<uni-easyinput maxlength="20" type="number" v-model="synthData.dailyInjuredPersons" placeholder="请输入" placeholderStyle="color:#d4d4d4;"></uni-easyinput>
						</view>
					</view> 
					<view class="edit_item input">
						<p class="left">交通运行情况</p>
						<view class="right">
							<uni-easyinput maxlength="20" v-model="synthData.trafficSituationReport" placeholder="请输入" placeholderStyle="color:#d4d4d4;"></uni-easyinput>
						</view>
					</view>
					<view class="edit_item input">
						<p class="left">当日人员亡者数(人)</p>
						<view class="right">
							<uni-easyinput maxlength="20" type="number" v-model="synthData.dailyFatalities" placeholder="请输入" placeholderStyle="color:#d4d4d4;"></uni-easyinput>
						</view>
					</view>
					<view class="edit_item input">
						<p class="left">应急情况报告</p>
						<!-- <p class="right">{{synthData.emergencySituationReport}}</p> -->
						<view class="right">
							<uni-easyinput maxlength="20"  v-model="synthData.emergencySituationReport" placeholder="请输入" placeholderStyle="color:#d4d4d4;"></uni-easyinput>
						</view>
					</view>
					<!-- <view class="remark_item">
						<p class="left">备注</p>
						<view class="right">
							<uni-easyinput type="textarea" autoHeight v-model="roadData.remarks" placeholder="请备注信息"></uni-easyinput>
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<view class="bottom_box">
			<!-- <p class="btn_item" @click="cancelEdit">取消</p> -->
			<p class="btn_item confirm" v-if="pageType == 'add'" @click="confirmRoad">保存</p>
			<p class="btn_item confirm" v-if="pageType == 'edit'" @click="confirmRoad">修改并保存</p>
		</view>
	</view>
</template>

<script>
	import { getDateStr } from '../../../common/util'
	export default {
		data() {
			return {
				roadTime:[],
				unitData:[],
				synthData:{
					reportPhase:'',
					reportDatetime:'',
					trafficOperationDescription:''
				},
				isShowTitle:false,
				timeName:'',
				pageType:'',
				index:'',
				mobile: getApp().globalData.mobile
			}
		},
		onLoad(options) {
			if(options.type == 'edit'){
				this.pageType = 'edit'
				let row = JSON.parse(options.item);
				// this.synthData = row;
				this.getDetail(row.id);
				// this.synthData.reportDatetime = this.synthData.reportDatetime ? this.synthData.reportDatetime.substring(0,10) : ''
			}else if(options.type == 'add'){
				this.pageType = 'add'
				this.getRoadTime();
				let now =  new Date();
				this.synthData.reportDatetime = getDateStr(now, -1);//默认前一天
			}
			
		},
		methods: {
			call(tel) {
				uni.makePhoneCall({
					phoneNumber: tel
				});
			},
			getDetail(id){
				this.$request(getApp().globalData.baseUrl + '/api/biz/roadtransport/operation/find/' + id,{},"GET").then(res=>{
					// console.log('综合运输详情===>',res)
					this.synthData = res.data;
					this.synthData.reportDatetime = this.synthData.reportDatetime ? this.synthData.reportDatetime.substring(0,10) : ''
					this.getRoadTime();
				})
			},
			//选择统计日期
			bindDateChange(e) {
				this.synthData.reportDatetime = e.detail.value;
			},
			// 获取时段
			getRoadTime(){
				this.$request(getApp().globalData.baseUrl + '/api/dict/dictList?dictType=airport_time&_t=1693372307694',"GET").then(res =>{
					this.roadTime = res.data;
					if(this.pageType == 'edit'){
						this.index = this.roadTime.findIndex(item => item.dictValue == this.synthData.reportPhase)
						this.timeName = this.roadTime.find(item => item.dictValue == this.synthData.reportPhase).dictLabel
					}else if(this.pageType == 'add'){
						let now = new Date();
						// let dateStr = getDateStr(now,0);
						let dateStr = getDateStr(now, 0).replaceAll('-','/');
						if(new Date(dateStr + ' 11:00').getTime() < new Date().getTime() && new Date().getTime() < new Date(dateStr + ' 13:30').getTime()){
							this.synthData.reportPhase = "0012";
							this.index = this.roadTime.findIndex(item => item.dictValue == "0012")
							this.timeName = this.roadTime.find(item => item.dictValue == "0012").dictLabel
						}else{
							this.synthData.reportPhase = "03";
							this.index = this.roadTime.findIndex(item => item.dictValue == "03")
							this.timeName = this.roadTime.find(item => item.dictValue == "03").dictLabel
						}
					}
				})
			},
			// 选中时段数据
			bindPickerChange(e){
				let index = e.target.value   //取其下标
				var selected = this.roadTime[index]           //获取选中的数组
				this.synthData.reportPhase = selected.dictValue;
				this.timeName = selected.dictLabel
			},
			// 点击确认按钮
			confirmRoad(){
				let params = this.synthData;
				if(params.reportDatetime == ''){
					uni.showToast({
						title:'请选择统计日期',
						icon:"none"
					})
				}else if(params.reportPhase == ''){
					uni.showToast({
						title:"请选择统计时段",
						icon:'none'
					})
				}else{
					uni.showModal({
						title:"提示",
						content:params.id == undefined ? "您确认提交该条报送数据?" : "您确认将该条数据进行修改?",
						success:(res) =>{
							if(res.confirm){
								this.$request(getApp().globalData.baseUrl + '/api/biz/roadtransport/operation/saveOrUpdate',params,'POST').then(res =>{
									if(res.code == 200){
										uni.showToast({
											title:"报送提交成功",
											icon:"none",
											success: () => {
												if(params.id == undefined){
													setTimeout(() =>{
														uni.redirectTo({
															url:"/pages/roadTransport/dataSubmission/list"
														})
													},300)
												}else{
													setTimeout(() =>{
														uni.navigateBack()
													},300)
												}
											}
										})
									}
								})
							}else if(res.cancel){}
						}
					})
				}
				
			},
			// 点击取消按钮
			cancelEdit(){
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.edit_box{
		// width: 100%;
		// height: 100%;
		padding: 30rpx 30rpx 195rpx;
		
		.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;
				.bot_txt{
					.tel {
						color: #2D8CF0;
						font-weight: bold;
					}
				}
			}
			
			.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: 30rpx;
						color: #333;
						font-weight: bold;
						margin-bottom: 9rpx;
					}
					
					.remark_item{
						// color: #333;
						margin-top: 30rpx;
						margin-bottom: 30rpx;
						
						
						.left{
							color: #333333;
							line-height: 42rpx;
							font-size: 30rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							// font-weight: bold;
							margin-bottom: 30rpx;
						}
						
						.right{
							font-size: 28rpx;
							/deep/ .is-input-border{
								border-radius: 20rpx !important;
								border: 1px solid #c1c1c1 !important;
							}
						}
					}
					.edit_item{
						width: 100%;
						display: flex;
						justify-content: space-between;
						margin-top: 30rpx;
						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-between;
			background-color: #f5f5f5;
			padding: 40rpx 30rpx;
			z-index: 99;
			
			.btn_item{
				width: 690rpx;
				height: 90rpx;
				background: #F6F6F6;
				border: 1rpx solid #C1C1C1;
				color: #666;
				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>
