<template>
	<view class="page" style="position: relative;">
		<!-- <pyh-nv ref="nv" :config="nvConfig"></pyh-nv> -->
		<view class="listBox" :style="{'padding-top':(pageTop+'px')}">
		<view class="content">
			<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>
			<!-- 订单列表 -->
			<view class="order-list" style="margin-top: -50rpx;max-height: 59vh;overflow: scroll;">
				<view class="list" v-for="(item,index) in list" @click="onOrderList" :key="index">
					<view class="title-status">
						<view class="title">
							<text>报丧编号：{{item.funeralCallWebDeathInfoPo.orderNumber}}</text>
							<image src="../../static/right1.png"></image>
						</view>
						<view class="status-btn" v-if="OrderType == 1">
							<view><text class="red"></text><text class="red big"></text></view>
							<view class="btn">
								<!-- <image src="../../static/btn.png" mode="widthFix"></image> -->
								<text style="color: #fe7400;">已回车</text>
							</view>
						</view>
					</view>
					<view class="goods-list">
						<view class="goods">
							<view class="item">
								<view class="goods-name">
									<view class="goods-name-title">逝者姓名：{{item.funeralCallWebDeathInfoPo.deceasedName}}</view>
									<view class="goods-name-title">联系电话：{{item.funeralCallWebDeathInfoPo.contactPhone}}</view>
									<view class="goods-name-title">逝者地址：{{item.funeralCallWebDeathInfoPo.accessLocation}}</view>
									<view>报丧时间：{{item.funeralCallWebDeathInfoPo.createdTime}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="status-btn" v-if="OrderType == 0">
						<view><text class="red"></text><text class="red big"></text></view>
						<view class="btn" @click="tz(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:[],
			};
		},
		onPageScroll(e) {this.$refs.nv.pageScroll(e)},
		computed:{
			pageTop(){return parseInt(88*uni.getSystemInfoSync().windowWidth/750) + uni.getSystemInfoSync().statusBarHeight}
		},
		onShow() {
			this.OrderType = 0;
			this.carddxx();
		},
		mounted() {
			this.OrderType = 0;
			this.carddxx();
		},
		methods:{
			// 获取调度信息
			carddxx(){
				console.log("user",uni.getStorageSync("USERS_KEY"));
				var info = {
					driverName:uni.getStorageSync("USERS_KEY").nickName,
					driverPhone:uni.getStorageSync("USERS_KEY").phonenumber,
				}
				this.API.pqcldd(info).then(res=>{
					console.log("调度信息",res);
					this.list = res.data;
				})
			},
			ywchcdd(){
				var info = {
					driverName:uni.getStorageSync("USERS_KEY").nickName,
					driverPhone:uni.getStorageSync("USERS_KEY").phonenumber,
				}
				this.API.ywchcdd(info).then(res=>{
					console.log("调度信息",res);
					this.list = res.data;
				})
			},
			// 跳转
			tz(item){
				item.title = "确认回车"
				var info = JSON.stringify(item);
				uni.navigateTo({
					url:'/pages/xxqr/xxqr?info=' + info
				})
			},
			/**
			 * 返回点击
			 */
			onBack(){
				uni.navigateBack();
			},
			/**
			 * 订单tab点击
			 */
			onOrderTab(e){
				console.log("index",e);
				this.OrderType = e;
				if(e == 0){
					this.carddxx();
				}
				if(e == 1){
					this.ywchcdd();
				}
			},
			/**
			 * 订单列表点击
			 */
			onOrderList(){
				uni.navigateTo({
					url: '/pages/OrderDetails/OrderDetails',
				})
			},
			
      /**
       * 评价点击
       */
      onEvaluate(){
			  uni.navigateTo({
          url: '/pages/MyEvaluatePush/MyEvaluatePush'
        })
      }
		}
	}
</script>

<style scoped lang="scss">
	@import 'hcxx.scss';
	/* 订单tab */
	.order-tab{
		position: fixed;
		position: absolute;
		left: 0;
		top: 0;
		margin-top: -7vh;
		/* #ifdef MP-WEIXIN */
		// top: calc(100rpx + var(--status-bar-height));
		/* #endif */
		z-index: 10;
		display: flex;
		align-items: center;
		width: 100%;
		height: 100rpx;
		// border: 1px solid red;
		background-color: #FFFFFF;
		.tab{
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 25%;
			height: 80%;
			text{
				font-size: 26rpx;
				color: #7C7C7C;
			}
		}
		.action{
			text{
				color: #222222;
			}
			.line{
				position: absolute;
				left: 50%;
				bottom: -10rpx;
				width: 40rpx;
				height: 9rpx;
				background-color: #667FFF;
				transform: translate(-50%,0);
				border-radius: 10rpx 10rpx 0 0;
			}
		}
	}
</style>
