<template>
	<view class="page">
		<u-navbar title="工单详情" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
			height='36'></u-navbar>
		<view class="top">
		
			<view class="tap">
				<view class="tap_cont " :class="curtitidx==0?'act1':''" @click="changeidx(0)">
					维修信息
				</view>
				<view class="tap_cont" :class="curtitidx==1?'act1':''"  @click="changeidx(1)">
					处理进度
				</view>
			
			</view>
			
		</view>
		<view class="page1" v-if="curtitidx==0">
			<view class="device_info">
				<view class="device_top">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uacJ7fdNpS3llY54ZaUi" mode=""></image>
					设备信息
				</view>
				<view class="info_li">
					<view class="info_li_left">
						设备编号
					</view>
					<view class="info_li_right">
						{{info.sn}}
					</view>
				</view>
				<view class="info_li">
					<view class="info_li_left">
						车辆型号
					</view>
					<view class="info_li_right">
						{{info.device.model}}
					</view>
				</view>
			<!-- 	<view class="info_li">
					<view class="info_li_left">
						运营商
					</view>
					<view class="info_li_right">
						{{info.model}}
					</view>
				</view> -->
				<view class="info_li">
					<view class="info_li_left">
						运营区域
					</view>
					<view class="info_li_right">
						{{info.device.areaName}}
					</view>
				</view>
				<view class="info_li">
					<view class="info_li_left">
						车辆状态
					</view>
					<view class="info_li_right">
						{{comstatus}}
					</view>
				</view>
				<!-- <view class="info_li">
					<view class="info_li_left">
						开机状态
					</view>
					<view class="info_li_right">
						DS-15659874523
					</view>
				</view>
				<view class="info_li">
					<view class="info_li_left">
						头盔锁状态
					</view>
					<view class="info_li_right">
						DS-15659874523
					</view>
				</view>
				<view class="info_li">
					<view class="info_li_left">
						电池锁状态
					</view>
					<view class="info_li_right">
						DS-15659874523
					</view>
				</view> -->
				<!-- <view class="info_li">
					<view class="info_li_left">
					剩余电量
					</view>
					<view class="info_li_right">
						DS-15659874523
					</view>
				</view> -->
				<view class="info_li">
					<view class="info_li_left">
						续航里程
					</view>
					<view class="info_li_right">
						{{info.device.remainingMileage}}
					</view>
				</view>
				<view class="info_li">
					<view class="info_li_left">
						电池电量
					</view>
					<view class="info_li_right">
							{{info.device.voltage}}V, 	{{info.device.remainingPower}}%
					</view>
				</view>
			
				
				<view class="info_li" @click="mapFun()">
					<view class="info_li_left">
						设备位置
					</view>
					<view class="info_li_right">
						嵛山岛芦竹村三沙路68号
					</view>
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uklW7KIegcLR6E7DTOGO" mode=""></image>
				</view>
			</view>
			<view class="fix_info" v-if="info.type==1">
				<view class="fix_top">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uCQgmzKCxtkLtZTeMgRC" mode=""></image>
					设备维修
				</view>
				<view class="info_li">
					<view class="info_li_left">
						报修单号
					</view>
					<view class="info_li_right">
						{{info.orderNo}}
					</view>
				</view>
				<view class="info_li">
					<view class="info_li_left">
						故障部位
					</view>
					<view class="info_li_right">
					{{info.fault.typeStr}}
					</view>
				</view>
				<view class="info_li">
					<view class="info_li_left">
						报修用户
					</view>
					<view class="info_li_right">
							{{info.fault.userName}}
					</view>
				</view>
				<view class="info_li">
					<view class="info_li_left">
						故障描述
					</view>
					<view class="info_li_right">
						{{info.fault.detail}}
					</view>
				</view>
				<view class="info_li">
					<view class="info_li_left">
						报修时间
					</view>
					<view class="info_li_right">
						{{info.fault.createTime}}
					</view>
				</view>
				<view class="info_li">
					<view class="info_li_left">
						维修人员
					</view>
					<view class="info_li_right">
						{{info.adminName}}
					</view>
				</view>
				
				
			</view>
			<view class="fix_info"  v-if="info.type==2">
				<view class="fix_top">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uCQgmzKCxtkLtZTeMgRC" mode=""></image>
					换电信息
				</view>
				<view class="info_li">
					<view class="info_li_left">
						换电单号
					</view>
					<view class="info_li_right">
						{{info.orderNo}}
					</view>
				</view>
				<view class="info_li">
					<view class="info_li_left">
						换电前电量
					</view>
					<view class="info_li_right">
						{{info.beforeElectric}}%
					</view>
				</view>
				<view class="info_li">
					<view class="info_li_left">
						换电后电量
					</view>
					<view class="info_li_right">
						{{info.afterElectric}}%
					</view>
				</view>
				<view class="info_li">
					<view class="info_li_left">
					报修时间
					</view>
					<view class="info_li_right">
						{{info.createTime}}
					</view>
				</view>
				<view class="info_li">
					<view class="info_li_left">
						换电人员
					</view>
					<view class="info_li_right">
						{{info.adminName}}
					</view>
				</view>
				
				
			</view>
			<view class="bot_btn">
				<view class="btn">
					开锁
				</view>
				<view class="btn">
					关锁
				</view>
				<view class="btn">
					车辆禁用
				</view>
				<view class="btn">
					车辆解禁
				</view>
				<view class="btn">
					响铃寻车
				</view>
				<view class="btn" @click="tipshow=true" v-if="info.type==1">
					维修处理
				</view>
				<view class="btn" @click="tipshow=true" v-if="info.type==2">
					换电处理
				</view>
			</view>
		</view>
		<view class="page2" v-if="curtitidx==1">
				<view class="timebox">
					<u-time-line >
					
						<u-time-line-item  v-for="(imte,index ) in history" :key="index" >
							<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
							<template v-slot:content>
								<view>
									<view class="u-order-desc">{{imte.info}}</view>
									<view class="u-order-time">{{imte.createTime}}</view>
								</view>
							</template>
						</u-time-line-item>
						
					</u-time-line>
				</view>
				
		</view>
		<u-mask :show="tipshow"  z-index='10'>
				
		</u-mask>
		<view class="tip_box" v-if="tipshow">
			<view class="cont">
				<view class="tit">
					维修备注
				</view>
				<view class="input-container">
					<!-- <view class="placeholder" v-if="!textValue">如选项未涵盖，请输入故障问题</view> -->
					<textarea class="custom-textarea" v-model="textValue" @focus="hidePlaceholder" style="border: none;" placeholder="请填写维修备注"
						@input="updateWordCount" @blur="showPlaceholder" maxlength='100'></textarea>
					<text class="word-count">{{ currentCount }}/100</text>
				</view>
				<view class="tip_btn" @click="putFix()">
					完成
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#fff",
				},
				curtitidx:1,
				latitude: 0,
				longitude: 0,
				info:'',
				tipshow:false,
				textValue: '',
				placeholderVisible:false,
				currentCount: 0,
				info:{},
				history:[]
			}
		},
		onLoad(e) {
			this.id=e.id
			this.getdetail()
		},
		computed:{
			comstatus(){
				if(this.info.status==0){
					return '未上架'
				}else if (this.info.status==1){
					return '正常'
				}else if (this.info.status==2){
					return '预约中'
				}else if (this.info.status==3){
					return '使用中'
				}else if (this.info.status==4){
					return '临时锁车'
				}else if (this.info.status==5){
					return '检修中'
				}else if (this.info.status==6){
					return '工单中'
				}else if (this.info.status==9){
					return '废弃'
				}
			}
		},
		methods: {
			historyList(){
				this.$u.get(`/appVerify/admiOrder/historyList?orderNo` + 111).then((res) => {
					if (res.code == 200) {
						this.history=res.rows
					} else {
						// 处理接口返回错误的情况
					}
				}).catch(error => {
					// 处理接口请求失败的情况
				});
			},
			getdetail(){
				this.$u.get(`/appVerify/adminOrder/` + this.id).then((res) => {
					if (res.code == 200) {
						this.info=res.data
						this.latitude=parseFloat(this.info.device.latitude)
						this.longitude=parseFloat(this.info.device.longitude)
						this.historyList()
					} else {
						// 处理接口返回错误的情况
					}
				}).catch(error => {
					// 处理接口请求失败的情况
				});
			},
			putFix(){
				this.$u.put(`/appVerify/admiOrder?remark=` + this.textValue+'&orderNo='+this.info.orderNo).then((res) => {
					if (res.code == 200) {
						this.tipshow=false
						uni.navigateBack()
					} else {
						uni.showToast({
							title: '处理失败',
							icon: 'none',
							duration: 1000
						});
						// 处理接口返回错误的情况
					}
				}).catch(error => {
					// 处理接口请求失败的情况
				});
			},
			changeidx(idx){
				this.curtitidx=idx
			},
			hidePlaceholder() {
				this.placeholderVisible = false;
			},
			showPlaceholder() {
				if (!this.textValue) {
					this.placeholderVisible = true;
				}
			},
			updateWordCount() {
				this.currentCount = this.textValue.trim().replace(/\s+/g, '').length;
				// if (this.currentCount > 500) {
				// 	this.textValue = this.textValue.slice(0, this.textValue.lastIndexOf(' ', 500)).trim();
				// 	uni.showToast({
				// 		title: '字数已超过500字限制',
				// 		icon: 'none'
				// 	});
				// }
			
			},
			mapFun() {
				console.log('点击了');
				uni.openLocation({
					latitude: this.latitude,
					 //纬度 - 目的地/坐标点
					longitude: this.longitude, 
					 //经度 - 目的地/坐标点
					name: "荆门市",
					address: "一夜城"
				});
			},
		}
	}
