<template>
	<view class="productBigBox">
		<!--头部点击选择类型-->
		<view class="order-search">
			<view class="search-list" :class="orderStatus===''?'search-listAct':''" @click="screenChange('')">
				全部
				<view class="list-line"></view>
			</view>
			<view class="search-list" :class="orderStatus==='0'?'search-listAct':''" @click="screenChange('0')">
				待付款
				<view class="list-line"></view>
			</view>
			<view class="search-list" :class="orderStatus==='2'?'search-listAct':''" @click="screenChange('2')">
				待使用
				<view class="list-line"></view>
			</view>
			<!--暂无包邮-->
			<view class="search-list" :class="orderStatus==='3'?'search-listAct':''" @click="screenChange('3')" style="display: none;">
				待收货
				<view class="list-line"></view>
			</view>
			<view class="search-list" :class="orderStatus==='5'?'search-listAct':''" @click="screenChange('5')">
				待评价
				<view class="list-line"></view>
			</view>
		</view>
		<!--头部搜索 手机号-->
		<view class="order-phoneSearch">
			<view class="phoneSearch-type" @click="show = true">
				<u-picker :show="show" :columns="columns" visibleItemCount="6" itemHeight="80" keyName="label" @confirm="addressFun" @cancel="show=false" ></u-picker>
				<view class="type-boxOn">
					{{showAddress}}
					<view class="address-triangle"></view>
				</view>
			</view>
			<u-search placeholder="搜索手机号" v-model="phoneNum" shape="round" :showAction="false" :clearabled="true"></u-search>
		</view>
		<!--身体列表-->
		<template v-if="lists.length>0"><!--判断是否有数-->
			<template v-for="(item,index) in lists">
				<view class="order-list" :key="index" v-if="item.showList" @click="orderJump(item.id,item.orderType)">
					<view class="list-title">
						<view class="title-left">
							<image v-if="item.orderType==1" src="../../static/orderList/iconjingqumenpiao.png"></image>
							<image v-else-if="item.orderType==2" src="../../static/orderList/iconjiudian.png"></image>
							<image v-else-if="item.orderType==3" src="../../static/orderList/iconcanyin.png"></image>
							<image v-else-if="item.orderType==4" src="../../static/orderList/iconliwu1.png"></image>
							<image v-else-if="item.orderType==5" src="../../static/orderList/iconchuzuche.png"></image>
							<image v-else-if="item.orderType==10" src="../../static/orderList/iconzuhe.png"></image>
							<image v-else src="../../static/orderList/iconqita.png"></image>
							<view>门票</view>
						</view>
						<view class="title-right" v-if="item.orderType!=10&&item.orderType!=0">
							<template v-if="item.orderType==1&&item.subOrderType!=4">
								{{item.orderStatus|orderStatus1}}
							</template>
							<template v-else-if="item.orderType==2&&item.subOrderType!=4">
								{{item.orderStatus|orderStatus2}}
							</template>
							<template v-else-if="item.orderType==3&&item.subOrderType!=4">
								{{item.orderStatus|orderStatus3}}
							</template>
							<template v-else-if="item.orderType==4&&item.subOrderType!=4">
								{{item.orderStatus|orderStatus4}}
							</template>
							<template v-else>
								{{item.orderStatus|orderStatus5}}
							</template>
						</view>
					</view>
					<view class="list-name">{{item.merchantName}}({{item.productName}})</view>
					<view class="list-time">
						{{item.playDate.substr(0,10)}} 有效·
						<template v-if="item.orderType==1&&item.subOrderType!=4">{{item.orderNum}}张</template>
						<template v-else-if="item.orderType==2&&item.subOrderType!=4">{{item.orderNum}}间</template>
						<template v-else-if="item.orderType==3&&item.subOrderType!=4">{{item.orderNum}}桌</template>
						<template v-else-if="item.orderType==4&&item.subOrderType!=4">{{item.orderNum}}箱</template>
						<template v-else-if="item.orderType==10&&item.subOrderType!=4">{{item.orderNum}}张</template>
						<template v-else>{{item.orderNum}}份</template>
					</view>
					<view class="list-tips">凭「胖丁动态二维码」直接验证使用</view>
					<view class="list-money">¥{{item.totalMoney}}</view>
					<view class="list-btn">
						<view class="btn-style">下载照片</view>
						<view class="btn-style">导航取片</view>
					</view>
				</view>
			</template>
			<view class="goods-NoMore" v-if="dataLengthType==true">暂无更多数据</view>
		</template>
		<view class="order-No" v-else>暂无订单信息</view>
	</view>
</template>

<script>

