<template>
	<view class="page">
		<u-navbar title="换电工单" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='36' id="navbar">
		</u-navbar>
       <view class="topsousuo">
       	    <view class="search">
       	    	<view class="lt">
       	    		<image src="https://api.ccttiot.com/w6hycpRmyZSUd2e78c2747e73fb8f6bda929ebdc886e.png" mode="" @click="btnsaoma"></image>
       	    		<view class="xian"></view>
       	    		<input type="text" v-model="sn" placeholder="车辆编号/换电工单"/>
       	    	</view>
       	    	<view class="rt" @click="btnsousuo">
       	    		搜索
       	    	</view>
       	    </view>
			<view class="tab">
				<view v-for="(item,index) in tablist" :key="index" :class="tabindex == index ? 'active' : ''" @click="btntab(item,index)">
					{{item.name}}
				</view>
				<label>
					<checkbox :value="chenchex" @click="btndj" /><text>仅看我的</text>
				</label>
			</view>
       </view>
	   <scroll-view @scrolltolower="handqixing" scroll-y refresher-enabled @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing" refresher-default-style="black" class="list">
	   	   <view class="list_item" v-for="(item,index) in hdlist" @click="btnitem(item)">
	   	   	   <view class="top">
	   	   	   	   <view class="lt">
	   	   	   	   	 {{item.no}}
	   	   	   	   </view>
				   <view class="rt">
				   	 {{item.createTime}}
				   </view>
	   	   	   </view>
			   <view class="gd">
			   	  <text style="width: 120rpx;">电量</text> <text style="color: #3D3D3D;">{{item.createPower}}%</text>
			   </view>
			   <view class="gd">
			   	  <text style="width: 120rpx;">车牌号</text> <text style="color: #3D3D3D;">{{item.deviceVehicleNum}}</text>
			   </view>
			   <view class="gd">
			   	  <text style="width: 120rpx;">设备编号</text> <text style="color: #3D3D3D;">{{item.deviceSn}}</text>
			   </view>
			   <view class="bot">
			   	   <view class=""></view>
				   <view class="hd" v-if="item.status == 1" @click.stop="btnjd(item,index)">
				   	   点击接单
				   </view>
				   <view class="hd" style="background-color: #4C97E7;" v-if="item.status == 2" @click.stop="btnwc(item,index)">
				   	   点击完成
				   </view>
				   <view class="hd" style="background-color: #979797;" v-if="item.status == 3">
				   	   已完成
				   </view>
			   </view>
	   	   </view>
		   <view class="" style="width: 100%;text-align: center;margin-top: 30rpx;color: #ccc;padding-bottom: 30rpx;">
		   	  当前没有更多工单咯...
		   </view>
	   </scroll-view>
	   <!-- 完成输入备注 -->
	   <view class="wctc" v-if="beizhuflag">
	   	  <view class="name">
	   	  	  请输入备注
	   	  </view>
		  <textarea name="" v-model="finishRemark" id="" cols="30" rows="10"></textarea>
		  <view class="anniu">
		  	  <view class="" @click="btnqx">
		  	  	  取消
		  	  </view>
			  <view class="" @click="btnqdwc">
			  	  完成
			  </view>
		  </view>
	   </view>
	   <view class="mask" v-if="beizhuflag"></view>
	   
	   <!-- 添加add -->
	 <!-- <view class="tianjia">
	   	   +
	   </view> -->
	   <!-- 新增工单弹窗 -->
	  <!-- <view class="addgongdan">
	   	   <view class="gdtitle">
	   	   	  添加换电工单
	   	   </view>
		   
	   </view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tablist:[{name:'待换电',type:'1'},{name:'换电中',type:'2'},{name:'已完成',type:'3'},{name:'全部',type:'4'}],
                bgc: {
                	backgroundColor: "#fff",
                },
				areaId:'',
				chenchex:true,
				tabindex:0,
				pageNum:1,
				hdlist:[],
				total:0,
				isRefreshing:false,
				status:1,
				userId:'',
				beizhuflag:false,
				wcid:'',
				wcindex:'',
				finishRemark:'',
				sn:''
			}
		},
		onLoad(option) {
            this.areaId = option.areaId
			this.getlist()
		},
		methods: {
			btnqx(){
				this.beizhuflag = false
			},
			// 点击跳转详情
			btnitem(item){
				uni.navigateTo({
					url:'/page_shanghu/yunwei/gongdanxq?id=' + item.id
				})
			},
			
			// 点击进行搜索
			btnsousuo(){
				this.pageNum = 1
				this.getlist()
			},
			// 点击扫码
			btnsaoma(){
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['qrCode'],
					success: res => {
						console.log(res)
						function getQueryParam(url, paramName) {
							let regex = new RegExp(`[?&]${paramName}=([^&]*)`)
							let results = regex.exec(url)
							return results ? decodeURIComponent(results[1].replace(/\+/g, ' ')) : null
						}
						let sceneValue = res.result
						let decodedValue = decodeURIComponent(sceneValue)
						this.sn = getQueryParam(decodedValue, 's')
						this.pageNum = 1
						this.getlist()
					},
					fail: err => {
						console.error('扫描失败：', err)
						uni.showToast({
							title: '扫描失败',
							icon: 'none'
						})
					}
				})
			},
			// 点击完成
			btnwc(item,index){
				this.beizhuflag = true
				this.wcid = item.id
				this.wcindex = index
			},
			//点击确定完成
			btnqdwc(){
				let data = {
					id:this.wcid,
					finishRemark:this.finishRemark
				}
				this.$u.put(`/bst/powerWork/complete`,data).then(res =>{
					if(res.code == 200){
						uni.showToast({
							title: '操作完成',
							icon: 'success',
							duration: 2000
						})
						this.hdlist[this.wcindex].status = 3
						this.beizhuflag = false
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// 点击接单
			btnjd(item,index){
				let that = this
				uni.showModal({
					title: '提示',
					content: '您是否要进行接单？',
					showCancel: true,
					success: function (res) {
						if (res.confirm) {
							let data = {
								id:item.id
							}
							that.$u.put(`/bst/powerWork/receive`,data).then(res =>{
								if(res.code == 200){
									uni.showToast({
										title: '接单成功',
										icon: 'success',
										duration: 2000
									})
									that.hdlist[index].status = 2
								}else{
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 2000
									})
								}
							})
						} else if (res.cancel) {
							
						}
					}
				})
			},
			// 点击是否只查看自己的
			btndj(){
               this.chenchex = !this.chenchex
			   if(this.chenchex == false){
				   this.userId = uni.getStorageSync('user').userId
				   this.pageNum = 1
				   this.getlist()
			   }else{
				   this.userId = ''
				   this.pageNum = 1
				   this.getlist()
			   }
			   console.log(this.chenchex);
			},
            // 点击切换tab
			btntab(item,index){
				this.tabindex = index
				this.status = item.type
				this.pageNum = 1
				this.getlist()
			},
			// 获取换电工单列表
			getlist(){
				this.$u.get(`/bst/powerWork/list?pageNum=${this.pageNum}&pageSize=20&areaId=${this.areaId}&status=${this.status == 4 ? '' : this.status}&receiveUserId=${this.userId}&keyword=${this.sn}`).then((res) => {
					if (res.code === 200) {
						this.total = res.total
						if(this.pageNum == 1){
							this.hdlist = res.rows
						}else{
							this.hdlist = this.hdlist.concat(res.rows)
						}
					}
				})
			},
			handqixing() {
				console.log(1);
				if(this.hdlist.length < this.total){
					this.getlist()
				}
			},
			// 下拉刷新
			onRefresh() {
				this.isRefreshing = true
				setTimeout(() => {
					this.isRefreshing = false
					this.pageNum = 1
					this.getlist()
				}, 1000)
			},
		}
	}
