<template>
	<view class="min-page bg-f7 u-font-28">
		<view class="top" :style="topStyle">
			<up-navbar bg-color="transparent" :fixed="false" :placeholder="false" title="订单详情" left-icon-color="#fff"
				title-color="#fff"></up-navbar>
			<view class="u-flex info u-col-center">
				<image :src="imgs.map" class="map"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue';

	const imgs = {
		bg: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/d21f2dfd7bec44618f2d5e4b88372b08.png',
		bg1: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/604c3f917daa41af9239145196c6d3f3.png',
		map: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/0a293f6e1a6a4e7b956379a5b6701104.png',
		pin: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/a9a4f8f59a6d4a46abf91141df3531fb.png'
	}

	const steps = ['发起拼团', '邀请好友', '成团优惠']

	const topStyle = {
		backgroundImage: 'url(' + imgs.bg + ')'
	}
	const tabs = reactive({
		list: ['正在进行中', '我的拼团'],
		sel: 1
	})
	const orders = reactive({
		list: [{
				name: '全部',
				value: ''
			},
			{
				name: '待成团',
				value: ''
			},
			{
				name: '待核销',
				value: ''
			},
			{
				name: '已核销',
				value: ''
			},
			{
				name: '退款',
				value: ''
			},
		],
		sel: 0
	})
</script>

<style lang="scss" scoped>
	.top {
		height: 422rpx;
		background-size: cover;

		.info {
			padding: 32rpx 30rpx 0 30rpx;
			color: #fff;
			font-size: 32rpx;
			font-weight: 700;
		}

		.map {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.steps {
		display: flex;
		padding: 20rpx 20rpx;
		gap: 20rpx;
		border-radius: 14rpx 14rpx 0 0;
		background: linear-gradient(90deg, #FFF5E6 0%, #FFD2CA 100%);

		.step {
			display: flex;
		}

		.index {
			border-radius: 60rpx;
			color: #fff;
			width: 44rpx;
			height: 44rpx;
			line-height: 44rpx;
			text-align: center;
			background: #E55626;
		}

		.text {
			color: #5A352F;
			margin-left: 10rpx;
			margin-right: 22rpx;
			white-space: nowrap;
		}

		.icon {
			color: rgba(90, 53, 47, 0.42);
		}

		.icon1 {
			color: #5A352F;
		}
	}

	.lists {
		padding: 18rpx 10rpx;

		.item {
			display: flex;
			padding: 32rpx 16rpx;
			border-radius: 32rpx;
			background: #FFF;
			margin-bottom: 14rpx;

			.numbers {
				background: #4C2828;
				padding: 8rpx 18rpx;
				border-radius: 10rpx;
				font-weight: 700;
				color: #FAEAC6;
				white-space: nowrap;
			}

			.name {
				max-width: 334rpx;
			}

			.members {
				margin-top: 26rpx;
				background: #FDF1CB;
				padding: 4rpx 18rpx;
				border-radius: 10rpx 10rpx 10rpx 0;
				width: fit-content;
				font-size: 24rpx;
				font-weight: 700;
				color: #ED5A2E;
			}

			.info {
				background-image: url(https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/1/604c3f917daa41af9239145196c6d3f3.png);
				width: 410rpx;
				height: 102rpx;
				background-size: cover;
				transform: translateY(-10rpx);
				display: flex;

				.left {
					width: 306rpx;
					color: #fff;
					padding: 16rpx 22rpx;
				}

				.right {
					padding-left: 16rpx;
					margin-top: 30rpx;

					.pin {
						width: 76rpx;
						height: 54rpx;
					}
				}
			}
		}
	}

	.filters {
		padding: 16rpx 28rpx;
		border-radius: 6rpx 6rpx 16rpx 16rpx;
		background: #FFF;
	}

	.tabs {
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		color: #999;
		padding: 32rpx 88rpx;

		.tabs {
			transition: all .3s linear;
		}

		.active {
			color: #ED5A2E;
			font-size: 32rpx;
			font-weight: 700;
			font-weight: 700;
		}
	}

	.translateY20 {
		transform: translateY(-20rpx);
	}

	.orderStatus {
		padding: 26rpx 28rpx;
		justify-content: space-between;

		.orderState {
			color: #999;
			transition: all .3s linear;

			&.active {
				color: #000;
				font-size: 32rpx;
				font-weight: 700;
			}
		}
	}

	.orders {
		padding: 0 26rpx 36rpx;

		.item {
			padding: 32rpx 24rpx;
			border-radius: 16rpx;
			background: #FFF;
			margin-bottom: 32rpx;

			.numbers {
				background-color: #ED5A2E;
				padding: 16rpx 30rpx;
				border-radius: 12rpx;
				font-size: 32rpx;
				color: #fff;
				font-weight: 700;
				line-height: 36rpx;
			}

			.status {
				padding: 8rpx 18rpx;
				border-radius: 8rpx;
				border: 2rpx solid transparent;

				&.success {
					border-color: rgba(123, 209, 54, 1);
					color: rgba(123, 209, 54, 1);
					background: rgba(123, 209, 54, 0.12);
				}

				&.error {
					border-color: #FF1C1C;
					color: #FF1C1C;
					background: rgba(255, 28, 28, 0.18);
				}
			}

			.price {
				color: #ED5A2E;
				font-weight: 700;
				line-height: 36rpx;
				font-size: 40rpx;
			}

			.info {
				padding: 16rpx 34rpx;
				flex-direction: column;
				align-items: flex-start;
				border-radius: 8rpx;
				background: #F8F8F8;

				.title {
					min-width: 208rpx;
					padding-right: 8rpx;
					box-sizing: border-box;
				}

				.stitle {
					color: #666;

					&.price {
						font-size: 32rpx;
						color: #ed5a2e;
						font-weight: 700;
					}
				}

			}

			.btns {
				margin-top: 28rpx;
				display: flex;
				justify-content: flex-end;
				gap: 34rpx;

				.btn {
					padding: 8rpx 14rpx;
					border-radius: 10rpx;
					border: 2rpx solid #D9D9D9;
					background: #FFF;

					&.black {
						border-color: #343030;
						background-color: #343030;
						color: #fff;
					}
				}
			}
		}
	}
</style>