export default {
  filters:{
    orderType(i){//订单类型
      switch(i){
      case 0:
        return '其他'
        break
      case 1:
        return '景区'
        break
      case 2:
        return '酒店'
        break
      case 3:
        return '餐饮'
        break
      case 4:
        return '特产'
      case 5:
        return '运营车'
      case 10:
        return '组合订单'
      }
    },
    orderStatus1(i){//景区订单状态
      switch(i){
      case 0:
        return '待支付'
        break
      case 1:
        return '出票中'
        break
      case 2:
        return '出票成功'
        break
      case 3:
        return '预定失败'
        break
      case 4:
        return '核销中'
        break
      case 5:
        return '核销完成'
        break
      case 6:
        return '退款中'
        break
      case 7:
        return '部分退货/退款'
        break
      case 8:
        return '全部退款退货 '
        break
      case 9:
        return '取消 '
        break
      case 10:
        return '已完成 '
        break
      case 11:
        return '已过期 '
        break
      case 12:
        return '退票审核中 '
        break
      }
    },
    orderStatus2(i){//酒店订单状态
      switch(i){
      case 0:
        return '待支付'
        break
      case 1:
        return '确认中'
        break
      case 2:
        return '预定成功'
        break
      case 3:
        return '预定失败'
        break
      case 4:
        return '核销中'
        break
      case 5:
        return '待评价'
        break
      case 6:
        return '退款中'
        break
      case 7:
        return '部分退货/退款'
        break
      case 8:
        return '全部退款退货 '
        break
      case 9:
        return '取消 '
        break
      case 10:
        return '已完成 '
        break
      case 11:
        return '已过期 '
        break
      }
    },
    orderStatus3(i){//餐饮订单状态
      switch(i){
      case 0:
        return '待支付'
        break
      case 1:
        return '确认中'
        break
      case 2:
        return '预定成功'
        break
      case 3:
        return '预定失败'
        break
      case 4:
        return '核销中'
        break
      case 5:
        return '待评价'
        break
      case 6:
        return '退款中'
        break
      case 7:
        return '部分退货/退款'
        break
      case 8:
        return '全部退款退货 '
        break
      case 9:
        return '取消 '
        break
      case 10:
        return '已完成 '
        break
      case 11:
        return '已过期 '
        break
      }
    },
    orderStatus4(i){//特产状态
      switch(i){
      case 0:
        return '待支付'
        break
      case 1:
        return '待发货'
        break
      case 2:
        return '待收货'
        break
      case 3:
        return '预定失败'
        break
      case 4:
        return '核销中'
        break
      case 5:
        return '已收货'
        break
      case 6:
        return '退款中'
        break
      case 7:
        return '部分退货/退款'
        break
      case 8:
        return '全部退款退货 '
        break
      case 9:
        return '取消 '
        break
      case 10:
        return '已完成 '
        break
      case 11:
        return '已过期 '
        break
      }
    },
    orderStatus5(i){
      switch(i){
      case 0:
			  return '待支付'
			  break
      case 1:
			  return '确认中'
			  break
      case 2:
			  return '支付成功'
			  break
      case 3:
			  return '预定失败'
			  break
      case 4:
			  return '核销中'
			  break
      case 5:
			  return '待评价'
			  break
      case 6:
			  return '退款中'
			  break
      case 7:
			  return '部分退货/退款'
			  break
      case 8:
			  return '全部退款退货 '
			  break
      case 9:
			  return '取消 '
			  break
      case 10:
			  return '已完成 '
			  break
      case 11:
			  return '已过期 '
			  break
      }
    }
  },
  components: {

  },
  data() {
    return {
      //顶部参数
      orderStatus:'',//头部类型选择
      //手机搜索
      show: false,//遮罩显隐---项目
      columns: [//遮罩列表---项目
        [
          {label: '类型',id: ''},
          {label: '全部',id: 0},
          {label: '景区',id: 1},
          {label: '酒店',id: 2},
          {label: '餐饮',id: 3},
          {label: '特产',id: 4},
          // {label: '运营车',id: 5},
          // {label: '组合订单',id: 10},
        ]
      ],
      showAddress:'类型',//显示内容---项目
      phoneNum:'',//搜索手机号
      //主数据分区
      lists:[],//数据
      //分页
      isTrue:true,//截留 防止重复加载
      pageIndex:1,//当前页
      pageTotal:0,//总条数
      //定时请求
      timerOutClear:null,
      //其他
      ifyukuaiCode:'',//渝快付
      dataLengthType:false,//上拉加载无更多数据时显示
    }
  },
  onLoad(option) {
    this.openId = uni.getStorageSync('openid')
    this.openId = 'oh2UV1lyYABHMZ1rMlgjhVHyyYDQ'//oh2UV1lyYABHMZ1rMlgjhVHyyYDQ  oroHZ5FaUQ_SOOC_uQQP92fJpBRE
    this.orderStatus = option.orderStatus||''
    this.ifyukuaiCode = option.ifyukuaiCode||''
    this.getData()
  },
  onShow(){
    this.pageIndex = 1
    this.lists = [] //主要数据存储
    this.getData()
  },
  onReachBottom(){//上拉加载
	  this.pageIndex++
	  this.getData()
  },
  onUnload() {
	  if(this.timerOutClear) {
	    clearTimeout(this.timerOutClear)
	    this.timerOutClear = null
	  } 
	  //隐藏加载框
	  uni.hideLoading()
  },
  methods: { 
    screenChange(i){//顶部导航切换
		  this.orderStatus = i //当前选择的数字
		  this.pageIndex = 1 //页码
		  this.pageTotal = 0 //总数 
		  this.isTrue = true //是否同意请求
		  this.lists = [] //主要数据存储
		  this.getData()
    },
    addressFun(e){//项目选择
		  this.showAddress = e.value[0].label
		  this.show=false
    },
    getData(){//数据加载
      //显示加载框
      uni.showLoading({
			  title: '加载中'
      })
      if(this.isTrue){
        this.isTrue = false
        var data = {}
        if(this.orderStatus=='2'){//点击的待使用
				  var orderStatusList=[2,4,5]
				  data={
				    pageIndex:this.pageIndex,
				    pageSize:20,
				    orderType:this.orderType==0?'':this.orderType,
				    orderStatusList :orderStatusList,
				    userId:this.openId
				  }
        }else{
				  data={
				    pageIndex:this.pageIndex,
				    pageSize:20,
				    orderType:this.orderType==0?'':this.orderType,
				    orderStatus:this.orderStatus=='3'?2:parseFloat(this.orderStatus),
				    userId:this.openId
				  }
        }
        this.$request('order/userOrder/findOrderList',data)
				  .then((res)=>{
            if(res.code=='00'){
              if(res.data.list.length>0){
							  this.dataLengthType = true
              }else{
							  this.dataLengthType = false
              }
              res.data.list.forEach((item)=>{
							  if(this.orderStatus=='0'){////待付款的订单 pid 不能空的不显示
							    if(item.pid){
							
							    }else{
							      this.lists.push(item)
							    }
							  }else if(this.orderStatus=='2'){//待评价和待使用不能显示组合订单
							    if(item.orderType!=10&&item.orderType!=4){
							      this.lists.push(item)
							    }
							  }else if(this.orderStatus=='3'){//待收货和待使用不能显示组合订单
							    if(item.orderType!=10&&item.orderType==4){
							      this.lists.push(item)
							    }
							  }else if(this.orderStatus=='5'){//待评价不能显示组合订单
							    if(item.orderType!=10){
							      this.lists.push(item)
							    }
							  }else{
							    if(item.isDelete!=1){//（ 0 未删除 1 已删除）
							      this.lists.push(item)
							    }
							  }
              })
              this.isTrue = true
              this.pageTotal = res.data.pageTotal
							
              // 主订单显示待支付子订单显示除了待支付
              this.lists.forEach((item)=>{
							  if(item.subOrderType!=9){
							    if(item.orderType==10&&item.orderStatus==0){
							      item.showList=true
							    }
							    if(item.orderType!=10&&item.orderStatus!=0){
							      item.showList=true
							    }
							  }
              })
              //隐藏加载框
              uni.hideLoading()
            }else{
              //隐藏加载框
              uni.hideLoading()
              uni.showToast({
							  title: '暂无订单信息',
							  icon: 'none'
              })
            }
          })
          .catch((err)=>{
            this.timerOutClear = setTimeout(()=>{
              this.getData()
            },1000)

          })
      }
      
    },
    orderJump(orderId,orderType){//-------------------订单详情跳转
		  if(orderType==11||orderType==12){
		    uni.navigateTo({
				  url: '/pages/album/albumOrderdetail/albumOrderdetail?orderId='+orderId
		    })
		  }else{
		    uni.navigateTo({
				  url: '/pages/my/order/electronicTicket/electronicTicket?orderId='+orderId
		    })
		  }
		  
    },
    refundJump(id){//-------------------退款
		  uni.navigateTo({
		    url: '/pages/my/order/afterSale/applyAfterSale/applyAfterSale?orderId='+id+'&ifyukuaiCode='+this.ifyukuaiCode
		  })
    },
  },
}
</script>