</script>

<style lang="scss" >
page{
	background-color: #fff;
}
.page{
	width: 750rpx;
	.tap{
		margin-top: 24rpx;
		width: 750rpx;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-around;
		
		.tap_cont{
			text-align: center;
			padding-bottom: 15rpx;
			width: 130rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #3D3D3D;
			border-bottom: 6rpx solid #fff ;
		}
		.act1{
			border-bottom: 6rpx solid #4C97E7 ;
			color: #4C97E7;
		}
	}
	.tip_box{
		display: flex;
	    align-items: center;
	    justify-content: center;
	    position: fixed;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    z-index: 12;
	    height: 100%;
		.cont{
			padding: 36rpx 42rpx;
			// display: flex;
			flex-wrap: wrap;
			// justify-content: center;
			width: 610rpx;
			height: 772rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			.tit{
				
				width: 100%;
			font-weight: 500;
			font-size: 36rpx;
			color: #3D3D3D;
			}
			.input-container {
				margin-top: 34rpx;
				position: relative;
				width: 526rpx;
				height: 396rpx;
				background: #F7F7F7;
				box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
				border-radius: 20rpx;
				// margin-top: 40rpx;
				overflow: hidden;
				// padding-right: 38rpx;
				box-sizing: border-box;
				border: 2rpx solid #C7C7C7;
			}
			
			.placeholder {
				position: absolute;
				top: 18rpx;
				left: 38rpx;
				color: #999;
				/* placeholder颜色 */
				pointer-events: none;
				/* 确保点击事件可以穿透到textarea上 */
			}
			.custom-textarea {
				width: 100%;
				height: 100%;
				/* 设置一个合适高度 */
				padding-top: 18rpx;
				padding-bottom: 40rpx;
				/* 为placeholder留出空间 */
				padding-left: 10rpx;
				box-sizing: border-box;
				border: 1px solid #ccc;
			}
			
			.word-count {
				position: absolute;
				right: 10px;
				bottom: 10px;
				font-size: 12px;
				color: #999;
			}
			.tip_btn{
				margin-top: 94rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 526rpx;
				height: 78rpx;
				background: #4C97E7;
				border-radius: 49rpx 49rpx 49rpx 49rpx;
				font-weight: 500;
				font-size: 36rpx;
				color: #FFFFFF;
			}
		}
	}
	.page2{
		.timebox{
			padding-left: 20rpx;
			background: #fff;
		}
		.u-node {
				width: 44rpx;
				height: 44rpx;
				border-radius: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #d0d0d0;
			}
			
			.u-order-title {
				color: #333333;
				font-weight: bold;
				font-size: 32rpx;
			}
			
			.u-order-desc {
				color: rgb(150, 150, 150);
				font-size: 28rpx;
				margin-bottom: 6rpx;
			}
			
			.u-order-time {
				color: rgb(200, 200, 200);
				font-size: 26rpx;
			}
	}
	.page1{
		.device_info{
			margin: 32rpx auto;
			padding: 32rpx 28rpx;
			width: 680rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			.device_top{
				margin-bottom: 28rpx;
				image{
					margin-right: 18rpx;
					width: 42rpx;
					height: 42rpx;
				}
				width: 100%;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				font-weight: 500;
				font-size: 32rpx;
				color: #3D3D3D;
			}
			.info_li{
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				margin-bottom: 28rpx;
				.info_li_left{
					margin-right: 44rpx;
					width: 140rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #808080;
				}
				.info_li_right{
					font-weight: 400;
					font-size: 28rpx;
					color: #3D3D3D;
				}
				image{
					margin-left: auto;
					width: 41.66rpx;
					height: 48rpx;
				}
			}
		}
		.fix_info{
			margin: 32rpx auto;
			padding: 32rpx 28rpx;
			width: 680rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			.fix_top{
				margin-bottom: 28rpx;
				image{
					margin-right: 18rpx;
					width: 42rpx;
					height: 42rpx;
				}
				width: 100%;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				font-weight: 500;
				font-size: 32rpx;
				color: #3D3D3D;
			}
			.info_li{
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				margin-bottom: 28rpx;
				.info_li_left{
					margin-right: 44rpx;
					width: 140rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #808080;
				}
				.info_li_right{
					font-weight: 400;
					font-size: 28rpx;
					color: #3D3D3D;
				}
				image{
					margin-left: auto;
					width: 41.66rpx;
					height: 48rpx;
				}
			}
		}
		.bot_btn{
			display: flex;
			flex-wrap: wrap;
			padding: 40rpx 18rpx;
			width: 750rpx;
			height: 230rpx;
			background: linear-gradient( 180deg, #FFFFFF 0%, rgba(255,255,255,0) 100%);
			box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			.btn:nth-child(4n) {
			    margin-right: 0;
			}
			.btn{
				margin-right: 18rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 164rpx;
				height: 66rpx;
				background: #E2F2FF;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				border: 2rpx solid #4C97E7;
				font-weight: 400;
				font-size: 28rpx;
				color: #3D3D3D;
			}
		}
	}
}
</style>
