<template>
	<view class="order-pages">
		<v-select v-show="false" ref="rubbishType" placeholder="" code="RESERVE_RUBBISH_TYPE" style="width: 100%"></v-select>
		<view class="order-info">
			<!-- 订单状态 -->
			<view class="order-status">
				<view class="status-title flex align_center justify_center">
					<view class="t-icon icon t-icon-icon_complete"></view>
				{{orderInfo.orderStatusDictValue || '--'}}
				</view>
				<view class="status-care">
					预约时间：{{orderInfo.reserveTime}}
				</view>
			</view>
			<!-- 服务信息 -->
			<view class="info-main flex flex_column">
				<view class="flex flex_1 align_center">
					<view class="new-left">
						{{orderInfo.contactAddress || '--'}}
					</view>
				</view>
				<view class="time flex align_center justify_between">
					<text>{{orderInfo.contactName}}</text>
					<view class="flex align_center">
						<view class="t-icon phone t-icon-icon_phone"></view>
						<text>{{orderInfo.contactMobile}}</text>
					</view>
				</view>
			</view>
			<!-- 预约信息 -->
			<view class="item-info">
				<view class="item flex justify_between">
					<text>预约品类</text>
					<text>{{typeNames}}</text>
				</view>
				<view class="item flex justify_between">
					<text>预约重量</text>
					<text>{{orderInfo.reserveWeight}}</text>
				</view>
			</view>
			<!-- 订单信息 -->
			<view class="item-info">
				<!-- <view class="item flex justify_between">
					<text class="item-title">订单信息</text>
				</view> -->
				<view class="item flex justify_between">
					<text>订单编号</text>
					<text>{{orderInfo.orderReserveNo||'--'}}</text>
				</view>
				<view class="item flex justify_between">
					<text>下单时间</text>
					<text>{{orderInfo.createDate}}</text>
				</view>
				<view class="item flex justify_between">
					<text>服务时间</text>
					<text>{{orderInfo.finishDate}}</text>
				</view>
			</view>
			<!-- 图片 -->
			<!-- <view class="item-info">
				<view class="item-title flex justify_between">
					<text>图片</text>
				</view>
				<view class="item flex">
					<u-image class="img-icon" :src="item.icon?item.icon:'../../static/img/mddef.jpg'" border-radius="16" width="160" height="160"></u-image>
				</view>
			</view> -->
			<!-- 回收品类明细 -->
			<view class="item-info">
				<view class="item-title flex justify_between">
					<text>回收品类明细</text>
				</view>
				<view class="item flex">
					<view :class="['item-type', curType == item.code ? 'active' : '']" v-for="(item,index) in typeData" :key="item.id"  @click="curIndex=index" >
						{{item.name}}
					</view>
					<!-- <view class="item-type">
						纸质类
					</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 || 0}}kg/{{item.totalAmount || 0}}元</text>
				</view>
			</view>
			<!-- 金额 -->
			<view class="item-info">
				<view class="item flex justify_between">
					<text>应付金额</text>
					<text>{{orderInfo.payAmount}} 元</text>
				</view>
				<view class="item flex justify_between">
					<text>支付方式</text>
					<text>{{orderInfo.payTypeDictValue}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import moment from 'moment'
	import { orderDetailFind } from '@/api/order.js'
	import vSelect from '@/components/select/v-select.vue'
	export default {
		components: {
			vSelect
		},
		data() {
			return {
				orderInfo: {},
				orderReserveNo: '', // 订单no
				typeData: [], // 订单包含类型数据
				typeNames: '', // 预约品类名称
				curIndex: 0 // 当前类型下标
			}
		},
		onLoad(options) {
			if (options.orderNo) {
				console.log(options.orderNo)
				this.orderReserveNo = options.orderNo
				this.getOrderDetail()
			}
			// 开启分享
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		computed: {
			
		},
		methods: {
			// 获取订单详情
			getOrderDetail() {
				uni.showLoading({
					title: '加载中...'
				})
				this.typeData = []
				this.typeNames = ''
				orderDetailFind({
					orderReserveNo: this.orderReserveNo
				}).then(res => {
					console.log(res,'rrrrrrrr')
					if (res.status == 200) {
						this.orderInfo = res.data
						this.orderInfo.reserveTime = moment(this.orderInfo.confirmDate).format('YYYY-MM-DD') + this.orderInfo.reserveTimeType
						let data = this.$refs.rubbishType.getDataList()
						// 重组类型数据
						data.map(k =>{
							let arr = this.orderInfo.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
						})
					} 
					uni.hideLoading()
				})
			},
			
		},
	}
</script>

<style lang="scss">

	.order-pages {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #F5F5F5;
		.order-info {
			width: 100%;
			flex: 1;
			overflow-y: scroll;
			// 订单内容
			.info-main{
				background: #ffffff;
				padding: 10upx 32upx;
				margin: 20upx 32upx;
				border-radius: 24upx;
				box-shadow: 1px 1px 3px #EEEEEE;
				font-size: 28upx;
				background-image: url(../../static/order_bg_stor.png);
				background-repeat: no-repeat;
				height: 260rpx;
				.new-left{
					width: 360rpx;
					font-size: 36rpx;
					color: #191919;
					font-weight: 600;
					line-height: 44rpx;
					margin-top: 30rpx;
				}
				.time{
					padding: 20rpx 0;
					font-size: 32rpx;
					color: #7C7D7E;
					margin-top: 20rpx;
					view:last-child{
						font-size: 28rpx;
						color: #4C4C4C;
						margin-left: 6rpx;
					}
				}
			}
			// 状态
			.order-status {
				padding: 30upx 0;
				text-align: center;
				.status-title {
					font-size: 42upx;
					color: #191919;
					.icon{
						width: 48rpx;
						height: 48rpx;
						margin-right: 10rpx;
					}
				}

				.status-care {
					font-size: 28upx;
					margin-top: 10upx;
					color: #191919;

					>text {
						color: red;
					}
				}
			}

			// 订单信息列
			.item-info{
				border-radius: 24rpx;
				margin: 0rpx 32rpx 20rpx;
				padding: 0rpx 32rpx;
				background-color: #fff;
				.item-title{
					font-size: 32rpx;
					color: #181818;
					padding-top: 28rpx;
				}
				.item{
					padding: 28rpx 0;
					font-size: 32rpx;
					border-bottom: 1px solid #EBEBEB;
					:first-child{
						color: #7C7D7E;
					}
					:last-child-child{
						color: #222222;
					}
					&:last-child{
						border-bottom: none;
					}
					
					.item-type{
						width: 128rpx;
						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;
					}
				}
			}
			.price-text {
				font-size: 20upx;
				margin-left: 10upx;
			}
			.price-num {
				font-size: 32upx;
				color: red;
				font-weight: 600;
				margin-right: 6rpx;
			}
			.u-cell {
				padding: 10rpx 32rpx;
			}
		}
		.footer {
			padding: 20rpx 32rpx;
			display: flex;
			background-color: #fff;
			.btn{
				flex: 1;
				height: 84rpx;
				font-size: 32rpx;
				text-align: center;
				line-height: 84rpx;
			}
			.btnCancleStyle{
				color: #666666;
				background: #E5E5E5;
				border-radius: 60rpx 0px 0px 60rpx;
			}
			.btnPayStyle{
				color: #191919;
				background: #FFD100;
				border-radius: 0rpx 60px 60px 0rpx;
			}
			.useBtn{
				width: 100%;
				height: 84rpx;
				font-size: 32rpx;
				text-align: center;
				line-height: 84rpx;
				color: #191919;
				background: #FFD100;
				border-radius: 60rpx
			}
		}
	}
</style>
