<template>
	<view class="content-orderDetails">
		<view>
			<view class="flex justify_center align_center order-states">
				<u-image src="/static/order/prescription_order_icon_pay.png" width="48" height="48" v-if="pageInfo.orderStatus=='FINISH'"></u-image>
				<u-image src="/static/order/prescription_order_icon.png" width="48" height="48" v-if="pageInfo.orderStatus=='CONFIRM'"></u-image>
				<u-image src="/static/order/prescription_order_icon_cancel.png" width="48" height="48" v-if="pageInfo.orderStatus=='CANCEL'"></u-image>
				<text>{{pageInfo.orderStatusDictValue||''}}</text>
			</view>
			<view class="flex justify_center order-time" v-if="pageInfo.orderStatus=='FINISH'">服务时间：{{pageInfo.finishDate||'--'}}</view>
			<view class="flex justify_center order-time" v-if="pageInfo.orderStatus=='CONFIRM'">下单时间：{{pageInfo.createDate||'--'}}</view>
			<view class="flex justify_center order-time" v-if="pageInfo.orderStatus=='CANCEL'">取消时间：{{pageInfo.confirmDate||'--'}}</view>
			<view class="item-info">
				<view class="flex justify_between item">
					<text>店铺名称</text>
					<text>{{pageInfo.customerName|| '--'}}</text>
				</view>
				<view class="flex justify_between item">
					<text>订单编号</text>
					<text>{{pageInfo.orderReserveNo|| '--'}}</text>
				</view>
				<view class="flex justify_between item" @click="callPhone(pageInfo.mobile,0)">
					<text>服务骑手</text>
					<text>{{pageInfo.name?pageInfo.name+' - ':''}}{{ pageInfo.mobile}}</text>
				</view>
			</view>
			<view class="item-info">
				<view class="flex justify_between item" @click="callPhone(pageInfo.contactMobile,1)">
					<text>下单用户</text>
					<text>{{pageInfo.contactMobile||'--'}}</text>
				</view>
			</view>
			<view v-if="typeData.length && pageInfo.orderStatus=='FINISH'" class="item-info">
				<view class="item-title flex justify_between">
					<text>回收品类明细</text>
				</view>
				<view class="item flex">
					<view :class="['item-type', curIndex == index ? 'active' : '']" v-for="(item,index) in typeData" :key="item.id"  @click="curIndex=index" >
						{{item.name}}
					</view>
				</view>
				<view v-for="item in typeData[curIndex].typeList" :key="item.id" class="item flex justify_between">
					<text>{{item.typeName || '--'}} {{item.rubbishPrice || 0}}元/kg</text>
					<text>{{item.rubbishWeight/1000 || 0}}kg/{{item.totalAmount || 0}}元</text>
				</view>
			</view>
			
			<view class="item-info" v-if="pageInfo.orderStatus=='FINISH'">
				<view class="flex justify_between item">
					<text>服务时间</text>
					<text>{{pageInfo.finishDate||'--'}}</text>
				</view>
				<view class="flex justify_between item">
					<text>支付金额</text>
					<text>{{pageInfo.originalAmount||'0'}}元</text>
				</view>
			</view>
		</view>
		<view class="content-footer" @itemChange="chooseReason" v-if="pageInfo.orderStatus=='CONFIRM'">
			<v-select :showSelete="false" :showBtn="true" code="CANCEL_REASON" @itemChange="chooseReason"></v-select>
		</view>
		<!-- 取消订单弹窗 -->
		<uni-popup ref="openModal" type="center">
			<uni-popup-dialog content="您确定要取消此订单吗？" @confirm="onOk" title="取消订单"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import {cancelOrder} from '@/api/order.js'
	import vSelect  from  '@/components/select/v-select.vue'
	import {orderDetail}from '@/api/order.js'
	import {getLookUpDatas}from "@/api/data.js"
	export default{
		components: {uniPopup,uniPopupDialog,vSelect},
		data(){
			return{
				pageInfo:null,
				orderId:''  ,// 订单id
				typeData: [], // 订单包含类型数据
				typeNames: '', // 预约品类名称
				curIndex: 0 ,// 当前类型下标
			}
		},
		onLoad(query) {
			this.geRubbishTypeData()
			if(query){
				this.orderId=query.id
				this.getPageInfo()
			}
		},
		methods:{
			geRubbishTypeData(){
				getLookUpDatas({type:'RESERVE_RUBBISH_TYPE'}).then(res=>{
					if(res.status==200){
						this.rubbishData=res.data
					}else{
						uni.showToast({
							title:res.message,
							icon:none
						})
					}
				})
			},
			
			getPageInfo(){
				this.typeData = []
				this.typeNames = ''
				orderDetail({id:this.orderId}).then(res=>{
					if(res.status==200){
						this.pageInfo=res.data
						let data = this.rubbishData
						// 重组类型数据
						if(this.pageInfo.orderReserveItemEntityList) {
							data.map(k =>{
								let arr = this.pageInfo.orderReserveItemEntityList.filter(item=>{
									return item.rubbishType == k.code
								})
								console.log(arr,'dddd')
								if(arr.length) {
									let p = {
										typeCode: k.code,
										name: k.dispName,
										typeList: arr
									}
									this.typeData.push(p)
									console.log(p,this.typeData,'pppppp')
								}
							})
							this.typeData.map(item=>{
								this.typeNames = (this.typeNames ? (this.typeNames + ','):'') + item.name
							})
						}
					}else{
						uni.showToast({
							title:res.message,
							icon:'none'
						})
					}
				})
			},
			// 拨打电话
			callPhone(customerPhoneNum,type){
				console.log(type,'==============')
				uni.makePhoneCall({
				    phoneNumber: customerPhoneNum
				});
			},
			// 取消订单
			chooseReason(e){
				console.log(e,'-------取消订单')
				cancelOrder({id:this.orderId,cancelReason:e}).then(res=>{
					if(res.status==200){
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						setTimeout(()=>{
							uni.switchTab({
								url:'/pages/index/index'
							})
						},200)
					}
				})
				
			},
		}
	}