<style scoped lang="scss">
	.productBigBox{
		background: #F7F8FA;
		padding-top: 206rpx;
		min-height: 100vh;
	}
	.order-search{
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		padding: 0 40rpx 0 40rpx;
		position: fixed;
		top: 0;
		left: 0;
		.search-list{
			font-weight: 600;
			font-size: 28rpx;
			color: #999999;
			line-height: 100rpx;
			position: relative;
			.list-line{
				display: none;
				width: 100%;
				height: 6rpx;
				background: #000000;
				border-radius: 4rpx;
				position: absolute;
				left: 0;
				bottom: 16rpx;
			}
		}
		.search-listAct{
			font-size: 30rpx;
			color: #333333;
			.list-line{
				display: block;
			}
		}
	}
	.order-phoneSearch{
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 104rpx;
		background: #F7F8FA;
		padding: 20rpx 20rpx 0 20rpx;
		position: fixed;
		top: 100rpx;
		left: 0;
		.phoneSearch-type{
			width: 200rpx;
			height: 64rpx;
			background: #FFFFFF;
			border-radius: 32rpx;
			line-height: 64rpx;
			position: relative;
			.type-boxOn{
				display: flex;
				justify-content: space-between;
				padding: 0 38rpx 0 38rpx;
				width: 200rpx;
				height: 64rpx;
				font-weight: 600;
				font-size: 24rpx;
				color: #333333;
				position: absolute;
				top: 0;
				left: 0;
			}
			.address-triangle{
				width: 0px;
				height: 0px;
				margin: auto;
				border: 10rpx solid transparent;
				border-top: 10rpx solid #D8D8D8;
				position: absolute;
				top: 8rpx;
				right: 38rpx;
				bottom: 0;
			}
		}
		/deep/ .u-search__content{
			height: 64rpx !important;
			background: #FFFFFF !important;
			border-radius: 32rpx !important;
			padding: 0 32rpx !important;
		}
		/deep/ .u-search{
			width: 490rpx !important;
			height: 64rpx !important;
			flex:none !important;
			align-items:flex-start;
		}
		/deep/ .u-search__content__input{
			background: #FFFFFF !important;
			font-size: 24rpx !important;
		}
		/deep/ .u-icon__icon{
			font-size: 40rpx !important;
			color: #333333 !important;
		}
	}
	.order-list{
		width: 710rpx;
		background-color: #fff;
		border-radius: 12rpx;
		margin: 0 auto 20rpx auto;
		padding: 42rpx 40rpx 40rpx 40rpx;
		overflow: hidden;
		.list-title{
			display: flex;
			justify-content: space-between;
			.title-left{
				display: flex;
				image{
					width: 40rpx;
					height: 40rpx;
					background: #14C9C8;
					border-radius: 50%;
				}
				view{
					font-weight: 600;
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					margin-left: 12rpx;
				}
			}
			.title-right{
				font-weight: 600;
				font-size: 28rpx;
				color: #00B42B;
				line-height: 40rpx;
			}
		}
		.list-name{
			padding-left: 52rpx;
			margin-top: 12rpx;
			font-weight: 600;
			font-size: 28rpx;
			color: #333333;
			line-height: 28rpx;
		}
		.list-time,
		.list-tips{
			padding-left: 52rpx;
			margin-top: 20rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
			line-height: 28rpx;
		}
		.list-money{
			margin-top: 20rpx;
			font-weight: 600;
			font-size: 28rpx;
			color: #333333;
			line-height: 28rpx;
			text-align: right;
		}
		.list-btn{
			display: flex;
			justify-content: flex-end;
			margin-top: 40rpx;
			overflow: auto;
			.btn-style{
				width: 170rpx;
				height: 64rpx;
				border-radius: 32rpx;
				border: 2rpx solid #EDEDED;
				margin-left: 20rpx;
				font-weight: 600;
				font-size: 28rpx;
				color: #666666;
				line-height: 60rpx;
				text-align: center;
			}
		}
	}
	.order-listCancel{//订单取消的时候
		.list-title{
			.title-left{
				image{
					background: #999999;
				}
				view{
					color: #999999;
				}
			}
			.title-right{
				color: #999999;
			}
		}
		.list-name{
			color: #999999;
		}
		.list-money{
			color: #999999;
		}
	}
	.order-No{
		height: 40rpx;
		color: #666666;
		font-size: 30rpx;
		line-height: 40rpx;
		text-align: center;
		margin: auto;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	.goods-NoMore{
		height: 40rpx;
		color: #666666;
		font-size: 30rpx;
		line-height: 40rpx;
		text-align: center;
	}
</style>