<template>
	<view class="content">
		<view v-for="item in orderList" class="order-content">
			<view class="item-userInfo item1" @click="itemChange(item)">
				<view class="userInfo">
					<u-image src="/static/order_avatar_rider.png" width="72" height="72" shape="circle"></u-image>
					<view class="userInfo-nameOrPhone">
						<view class="name">{{item.name}}</view>
						<view class="phone" @click.stop="callPhone(item.phone)"><u-icon name="phone" size="36"></u-icon><view style="margin-left: 10upx;">{{item.phone}}</view></view>
					</view>
				</view>
				<view>
					<u-icon v-show="item.isUp" name="arrow-up" color="#999" size="36" ></u-icon>
					<u-icon v-show="!item.isUp" name="arrow-down" color="#999" size="36"></u-icon>
				</view>
			</view>
			<view v-show="item.isUp">
				<u-line color="#e5e5e5" />
				<view class="item-userInfo-detail">
					<view class="detail-title">用户信息</view>
					<view class="detail-title coucntinfo"><text class="coucntname">{{item.contactName}}</text><text>{{item.contactMobile}}</text></view>
					<view class="detail-title address">{{item.contactAddress}}{{item.houseAddress}}</view>
				</view>
				<u-line color="#e5e5e5"/>
				<view class="item-userInfo-detail detail-title">订单信息</view>
				<u-line color="#e5e5e5"/>
				<view class="item-userInfo item-userInfo-detail"><text class="address">订单编号</text><text class="detail-title">{{item.orderReserveNo}}</text></view>
				<u-line color="#e5e5e5"/>
				<view class="item-userInfo item-userInfo-detail"><text class="address">预约时间</text><text class="detail-title">{{item.reserveDateBegin.substring(0,10)}} {{item.reserveTimeTypeDictValue}}</text></view>
				<u-line color="#e5e5e5"/>
				<view class="item-userInfo item-userInfo-detail"><text class="address">下单时间</text><text class="detail-title">{{item.createDate}}</text></view>
				<u-line color="#e5e5e5"/>
				<view class="item-userInfo item-userInfo-detail"><text class="address">预估重量</text><text class="detail-title">{{item.reserveWeightDictValue}}</text></view>
				<u-line color="#e5e5e5"/>
				<view class="item-userInfo item-userInfo-detail"><text class="address">预约品类</text><text class="detail-title">{{item.reserveRubbishType}}</text></view>
				<view class="item-userInfo-detail-image">
					<u-image :src="img" v-for=" img in item.imageList" width="120" height="120" class="detail-image"></u-image>
				</view>
				<u-line color="#e5e5e5"/>
				<view class="btn">
					<v-select :showSelete="false" :showBtn="true" class="cancelBtn" @itemChange="chooseReason()" code="CANCEL_REASON" ></v-select>
				</view>
			</view>
		</view>
		<view class="nodata" v-if="!hasLogin && orderList.length==0 ">
			<!-- <u-empty :text="noDataText" mode="data"></u-empty> -->
			<u-empty src="/static/def_result.png" :text="noDataText" icon-size="260" ></u-empty>
		</view>
	</view>
</template>

<script>
	import vSelect  from  '@/components/select/v-select.vue'
	import { checkLogin } from '@/api/login.js' 
	import {getOrderList,cancelOrder} from '@/api/order.js'
	export default{
		components: {vSelect},
		data(){
			return{
				noDataText:'',
				showSelect:false,
				nowId:'', // 当前订单id
				orderList:[]
			}
		},
		onLoad() {
			// this.getOrderListData()
		},
		onShow() {
			checkLogin().then(res => {
				this.hasLogin=res.status==200
				if(this.hasLogin){
					this.getOrderListData()
				}else{
					this.noDataText="您尚未登录或登录已过期！"
				}
			})
		},
		methods:{
			// 数据展开收起
			itemChange(item) {
				this.nowId=item.id
				console.log('点击收起隐藏')
				this.$nextTick(function(){
					item.isUp = !item.isUp
				})
			},
			//拨打电话
			callPhone(phone) {
			  uni.makePhoneCall({
			    phoneNumber: phone
			  });
			},
			// 获取订单列表
			getOrderListData(){
				getOrderList({orderStatus:'CONFIRM'}).then(res=>{
					if(res.status==200){
						if(res.data){
							res.data.forEach(item => {
							    item.isUp = false
							})
						}
						this.orderList=res.data || []
						this.noDataText = '暂无数据'
						console.log(this.orderList,'------------this.orderList')
					} else {
						this.orderList = []
						this.noDataText = res.message
					}
				})
			},
			// 取消订单
			chooseReason(e){
				console.log(e,'-------取消订单')
				cancelOrder({id:this.nowId,cancelReason:e}).then(res=>{
					if(res.status==200){
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						setTimeout(()=>{
							this.getOrderListData()
						},500)
					}
				})
				
			},
		}
		}
</script>

<style lang="less">
	.content{
		width: 100%;
		height: 100vh;
		padding: 20upx 30upx;
		background-color: #f5f5f5;
		.order-content{
			padding: 30upx;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			border-radius: 12px;
			font-family: PingFang SC;
			margin-bottom: 20upx;
			.item-userInfo{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.userInfo{
					display: flex;
					align-items: center;
					.userInfo-nameOrPhone{
						margin-left: 20upx;
						font-size: 28upx;
						.name{
							padding: 5upx 0;
							font-weight: bold;
							color: #222;
						}
						.phone{
							display: flex;
							padding: 5upx 0;
							font-weight: 400;
							color: #999;
						}
					}
				}
			}
			.item1{
				padding-bottom: 20upx;
			}
			.item-userInfo-detail{
				padding: 30upx 0;
				view:not(last-child){
					padding-bottom: 10upx;
				}
				.detail-title{
					font-size: 32upx;
					font-weight: 400;
					color:#222
				}
				.coucntinfo{
					font-size: 28upx;
					.coucntname{
						display: inline-block;
						margin-right: 20upx;
					}
				}
				.address{
					font-size: 28upx;
					color: #999;
				}
				
			}
			.item-userInfo-detail-image{
				display: flex;
				padding-bottom: 30upx;
				.detail-image{
					margin-right: 20upx;
				}
			}
			.btn{
				display: flex;
				justify-content: flex-end;
			}
			.cancelBtn{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 80px;
				border-radius: 6px;
				padding: 10upx 0;
				margin-top: 30upx;
				background-color: #e5e5e5;
			}
		}
		.nodata{
			width: 100%;
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
