<template>
	<view style="background-color: #fff;">
		<view class="order-item">
			<!-- 待取货 -->
			<view class="pickup-code" v-if="status === '3'" @click="checkOrder(item,index)">
				<image v-if="!item.checkType" src="/static/checkbox.png" mode=""></image>
				<image v-else src="/static/checked.png" mode=""></image>
				<text style="margin: 0 12rpx 0 18rpx;font-size: 28rpx;">取货码</text>
				<text class="code-number">{{item.quhuo_code}}</text>
			</view>
			<!-- 待接单 -->
			<view class="address-wrap">
				<view class="" v-if="status === '2'||status === '4'" @click="checkOrder(item,index)">
					<image v-if="!item.checkType" :style="{'margin-right':status==='2'||status === '4'?'12rpx':''}"
						src="/static/checkbox.png" mode=""></image>
					<image v-else :style="{'margin-right':status==='2'||status === '4'?'12rpx':''}"
						src="/static/checked.png" mode=""></image>
				</view>
				<view class="address">{{item.sh_address}}</view>
			</view>
			<!-- 收货地址 -->
			<view :style="{'margin-left':status==='2'||status === '4'?'46rpx':''}" class="address-desc">
				<text style="font-size: 26rpx;">{{item.sh_name}}</text>
				<text style="margin-left: 16rpx;">{{item.sh_mobile}}</text>
			</view>
			<!-- 订单详细 -->
			<view class="shopping-desc">
				<!-- 订单编号 -->
				<view class="title">订单编号：{{item.order_no}}</view>
				<!-- 具体商品 -->
				<view class="shopping-item" v-for="(it,idx) in item.goods_detail" :key="it.id"
					:style="{'margin-bottom':index!==1?'48rpx':''}">
					<image :src="it.image" mode=""></image>
					<view class="right-desc">
						<view class="desc-title">{{it.goods_name}}</view>
						<view class="product-specifications">
							<text>{{it.goods_attr}}</text><text>x{{it.total_num}}</text>
						</view>
						<view v-if="it.describe!=''" class="expedited-orders">{{it.describe}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="split-line"></view>
	</view>
</template>

<script>
	export default {
		props: {
			status: {
				type: String,
				default: '2'
			},
			item: {
				type: Object,
			},
			index: {
				type: String,
			},
		},
		data() {
			return {
				cur: ''
			}
		},
		methods: {
			// 选择订单
			checkOrder(item, index) {
				console.log(item, index, '选择订单')
				this.$emit('isCheck',index)
			}
		}
	}
</script>

<style lang="scss">
	.order-item {
		@include wrapPadding(750rpx, 32rpx, 24rpx, 32rpx, 24rpx);
		width: 702rpx;
	}

	.pickup-code {
		font-weight: 700;
		@include flexcenter();

		image {
			@include commonIconWh(36rpx);
		}

		.code-number {
			color: #EC3323;
			font-size: 55rpx;
		}
	}

	.address-wrap {
		@include flexcenter();
		margin: 16rpx 0 8rpx 0;

		image {
			@include commonIconWh(36rpx);
		}

		.address {
			font-size: 28rpx;
			font-weight: 700;
		}
	}

	.shopping-desc {
		@include wrapPadding(702rpx, 24rpx, 24rpx, 24rpx, 24rpx);
		margin-top: 16rpx;
		padding: 24rpx;
		border-radius: 16rpx;
		background: #f5f5f5ff;

		.title {
			margin-bottom: 14rpx;
		}

		.shopping-item {
			@include flexCj();
			height: 160rpx;
			border-radius: 8rpx;

			image {
				@include commonIconWh(160rpx, 16rpx);
				margin-right: 16rpx;
			}

			.right-desc {
				height: 160rpx;

				.desc-title {
					width: 478rpx;
					@include oneLine(2);
				}

				.product-specifications {
					@include flexCj();
					color: #00000066;
					margin-top: 8rpx;
				}

				.expedited-orders {
					color: #EC3323;
					margin-top: 8rpx;
					padding-left: 16rpx;
					width: 478rpx;
					height: 44rpx;
					line-height: 44rpx;
					border-radius: 8rpx;
					background: #ffffffff;
				}
			}
		}
	}

	.split-line {
		width: 750rpx;
		height: 16rpx;
		background: #f5f5f5ff;
	}
</style>