<!-- 退款列表页 -->
<template>
	<view>
		<view class="wanl-order-list">
			<view class="edgeInsetTop"></view>
			<!-- 退款列表 -->
			<view class="order-item radius-bock" v-for="(item, index) in dataList" :key="item.id">
				<!-- 店铺名 + 退款类型 -->
				<view class="head">
					<view class="shop wanl-gray" @tap="onShop(item.shop.id)">
						<text class="wlIcon-dianpu1 wanl-black"></text>
						<text class="wanl-black margin-lr-xs text-30">{{ item.shop.shopname }}</text>
						<text class="wlIcon-fanhuigengduo text-sm"></text>
					</view>
					<view class="margin-right-bj text-lg">
						<text class="wanl-orange wlIcon-tuikuan margin-right-xs text-bold"></text>
						<text class="text-sm">{{ item.type_text }}</text>
					</view>
				</view>
				<!-- 商品信息 -->
				<view class="goods-box" @tap="onRefund(item.id)">
					<view class="cu-avatar xl margin-right-bj radius"
						:style="{ backgroundImage: 'url(' + $appKit.oss(item.goods.image, 70, 70) + ')' }"></view>
					<view class="content margin-right-bj">
						<view class="describe">
							<view class="text-cut-2 wanl-black">{{ item.goods.title }}</view>
							<view class="text-sm margin-top-xs wanl-gray-light">{{ item.goods.difference }}</view>
							<view class="text-sm margin-top-xs wanl-black">
								{{ $t('refundList.amount') }}<text class="text-price">{{ item.price }}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 退款状态提示 -->
				<view class="bg-bgcolor padding-bj margin-tb-bj margin-right-bj radius text-cente wanl-gray-light">
					<text class="margin-lr-bj wanl-black">{{ getStateText(item.state) }}</text> {{ getStateInfo(item.state) }}
				</view>
				<!-- 操作按钮 -->
				<view class="action-box padding-bottom-bj">
					<button class="cu-btn round line-black"
						v-if="item.state == 0 || item.state == 1 || item.state == 2 || item.state == 3 || item.state == 6"
						@tap="closeRefund(index)">{{ $t('refundList.close') }}</button>
					<button class="cu-btn round margin-lr-bj line-orange" @tap="onRefund(item.id)">{{ $t('refundList.viewDetail') }}</button>
				</view>
			</view>

			<!-- 空状态 -->
			<view v-if="dataList.length == 0 && loaded">
				<wanl-empty :text="$t('refundList.empty')" />
			</view>
			<view class="edgeInsetBottom"></view>
			<uni-load-more :status="status" />
		</view>
	</view>
</template>

<script>
import { pullRefundList, postRefundClose } from '@/features/mall/mall-gateway'

export default {
	data() {
		return {
			dataList: [],
			reload: false,
			current_page: 1,
			last_page: 1,
			status: 'more',
			loaded: false
		}
	},
	onLoad() {
		this.loadData()
	},
	onPullDownRefresh() {
		this.current_page = 1
		this.reload = true
		this.loadData()
	},
	onReachBottom() {
		if (this.current_page >= this.last_page) {
			this.status = 'noMore'
		} else {
			this.reload = false
			this.current_page++
			this.status = 'loading'
			this.loadData()
		}
	},
	methods: {
		/** 加载退款列表 */
		async loadData() {
			try {
				const res = await pullRefundList({ page: this.current_page })
				uni.stopPullDownRefresh()
				this.dataList = this.reload ? res.rows : this.dataList.concat(res.rows)
				this.current_page = res.currentPage
				this.last_page = res.lastPage
				this.status = res.total == 0 ? 'noMore' : 'more'
				this.loaded = true
			} catch (e) {
				console.error('[refund] loadData', e)
			}
		},

		/** 关闭退款 */
		async closeRefund(index) {
			let refund = this.dataList[index]
			uni.showLoading({ title: this.$t('order.pleaseWait') })
			try {
				await postRefundClose({ id: refund.id })
				refund.state = 5
				uni.showToast({ title: this.$t('refundList.closedToast'), icon: 'none' })
			} catch (e) {
				uni.showToast({ title: this.$t('addressManage.operationFailed'), icon: 'none' })
			}
			uni.hideLoading()
		},

		/** 退款状态文字 */
		getStateText(state) {
			return [
				this.$t('refundList.state0'),
				this.$t('refundList.state1'),
				this.$t('refundList.state2'),
				this.$t('refundList.state3'),
				this.$t('refundList.state4'),
				this.$t('refundList.state5'),
				this.$t('refundList.state6'),
				this.$t('refundList.state7'),
				this.$t('refundList.state8')
			][state]
		},

		/** 退款状态描述 */
		getStateInfo(state) {
			return [
				this.$t('refundList.info0'),
				this.$t('refundList.info1'),
				this.$t('refundList.info2'),
				this.$t('refundList.info3'),
				this.$t('refundList.info4'),
				this.$t('refundList.info5'),
				this.$t('refundList.info6'),
				this.$t('refundList.info7'),
				this.$t('refundList.info8')
			][state]
		},

		/** 跳转退款详情 */
		onRefund(id) {
			uni.navigateTo({ url: `/pages/user/refund/details?id=${id}` })
		}
	}
}
</script>

<style scoped>
.wanl-order-list {
	background: #f3f5f7;
	min-height: 100vh;
	padding: 0 20rpx;
}

.order-item {
	background: #fff;
	margin-top: 20rpx;
	border-radius: 18rpx;
	box-shadow: 0 8rpx 28rpx rgba(17, 24, 39, 0.06);
	overflow: hidden;
}

.order-item .head {
	padding: 22rpx 22rpx 14rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.order-item .shop {
	display: flex;
	align-items: center;
}

.goods-box {
	padding: 0 22rpx 18rpx;
	display: flex;
	align-items: center;
}

.goods-box .cu-avatar {
	width: 140rpx !important;
	height: 140rpx !important;
}

.goods-box .content {
	flex: 1;
	min-width: 0;
}

.bg-bgcolor {
	background-color: #f8f8f8;
}

.action-box {
	display: flex;
	justify-content: flex-end;
	padding: 0 22rpx 22rpx;
	gap: 16rpx;
}

.line-orange {
	border-color: #ff6b35 !important;
	color: #ff6b35 !important;
}

.wanl-orange {
	color: #ff6b35;
}

.radius {
	border-radius: 18rpx;
}

.edgeInsetBottom {
	height: 30rpx;
}
</style>