<template>
	<view class="order-detail1">
		<view url="../address-manage/address-manage?choose=1" class="address">
			<view v-if="address" class="address-info">
				<view class="top">
					<text class="name">收货人：{{ address.con_name }}</text>
					<text class="phone">{{ address.con_mobile }}</text>
				</view>
				<view class="detail ellipsis">{{ address | getAddressString }}</view>
			</view>
			<view v-else class="choose">
				<text class="add">+</text>
				<text class="text">添加收货人</text>
			</view>
			<text class="cuIcon-right"></text>
		</view>
		<view class="border">
			<text style="margin-left: 0;"></text>
			<text v-for="item in 21" :key="item" :class="{ red: item % 2 === 1 }"></text>
		</view>
		<view class="order_num app-item">
			<text>订单编号：{{ order_num }}</text>
			<text class="basecolor">{{ status }}</text>
		</view>
		<view class="list" @click="toList">
			<view class="list-item" v-for="(item, index) in goodList" :key="index">
				<image :src="item.main_img" ></image>
				<view class="info">
					<text>尺码：{{ item.size.length }}</text>
					<text>数量：{{ item.num.reduce((t, e) => t + e, 0) }}</text>
					<text>共计金额：<text class="basecolor">￥{{ item.money }}.00</text></text>
				</view>
			</view>
		</view>
		<view v-if="nopay">
			<view class="top app-item">
				<text>付款信息</text>
			</view>
			<view class="app-item">
				<text>订单金额</text>
				<text>￥356.00</text>
			</view>
			<view class="app-item">
				<text>应付金额</text>
				<text>￥356.00</text>
			</view>
			<view class="app-item pay">
				<text>已付：<text class="basecolor">￥0.00</text></text>
				<text class="paynow">立即付款</text>
			</view>
		</view>
		<view class="app-item t" @click="showRemark">
			<text>备注信息</text>
			<text class="cuIcon-right"></text>
		</view>
		<view class="app-item">
			<text>操作日志</text>
			<text class="cuIcon-right"></text>
		</view>
		<view class="submit">
			<view class="left">催办</view>
			<view v-if="nopay" class="center">订单作废</view>
			<view class="right">再次购买</view>
		</view>
	</view>
</template>

<script>
	import { _API_OrderDetail1 } from '@/apis/order.js'
	export default {
		data() {
			return {
				address: {},
				goodList: [],
				nopay: false,
				status: '',
				order_num: '',
				remark: ''
			}
		},
		onLoad({ status, order_num, nopay }) {
			this.status = status
			this.order_num = order_num
			if (nopay) {
				this.nopay = true
			}
			uni.loading()
			_API_OrderDetail1({ order_num }).then(({ code, data }) => {
				this.remark = data.remark
				this.address = data.address
				this.goodList = data.list
			})
		},
		methods: {
			showRemark() { // 点击备注
				if (this.remark) {
					uni.showModal({ title: '备注', content: this.remark, showCancel: false })
				} else {
					uni.toast('该订单无备注')
				}
			},
			toList() { // 点击查看商品详情
				uni.setStorageSync('lll', JSON.stringify(this.goodList))
				uni.navigateTo({ url: '../order-detail1-list/order-detail1-list' })
			}
		}
	}
</script>

<style lang="scss">
	.order-detail1 {
		height: 100vh;
		overflow: auto;
		background: $app-base-bg;
		border-bottom: 100rpx solid transparent;
		.address {
			height: 120rpx;
			background: #FFFFFF;
			padding: 0 30rpx;
			box-sizing: border-box;
			@include flex();
			justify-content: space-between;
			.address-info {
				flex: 1;
				color: #181818;
				font-size: 28rpx;
				@include flex(column);
				align-items: flex-start;
				.name {
					font-size: 32rpx;
					font-weight: bold;
				}
				.phone {
					margin-left: 30rpx;
				}
				.detail {
					width: 654rpx;
					color: #666666;
				}
			}
			.choose {
				@include flex();
				justify-content: flex-start;
				.add {
					@include flex();
					background: $app-base-color;
					font-size: 40rpx;
					color: #FFFFFF;
					width: 60rpx;
					height: 60rpx;
				}
				.text {
					margin-left: 17rpx;
					color: 32rpx;
				}
			}
			.cuIcon-right {
				font-size: 38rpx;
			}
		}
		.border {
			@include flex();
			height: 6rpx;
			background: #FFFFFF;
			text {
				flex: 1;
				height: 100%;
				background: #3283FA;
				margin-left: 8rpx;
				&.red {
					background: #F56C6C;
				}
			}
		}
		.order_num {
			height: 90rpx;
			font-size: 28rpx;
			margin-top: 14rpx;
			font-weight: bold;
			background: #FFFFFF;
		}
		.list {
			.list-item {
				height: 200rpx;
				margin-top: 1rpx;
				background: #FFFFFF;
				box-sizing: border-box;
				padding: 30rpx;
				@include flex();
				image {
					width: 140rpx;
					height: 140rpx;
					border-radius: 6rpx;
				}
				.info {
					flex: 1;
					height: 100%;
					font-size: 28rpx;
					font-weight: bold;
					margin-left: 30rpx;
					@include flex(column);
					align-items: flex-start;
					justify-content: space-between;
				}
			}
		}
		.app-item {
			font-size: 28rpx;
			font-weight: bold;
			&.top {
				font-size: 32rpx;
				font-weight: bold;
				margin-top: 20rpx;
			}
			&.t {
				margin-top: 20rpx;
			}
			&.pay {
				justify-content: flex-end;
				.paynow {
					width: 156rpx;
					height: 54rpx;
					@include flex();
					color: #FFFFFF;
					margin-left: 28rpx;
					font-weight: normal;
					border-radius: 54rpx;
					background: $app-base-color;
				}
			}
		}
		.submit {
			@include flex();
			position: fixed;
			height: 100rpx;
			bottom: 0;
			font-size: 36rpx;
			width: 100vw;
			background: #FFFFFF;
			color: #FFFFFF;
			border-top: 1rpx solid #999999;
			.left {
				width: 190rpx;
				height: 100%;
				color: #666666;
				@include flex();
			}
			.center {
				flex: 1;
				@include flex();
				height: 100%;
				background: #F7BC54;
			}
			.right {
				height: 100%;
				flex: 1;
				@include flex();
				background: #F76454;
			}
		}
	}
</style>
