<template>
	<view class="pages">
		<view class="orders">
			<view class="order_item" v-for="item in list" :key="item.id" @click="openInfo(item)">
				<view class="order_header">
					<view>
						<h3 class="order_adrass">{{ item.shop.name }}</h3>
						<text class="order_time">{{ item.shop.payTime }}</text>
					</view>
					<view class="order_status" v-if="item.state == 0">创建未校验</view>
					<view class="order_status" v-if="item.state == 1">未支付</view>
					<view class="order_status" v-if="item.state == 2">排队中</view>
					<view class="order_status" v-if="item.state == 3">制作中</view>
					<view class="order_status" v-if="item.state == 4">制作完成</view>
					<view class="order_status" v-if="item.state == 5">待取超时</view>
					<view class="order_status" v-if="item.state == 6">完成</view>
					<view class="order_status" v-if="item.state == 7">取消</view>
					<view class="order_status" v-if="item.state == 8">取消</view>
					<view class="order_status" v-if="item.state == 9">取消</view>
					<view class="order_status" v-if="item.state == 10">取消</view>
					<view class="order_status" v-if="item.state == 11">已退款</view>
					<view class="order_status" v-if="item.state == 12">部分退款</view>
				</view>
				<view class="order_content">
					<view class="goods_item" v-for="good in item.orderDetails" :key="good.id">
						<image class="goods_img" :src="jsonParse(good.goods.pics).thumbnail"></image>
						<view class="goods_text">
							<view class="goods_title">{{ good.goodsName }}×{{ good.num }}</view>
							<view class="goods_spce">
								<span v-for="rule in jsonParse(good.specRuleDetail)" :key="rule.specId">
									{{ rule.ruleName }}/
								</span>
							</view>
						</view>
					</view>
				</view>
				<view class="order_footer">
					<view class="total">
						共1件商品 合计： <text class="price">￥10.00</text>
					</view>
					<!-- <a class="btn" type="primary">再来一单</a> -->
				</view>
			</view>
		</view>
		<tabBar :selectedTabbar="selectedTabbar"></tabBar>
	</view>
</template>

<script>
import order from '@/request/order'
export default {
	name: 'order',
	data() {
		return {
			selectedTabbar: 1,//选中的tab
			list: []
		}
	},

	async onLoad() {
		const { data } = await order.getMyOrder();
		this.list = data.rows
	},
	async onShow() {
		const { data } = await order.getMyOrder();
		this.list = data.rows
	},
	methods: {
		openInfo(data) {
			uni.setStorageSync('orderInfo', data);
			let url = '/orderSubPackage/pages/orderInfo/index'
			// : '/orderSubPackage/pages/settlement/index'
			uni.navigateTo({ url })

		},
		jsonParse(json) {
			return JSON.parse(json)
		}


	}
}
</script>

<style lang="scss" scoped>
.orders {
	padding: 1rpx;

	.order_item {
		width: 686rpx;
		min-height: 370rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 15rpx auto 0;
		box-sizing: border-box;
		padding: 28rpx 32rpx;

		.order_header {
			display: flex;
			justify-content: space-between;

			.order_adrass {
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
			}

			.order_time {
				font-size: 20rpx;
				font-family: ArialMT;
				color: #666666;
			}

			.order_status {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 500;
				color: #000000;
				margin-top: 10rpx;
			}

		}

		.order_content {
			margin-top: 38rpx;

			.goods_item {
				display: flex;
				align-items: center;
				margin-top: 10rpx;


				.goods_img {
					height: 80rpx;
					width: 80rpx;
					background-color: #eee;
				}

				.goods_text {
					margin-left: 38rpx;

					.goods_title {
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 600;
						color: #000000;
					}

					.goods_spce {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						margin-top: 6rpx;
					}

				}

			}
		}

		.order_footer {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 50rpx;

			.total {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;

				.price {
					color: #FF5200;
					font-weight: 700
				}
			}

			.btn {
				width: 144rpx;
				height: 48rpx;
				line-height: 48rpx;
				background: #006ECF;
				border-radius: 6rpx;
				font-size: 24rpx;
				margin: 0;
				color: #fff;
				text-align: center;
			}
		}
	}

}
</style>