</script>

<style lang="scss">
	.tianjia{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		font-size: 50rpx;
		text-align: center;
		line-height: 100rpx;
		position: fixed;
		right: 30rpx;
		top: 70%;
		background-color: #4C97E7;
		color: #fff;
		z-index: 97;
	}
	.mask{
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, .5);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 98;
	}
	.wctc{
		width: 610rpx;
		height: 720rpx;
		background: #FFFFFF;
		padding: 36rpx 42rpx;
		box-sizing: border-box;
		position: fixed;
		top: 30%;
		left: 50%;
		transform: translateX(-50%);
		z-index: 99;
		border-radius: 10rpx;
		.name{
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
		}
		textarea{
			width: 526rpx;
			height: 396rpx;
			background: #F7F7F7;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-top: 34rpx;
			padding: 16rpx 36rpx;
			box-sizing: border-box;
		}
		.anniu{
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-top: 60rpx;
			view{
				width: 45%;
				height: 78rpx;
				line-height: 78rpx;
				text-align: center;
				background-color: #4C97E7;
				color: #fff;
				font-size: 36rpx;
				border-radius: 50rpx;
			}
		}
	}
	.active{
		border-bottom: 3px solid #4C97E7 !important;
		color: #4C97E7 !important;
	}
	.list{
		padding-top: 190rpx;
		box-sizing: border-box;
		overflow: scroll;
		height: 89vh;
		.list_item{
			width: 752rpx;
			height: 350rpx;
			background: #FFFFFF;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			margin-top: 16rpx;
			.bot{
				border-top: 1px dashed #D8D8D8;
				margin-top: 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 22rpx 34rpx;
				box-sizing: border-box;
				.hd{
					width: 132rpx;
					height: 54rpx;
					background: #F76D6D;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					font-size: 28rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 54rpx;
				}
			}
			.top{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 32rpx 42rpx;
				padding-bottom: 0;
				box-sizing: border-box;
				.lt{
					display: flex;
					align-items: center;
					image{
						width: 42rpx;
						height: 42rpx;
						margin-right: 18rpx;
					}
					font-size: 28rpx;
					color: #3D3D3D;
				}
				.rt{
					font-size: 28rpx;
					color: #808080;
				}
			}
			.gd{
				display: flex;
				align-items: center;
				padding-left: 40rpx;
				margin-top: 10rpx;
				text{
					font-size: 28rpx;
					color: #808080;
					margin-right: 44rpx;
				}
			}
		}
	}
	.topsousuo{
		width: 100%;
		background-color: #fff;
		padding-top: 26rpx;
		padding-bottom: 6rpx;
		box-sizing: border-box;
		position: fixed;
		top: 160rpx;
		left: 0;
		z-index: 9;
		.tab{
			display: flex;
			justify-content: space-between;
			padding: 0 44rpx;
			box-sizing: border-box;
			margin-top: 24rpx;
			view{
				font-weight: 600;
				font-size: 32rpx;
				color: #3D3D3D;
				padding-bottom: 10rpx;
				box-sizing: border-box;
			}
		}
	}
	.search{
		width: 680rpx;
		height: 68rpx;
		border: 2rpx solid #4C97E7;
		border-radius: 50rpx;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.rt{
			width: 112rpx;
			height: 68rpx;
			background: #4C97E7;
			text-align: center;
			line-height: 68rpx;
			color: #fff;
			font-size: 32rpx;
			border-radius: 0 50rpx 50rpx 0;
		}
		.lt{
			display: flex;
			align-items: center;
			padding-left: 20rpx;
			.xian{
				width: 2rpx;
				height: 38rpx;
				background: #979797;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				margin-right: 14rpx;
				margin-left: 10rpx;
			}
			image{
				width: 56rpx;
				height: 56rpx;
			}
		}
	}
	page {
		background: #F2F2F2;
	}

</style>