</script>

<style lang="less">
	.content-orderDetails{
		width: 100%;
		height: 100vh;
		padding: 44upx 32upx;
		background-color: #f5f5f5;
		.order-states{
			margin-bottom: 10upx;
			text{
				display: inline-block;
				margin: 0 10upx;
				font-size: 42upx;
				color: #191919;
			}
		}
		.order-time{
			margin-bottom: 30upx;
		}
		.order-info{
			margin-bottom: 20upx;
			background: #FFFFFF;
			border-radius: 24upx;
			font-weight: 400;
			color: #191919;
			.item{
				padding: 30upx;
				border-bottom: 1px soild #bbb;
				// &:first-child{
				// 	color: #7C7D7E;
				// }
			}
			.item>text:first-child{
				color: #7C7D7E;
			}
			.type{
				color: #7C7D7E;
			}
		}
		.item-info{
			border-radius: 24rpx;
			padding: 0rpx 32rpx;
			margin-bottom: 20upx;
			background-color: #fff;
			.item-title{
				color: #7C7D7E;
				padding-top: 28rpx;
			}
			.item{
				padding: 28rpx 0;
				border-bottom: 1px solid #EBEBEB;
				:first-child{
					color: #7C7D7E;
				}
				:last-child-child{
					color: #222222;
				}
				&:last-child{
					border-bottom: none;
				}
				
				.item-type{
					padding: 0 20rpx;
					height: 56rpx;
					border: 1px solid #979797;
					opacity: 1;
					border-radius: 28rpx;
					font-size: 24rpx;
					color: #999999;
					text-align: center;
					line-height: 56rpx;
					margin-right: 20rpx;
				}
				.item-type.active{
					background-color: #4F88F7;
					border: none;
					color: #fff;
				}
			}
		}
		.content-footer{
			width: 100%;
			padding: 12upx 32upx 32upx;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			left: 0;
			.cancelBtn{
				width: 100%;
				height: 84upx;
				display: flex;
				justify-content: center;
				align-items: center;
				// background: #E5E5E5;
				color: #666;
				border-radius: 16upx;
				font-size: 36upx;
				font-weight: 500;
			}
		}
	}
</style>
