<template>
	<view class="page">
		<pyh-nv ref="nv" :config="nvConfig"></pyh-nv>
		<view class="listBox" :style="{'padding-top':(pageTop+'px')}">
		<view class="content">
		<!-- 订单tab -->
		<view class="order-tab">
			<view class="tab" :class="{'action':OrderType==0}" @click="onOrderTab(0)">
				<text>火化预约</text>
				<text class="line"></text>
			</view>
			<view class="tab" :class="{'action':OrderType==1}" @click="onOrderTab(1)">
				<text>礼堂预约</text>
				<text class="line"></text>
			</view>
			<view class="tab" :class="{'action':OrderType==2}" @click="onOrderTab(2)">
				<text>骨灰寄存</text>
				<text class="line"></text>
			</view>
		</view>
		<!-- 订单列表 -->
		<view class="order-list">
			<view class="list" v-for="(item,index) in list" @click="onOrderList" :key="index">
				<view class="title-status">
					<view class="title">
						<text>订单编号：{{item.obituaryOrderNumber}}</text>
						<image src="../../static/right1.png"></image>
					</view>
					<view class="status">
						
					</view>
				</view>
				<view class="goods-list">
					<view class="goods">
						<view class="item">
							<view class="goods-name">
								<view class="goods-name-title"  v-if="OrderType== 0">火化预约</view>
								<view class="goods-name-title"  v-if="OrderType== 1">礼堂预约</view>
								<view class="goods-name-title"  v-if="OrderType== 2">骨灰寄存</view>
								<view v-if="OrderType== 0">预约时间：{{item.scheduledCremationDate}}</view>
								<view v-if="OrderType== 1">预约时间：{{item.scheduledStartTime}}</view>
								<view v-if="OrderType== 2">预约时间：{{item.storageStartTime}}</view>

							</view>
						</view>
					</view>
				</view>
				<view class="status-btn">
					<view><text class="red"></text><text class="red big"></text></view>
					<view class="btn" @click="myreservationdetail(item)">
						<image src="../../static/btn.png" mode="widthFix"></image>
						<text>查看详情</text>
					</view>
				</view>
			</view>
		</view>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				OrderType: 0,
				nvConfig:{
					title:"我的预约",
					bgColor:"#ffffff",
					color:"#000000",
					fixedAssist:{
						hide:true,
					},
				},
				list:[],
				lists:{},
			};
		},
		onPageScroll(e) {this.$refs.nv.pageScroll(e)},
		computed:{
			pageTop(){return parseInt(88*uni.getSystemInfoSync().windowWidth/750) + uni.getSystemInfoSync().statusBarHeight}
		},
		onLoad(params) {
			this.OrderType = params.type;
			console.log("type",params.type);
			this.getwdyylist();
		},
		methods:{
			getwdyylist(){
				var info = {
					userId:uni.getStorageSync('USERS_KEY').userId
				}
				this.API.getwdyylist(info).then(res=>{
					console.log("我的预约列表",res);
					this.lists = res.data;
					this.onOrderTab(this.OrderType)
				})
			},
			myreservationdetail(item){
				var info = JSON.stringify(item)
				uni.navigateTo({
					url: '/pages/myreservationdetail/myreservationdetail?info=' + info,
				})
			},
			// 
			onOrderTab(e){
				this.OrderType = e;
				this.list = []
				if(e == 0){
					for(let i = 0;i < this.lists.length;i++){
						if(this.lists[i].funeralCremationScheduledInfoPo != null){
							this.list.push(this.lists[i].funeralCremationScheduledInfoPo)
						}
					}
					// this.list = 
					console.log("列表",this.list);
				}
				if(e == 1){
					for(let i = 0;i < this.lists.length;i++){
						if(this.lists[i].funeralHallScheduledInfoPo != null){
							this.list.push(this.lists[i].funeralHallScheduledInfoPo)
						}
					}
					// this.list = this.lists.funeralHallScheduledInfoPo
					console.log("列表",this.list);
				}
				if(e == 2){
					for(let i = 0;i < this.lists.length;i++){
						if(this.lists[i].funeralAshesStorageScheduledInfoPo != null){
							this.list.push(this.lists[i].funeralAshesStorageScheduledInfoPo)
						}
					}
					// this.list = this.lists.funeralAshesStorageScheduledInfoPo
					console.log("列表",this.list);
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'myreservation.scss';
</style>
