<template>
	<view class="shop-item">
		<view class="item-title" @click="navTo">
			<view>{{order_id}}</view>
			<view v-if="datas.paid==0">
				<text>待付款</text>
			</view>
			<view v-else>
				<text v-if="datas.status==0">待核销</text>
				<text v-if="datas.status==1">待核销</text>
				<text v-if="datas.status==2||datas.status==3">已完成</text>
			</view>
		</view>
		<view class="item-body" @click="navTo">
			<view class="body-content">
				<view>
					<view v-for="(item,index) in datas.goods_list" :key="index"
						style="display: flex;margin-bottom: 20rpx;">
						<image class="image" :src="item.image"></image>
						<view style="width: 520rpx;">
							<view class="" style="display: flex;justify-content: space-between;">
								<view>
									{{item.store_name}}
								</view>
								<view style="font-size: 32rpx;">
									￥{{item.price}}
								</view>
							</view>
							<view class="" style="display: flex;justify-content: space-between;">
								<view>
									{{item.unit_name}}
								</view>
								<view style="font-size: 32rpx;">
									x{{item.cart_num}}
								</view>
							</view>
						</view>
					</view>
				</view>


				<!-- <view
					style="display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100rpx;">
					<up-icon name="arrow-right-double" color="#20B128"></up-icon>
				</view> -->
			</view>
			<view class="all">共 {{datas.goods_count}} 件商品, 总金额 <text>¥{{datas.total_price}}</text> </view>
		</view>
		<view v-if="datas.paid==0" class="item-btn">
			<view style="width: 80px;"><up-button size="small" plain color="#989898" shape="circle"
					@click="cancleOrder">取消订单</up-button></view>
			<view style="width: 80px;"><up-button size="small" color="#20B128" shape="circle"
					@click="rePay">立即支付</up-button></view>
		</view>
		<view v-else class="item-btn">
			<view @click="showVerifyPop=true,options.code=datas.verify_code" v-if="datas.status==1"
				style="width: 80px;"><up-button size="small" plain color="#20B128" shape="circle">核销码</up-button></view>
			<view @click="purchaseAgain" v-if="datas.status==2||datas.status==3" style="width: 80px;"><up-button
					size="small" plain color="#20B128" shape="circle">再次购买</up-button></view>
			<view @click="navTo" style="width: 80px;"><up-button size="small" plain color="#20B128"
					shape="circle">查看详情</up-button></view>
			<view @click="applySh" style="width: 80px;" v-if="datas.status == 1 || datas.status == 2"><up-button
					size="small" plain color="#ccc" shape="circle">申请售后</up-button></view>
		</view>
	</view>


	<up-popup :show="showVerifyPop" @close="showVerifyPop=false" @open="showVerifyPop=true" mode="center">
		<view style="width: 80vw;height: 20vh;position: relative;">
			<view style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);">
				<w-barcode :options="options"></w-barcode>
				<view style="font-weight: bold;color: #333;font-size: 26;text-align: center;">
					核销码 {{datas.verify_code}}
				</view>
			</view>

		</view>
	</up-popup>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	// 订单状态（0：待发货；1：待收货；2：已完成；3：已完成)
	const props = defineProps({
		type: {
			type: Number,
			default: 0
		},
		datas: {
			type: Object,
			default: () => {}
		},
		status: {
			type: String,
			default: ''
		},
		order_id: {
			type: String,
			default: '0'
		}
	})

	const navTo = () => {
		if (props.status == 4) {
			uni.navigateTo({
				url: "/pages/afterSales/afterSalesOrderDetail?id=" + props.datas.id
			})
		} else {
			uni.navigateTo({
				url: `/pagesOrder/detail/detail?type=${props.datas.paid}&id=${props.datas.id}`
			})
		}
	}

	const emit = defineEmits(['cancleOrder', 'rePay', 'takeOrder', 'purchaseAgain']);
	const cancleOrder = () => {
		emit('cancleOrder', props.datas)
	}

	const takeOrder = () => {
		emit('takeOrder', props.datas)
	}

	const purchaseAgain = () => {
		emit('purchaseAgain', props.datas)
	}

	const rePay = () => {
		emit('rePay', props.datas)
	}

	const applySh = () => {
		emit('applyAfterSales', props.datas)
	}

	const showVerifyPop = ref(false)
	const options = reactive({
		width: 500, // 宽度 单位rpx
		height: 100, // 高度 单位rpx
		code: props.datas.verify_code, // 生成条形码的值
	}, )
</script>

<style lang="scss">
	.shop-item {
		width: 710rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 14rpx;
		padding: 20rpx;
		box-sizing: border-box;

		.item-title {
			display: flex;
			justify-content: space-between;
		}

		.item-body {
			margin: 20rpx 0;

			.body-content {
				display: flex;
				justify-content: space-between;
				color: #989898;

				.image {
					width: 120rpx;
					height: 120rpx;
					margin-right: 20rpx;
					border-radius: 14rpx;
				}

				.title {
					display: flex;
					justify-content: space-between;
					font-size: 28rpx;
					color: #444;
				}

				.tips {
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					margin-top: 10rpx;
				}

			}

			.all {
				text-align: right;
				font-size: 26rpx;

				text {
					color: #F55726;
				}
			}
		}

		.item-btn {
			display: flex;
			justify-content: flex-end;

			view {
				width: 80rpx;
				margin-left: 20rpx;
			}
		}

		.item-close {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #F6F6F6;
			padding: 15rpx;
			border-radius: 14rpx;

			.title {
				display: flex;

				.type {
					font-weight: 600;
					margin-right: 20rpx;
				}
			}
		}
	}
</style>