<template>
	<view class="font16">
		<view class="headsearch fotct mart10">
			<image mode="aspectFill" class="width100 headimg" src="../../../static/img/head.png"></image>
			<view class="input-box fotlt">
				<input placeholder="订单搜索" v-model="orderNo" placeholder-style="color:#c0c0c0;" @input="searchOrder()" />
				<view class="icon search"></view>
			</view>
		</view>
		<view class="width94 alijusstart height50 fotct  ">
			<view class="width33" :class="[type=='0' ? 'fcor089 border-b089 ' : 'fcor333']" @click="updateStu(0)">全部</view>
			<view class="width33" :class="[type=='2' ? 'fcor089 border-b089' : 'fcor333']" @click="updateStu(2)">已支付</view>
			<view class="width33" :class="[type=='4' ? 'fcor089 border-b089' : 'fcor333']" @click="updateStu(4)">已退款</view>
		</view>
		<view v-if="orderList == ''" class="mart40 fotct  fcor666">
			<image mode="widthFix" style="width: 70vw;" src="../../../static/img/noorder1.png"></image>
		</view>
		<view class="width94 backcorfff headcont mart10 pd-main font14" v-for="(item,index) in orderList" :key="index"
			@click="jumpDetails(item.orderNo)">
			<view class="alijusstart fcor333 paddtop10 paddbotm10 bor-botm1">
				<text :user-select="true" class="  text1">{{item.orderNo}}</text>
				<image class="iconw margle " style="height: 15px;" mode="widthFix" src="../../../static/img/jtg.png"></image>
				<text class="flex-1  fotrt" >{{item.status | filterStatus }}</text>
			</view>
			<view class="paddtop10 paddbotm10 bor-botm1">
				<view class=" dis-flex  fcor666">
					油号/枪号: <text class="margle marglerig">{{item.gasOilNo}}#/{{item.gasGunNo}}号枪</text>
				</view>
				<view class=" dis-flex  fcor666 mart5">
					升数:<text class="margle">{{item.gasOilLiters}}L</text>
				</view>
				<view class="dis-flex flex-sp mart5">
					<view class="  fcor666">加油金额: ¥{{item.gasRefuelPrice}}</view>
					<view class="  fcor333 fotrt dis-flex font18">实付:
						<text class="margle" >¥{{item.payPrice || 0}}</text>
						
					</view>
				</view>
			</view>
			<view class="paddtop10 mart5  fcor666">下单时间:
				{{item.createTime | timeFormat('yyyy-mm-dd hh:mm:ss')}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getGasOrderList
	} from '../../../Utils/Api.js';
	let app = getApp();
	export default {
		data() {
			return {
				type: 0, // 当前状态
				orderList: [],
				pageNum: 1,
				pagesize: 10,
				isLoadMore: false, //是否加载中
				innerAudioContext: '', //音频播放
				orderNo: '', //搜索内容
				userinfo: '' //用户数据
			};
		},
		filters:{
			filterStatus(value){
				switch (value) {
				    case 1:
				       return "待支付";
				    case 2:
				        return "已支付";
					case 3:
					   return "已取消";
					case 4:
					    return "已退款";
					case 5:
					   return "退款中";
					case 6:
					    return "退款失败";
				    default:
				        return "未知";
				}
			}
		},
		onShow() {
			let that = this;
			that.userinfo = app.globalData.userInfo;
			that.orderList = [];
			that.pageNum = 1;
			uni.getStorage({
				key: "oiluser",
				success(e) {
					app.globalData.userInfo = e.data //这就是你想要取的token
					uni.getStorage({
						key: 'oiltoken',
						success(e) {
							app.globalData.token = e.data;
							that.getGasOrderList();
						}
					})
				},
				fail: res => {}
			})
			//油枪，油品 权限
			if (this.userinfo.buttonList) {
				for (var i = 0; i < this.userinfo.buttonList.length; i++) {
					if (this.userinfo.buttonList[i].permissionCode == 'BTN_CONFIG_OIL_GUN_PURVIEW') {
						app.globalData.positionType = 1
					}
					if (this.userinfo.buttonList[i].permissionCode == 'BTN_CONFIG_OIL_GUN_PRICE_PURVIEW') {
						app.globalData.positionGunPrice = 1
					}
				}
			}

		},
		onLoad() {
			this.socketio();
		},
		onReachBottom() { //上拉触底函数
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.pageNum += 1
				this.getGasOrderList()
			}
		},
		methods: {
			//链接socket
			socketio() {
				let that = this;
				uni.connectSocket({
					url: app.globalData.wsssocket + app.globalData.userInfo.merchantStore.id
				});
				uni.onSocketOpen(function(res) {
					console.log('WebSocket连接已打开！');
				});
				uni.onSocketError(function(res) {
					console.log('WebSocket连接打开失败，请检查！');
					uni.closeSocket();
					that.socketio();
				});
				uni.onSocketMessage(function(res) {
					let innerAudioContext = uni.createInnerAudioContext(); //创建音频文件
					innerAudioContext.autoplay = false; //不自动播放
					innerAudioContext.src = JSON.parse(res.data).voice; //音频文件链接
					that.innerAudioContext = innerAudioContext;
					that.orderList = [];
					that.pageNum = 1;
					that.getGasOrderList();
					that.startAudio();
					console.log('收到服务器内容：' + JSON.parse(res.data).voice);
				});
				uni.onSocketClose(function(res) {
					console.log('WebSocket 已关闭！');
					uni.closeSocket();
					that.socketio();
				});
			},
			//搜索条件
			searchOrder() {
				this.orderList = [];
				this.pageNum = 1;
				this.getGasOrderList();
			},
			//开始音频文件
			startAudio() {
				this.innerAudioContext.play(() => {
					console.log('开始播放');
				});
				this.innerAudioContext.onError((res) => {
					console.log(res.errMsg);
					console.log(res.errCode);
				});
			},
			//查询列表
			getGasOrderList() {
				let status;
				if (this.type == 0) {
					status = ''
				} else {
					status = this.type;
				}
				uni.showLoading({
					title: '加载中'
				})
				let daydate = new Date(new Date().toLocaleDateString()).getTime();
				let datas = {
					orderNo: this.orderNo,
					status: status,
					createTimeS: daydate,
					pageNum: this.pageNum,
					pageSize: this.pagesize,
				}
				getGasOrderList(datas).then(res => {
					uni.hideLoading();
					if (res.return_code == '000000' && res.return_data.list) {
						this.orderList = this.orderList.concat(res.return_data.list);
						if (res.return_data.pages == this.pageNum) {
							this.isLoadMore = true;
						} else {
							this.isLoadMore = false
						}
					} else {
						this.orderList = [];
						this.isLoadMore = true
					}
				});
			},
			//更新状态
			updateStu(item) {
				this.type = item;
				this.orderList = [];
				this.pageNum = 1;
				this.getGasOrderList();
			},
			//跳转详情
			jumpDetails(item) {
				uni.navigateTo({
					url: '../../home/oderDetails/oderDetails?ordesid=' + item
				})
				// this.startAudio();
			}
		},

	};
</script>
<style lang="scss">
	page {
		background-color: #f3f4f8;
	}

	.input-box {
		width: 76%;
		margin: 0 auto;
		// top: 55px;
		height: 70rpx;
		background-color: #f5f5f5;
		border-radius: 10rpx;
		position: relative;
		display: flex;
		align-items: center;

		.icon {
			width: 60upx;
			height: 60upx;
			line-height: 60upx;
			font-size: 40upx;
			color: #c0c0c0;
		}

		input {
			padding-left: 28upx;
			height: 28upx;
			font-size: 28upx;
			width: 100%;
		}
	}

	.headimg {
		position: absolute;
		height: 150px;
	}

	.headsearch {
		position: relative;
		height: 150px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.headcont {
		// height: 150px;
		border-radius: 8px;
	}

	.width33 {
		width: 33.3%;
	}

	.counimgs {
		width: 60px;
		max-height: 60px;
	}

	.counscou {
		margin-left: 70px;
	}
	
	.border-b089{
		border-bottom: 3px solid #089bf5;
	}
</style>