<template>
	<view class="list">
		<view v-for="(item, index) in list" :key="index" class="item" @click="toDetail(item)">
			<view class="u-flex u-row-between">
				<text class="color-999">{{item.createTime}}</text>
				<text class="status " :class="[returnStatusClass(item)]">{{item.status}}</text>
			</view>
			<view class="u-m-t-22 u-flex u-col-center">
				<up-image width="132rpx" height="132rpx"  :src="item.goodsImageUrl" v-if="item.goodsCategory!='优惠券'"></up-image>
				<view class="img" style="width: 138rpx;" v-else>
					<couponIcon :item="item.couponInfo" typeKey="couponType"  />
				</view>
				<view class="u-p-l-36">
					<view>{{item.pointsGoodsName}}</view>
					<view class="u-m-t-28 color-666">
						
						<text>{{item.spendPoints}}积分 </text>
						<text v-if="item.extraPaymentAmount"> + {{item.extraPaymentAmount}}元 </text>
					</view>
				</view>
			</view>
			<view class="u-m-t-28 u-flex u-row-right btns">
				<view class="btn look" @click.stop="lookCode(item)" v-if="item.goodsCategory!='优惠券'&&item.status!='已退款'&&item.status!='已完成'">查看券码</view>
				<view class="btn black" @click.stop="refund(item)" v-if="canRefund(item)">申请退款</view>
				<view class="btn black" @click.stop="cancelRefund(item)" v-if="item.status=='退款中'" >取消退款</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import couponIcon from "@/components/coupon-icon/index";
	import {
		ref
	} from "vue";
	const props = defineProps({
		list: {
			type: Array,
			default: () => []
		}
	})
	const emits = defineEmits(["lookCode", "refund","cancelRefund"]);
	const lookCode = (item) => {
		emits("lookCode", item);
	};

	function refund(item) {
		emits("refund", item);
	}
	function cancelRefund(item) {
		emits("cancelRefund", item);
	}
	
	function toDetail(item){
		uni.setStorageSync('points_order_detail',item)
		uni.navigateTo({
			url:'/scoreShop/order/detail'
		})
	}

	function returnStatusClass(item) {
		if (item.status == '已完成' || item.status == '已退款') {
			return 'gray'
		}
		if (item.status == '待核销') {
			return 'success'
		}
		if (item.status == '退款中') {
			return 'error'
		}
	}

	function canRefund(item) {
		if(item.status=='已退款'|| item.status=='退款中'||item.goodsCategory!='其它商品' ||item.status=='已完成'){
			return false
		}
		return true
	}
</script>
<style lang="scss">
	.list {
		padding: 28rpx;

		.item {
			padding: 14rpx 46rpx;
			border-radius: 24rpx;
			background: #fff;
			margin-bottom: 48rpx;
			.img{
				width: 132rpx;
				height: 132rpx;
			}
			.status {
				padding: 8rpx 18rpx;
				border-radius: 8rpx;
				border: 2rpx solid transparent;

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

				&.gray {
					background: #9999991f;
					border-color: #999;
					color: #999;
				}

				&.error {
					background: #ff1c1c2e;
					border-color: #ff1c1c;
					color: #ff1c1c;
				}
			}

			.btns {
				display: flex;
				gap: 34rpx;

				.btn {
					padding: 8rpx 14rpx;
					border-radius: 10rpx;
					border: 2rpx solid transparent;

					&.look {
						border-color: #ededed;
						color: #333;
					}

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