<template>
	<view class="order-price">
		<template v-if="orderStatus == 1">
			<view class="price-item">
				<view class="price-item-label">运费</view>
				<view class="price-item-value color-red">+￥500.77</view>
			</view>
			<view class="price-item">
				<view class="price-item-label">下单送积分</view>
				<view class="price-item-value color-red">100积分</view>
			</view>

			<view class="price-statistics">
				<text>共2件商品，小计:</text>
				<text class="tag">￥</text>
				<text class="all-price">470.76</text>
			</view>
		</template>
		<template v-else-if="orderStatus == 2">
			<view class="price-item">
				<view class="price-item-label">商品金额</view>
				<view class="price-item-value color-red">￥500.77</view>
			</view>
			<view class="price-item">
				<view class="price-item-label">
					<text class="iconfont label-icon">&#xe62d;</text>
					优惠券
				</view>
				<view class="price-item-value">
					<text class="value-text">未使用</text>
					<text class="value-hint">请选择</text>
					<text class="iconfont value-icon">&#xe671;</text>
				</view>
			</view>
			<view class="price-item">
				<view class="price-item-label">运费</view>
				<view class="price-item-value color-red">+￥500.77</view>
			</view>
			<view class="price-item price-hint">
				<view class="price-item-label">
					<text class="iconfont label-icon">&#xe6ab;</text>
					积分抵扣
				</view>
				<view class="price-item-value">
					<input class="value-input" type="text" placeholder-class="value-input-placeholder"
						placeholder="请输入" />
				</view>
			</view>
			<view class="hint-text">
				使用<text>500</text>积分，剩余<text>5800</text>
			</view>
			<view class="price-statistics">
				<text>共2件商品，应付金额:</text>
				<text class="tag">￥</text>
				<text class="all-price">470.76</text>
			</view>
		</template>
	</view>
</template>

<script lang="ts" setup>
	defineProps({
		orderStatus: {
			type: [String, Number], // 1:确认订单 ， 2：订单详情
			default: 1
		}
	})
</script>

<style lang="scss" scoped>
	.order-price {
		background-color: #fff;
		padding: 15rpx 30rpx 0;

		.price-item {
			min-height: 70rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 15rpx 0;
			box-sizing: border-box;

			.price-item-label {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #1A1A1A;

				.label-icon {
					color: #DA4F4F;
					// background: linear-gradient(180deg, #eb5153, #ea4026);
				}
			}

			.price-item-value {
				flex: 1;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				display: flex;
				align-items: center;
				justify-content: flex-end;


				.value-text {
					color: #1a1a1a;
				}

				.value-hint {
					padding-left: 34rpx;
					color: #cccccc;
				}

				.value-icon {
					flex-shrink: 0;
					font-size: 30rpx;
				}

				.value-input {
					text-align: right;
					color: #1a1a1a;
				}

				.value-input-placeholder {
					color: #CCCCCC;
				}
			}

			.color-red {
				color: #DA4F4F;
			}
		}

		.price-hint {
			padding-bottom: 5rpx;
		}

		.hint-text {
			width: 100%;
			display: flex;
			justify-content: flex-end;
			font-size: 22rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			color: #808080;

			text {
				color: #DA4F4F;
			}
		}

		.price-statistics {
			margin-top: 15rpx;
			padding: 30rpx 0 37rpx;
			border-top: 1rpx solid #f0f0f0;
			text-align: right;

			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			color: #1a1a1a;

			.tag {
				color: #da4f4f;
			}

			.all-price {
				font-size: 34rpx;
				// font-family: 汉真广标, 汉真广标-regular;
				font-weight: normal;
				color: #da4f4f;
			}
		}
	}
</style>