<template>
	<view class="order-pages">
		<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_service"></view>
				{{orderInfo.orderStatusDictValue}}
				</view>
				<view class="status-care">
					预约时间：2021-05-10 15:10:05
				</view>
			</view>
			<!-- 回收品类明细 -->
			<view class="item-info">
				<view class="item-title">
					<view>回收品类明细</view>
					<view class="care">(切换分类可输入不同回收物的价格和重量)</view>
				</view>
				<view class="item flex">
					<view :class="['item-type', curType == item.code ? 'active' : '']" v-for="item in typeData" :key="item.id">
						{{item.dispName}}
					</view>
					<!-- <view class="item-type">
						纸质类
					</view> -->
				</view>
				<view class="table">
					<view>单价(元/kg)</view>
					<view>重量(kg)</view>
					<view>合计金额(元)</view>
				</view>
				<view class="item flex justify_between">
					<view class="flex align_center">
						<text>黄纸</text>
						<u-input :custom-style="inputLeftStyle" input-align="center" :clearable="false" v-model="value" placeholder="" type="number" />
					</view>
					<view class="flex flex_1 align_center">
						<u-input input-align="center" :clearable="false" v-model="value" placeholder="请输入重量" type="number" />
					</view>
					<view class="flex_1"></view>
				</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>线下</text>
				</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>
	</view>
</template>

<script>
	import moment from 'moment'
	import { orderDetailFind, orderSubmit } from '@/api/order.js'
	import { getLookUpDatas } from '@/api/data.js'
	import { reservePriceFind } from '@/api/index.js'
	export default {
		data() {
			return {
				orderInfo: {},
				totalPrice: 0, // 支付合计
				orderReserveNo: '', // 订单号
				inputLeftStyle: {
					Width: '120rpx',
					borderBottom: '1px solid #707070',
					padding: '0rpx 10rpx',
					color: '#191919'
				},
				curType: '', // 当前类型
				typeData: [], // 垃圾类型数据
				paperList: [], // 纸张分类价格数据
				clothesList: [], // 衣物分类价格数据
				metalList: [], // 金属分类价格数据
				plasticList: [], // 塑料分类价格数据
			}
		},
		onLoad(options) {
			if (options.orderNo) {
				console.log(options.orderNo)
				this.orderReserveNo = options.orderNo
				this.getOrderDetail()
				this.getRubbishType()
			}
			// 开启分享
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		computed: {
			
		},
		methods: {
			// 获取订单详情
			getOrderDetail() {
				orderDetailFind({
					orderReserveNo: this.orderReserveNo
				}).then(res => {
					console.log(res,'rrrrrrrr')
					if (res.status == 200) {
						this.orderInfo = res.data
					} 
				})
			},
			// 获取垃圾类型数据
			getRubbishType() {
				getLookUpDatas({type:'RESERVE_RUBBISH_TYPE'}).then(res=>{
					console.log(res,'------rrrrrr')
					if(res.status == 200) {
						this.typeData = res.data || []
						this.curType = this.typeData.length ? this.typeData[0].code : ''
						this.getRow()
					} else {
						this.typeData = []
					}
				})
			},
			// 查询列表
			getRow() {
				reservePriceFind({code:this.curType}).then(res => {
					if (res.status == 200) {
						this.list = res.data
						// 纸质
						if(this.curType == 'PAPER'){
							
						}
						// 衣物
						if(this.curType == 'CLOTHES'){
							
						}
						// 金属
						if(this.curType == 'METAL'){
						
						}
						// 塑料类
						if(this.curType == 'PLASTIC'){
							
						}
					} else {
						this.list = []
						this.total = 0
						this.noDataText = res.message
					}
				})
			},
		},
	}
</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;
					.care{
						font-size: 24rpx;
						color: #FF2C5C;
						margin-top: 10rpx;
					}
				}
				.table{
					padding: 20rpx 0;
					display: flex;
					font-size: 28rpx;
					view{
						width: 33%;
						text-align: center;
					}
				}
				.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;
					}
					.input-left{
						padding: 6rpx;
						border-bottom: 1px solid #707070;
					}
					.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;
					}
				}
			}
			.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>
