<!-- 退款记录页 -->
<template>
	<view>
		<view class="edgeInsetTop"></view>
		<!-- 退款记录列表 -->
		<view class="wanl-log bg-white margin-bottom-bj padding-bj flex" v-for="(item, index) in logData" :key="item.id">
			<view class="cu-avatar radius margin-right-bj" :style="{backgroundImage: 'url(' + $appKit.oss(item.avatar, 40, 40) + ')'}"></view>
			<view class="content">
				<view>{{ item.name }}</view>
				<view class="text-sm wanl-gray-light">{{ item.createtime_text }}</view>
				<view class="text-sm margin-top-bj">{{ item.content }}</view>
			</view>
		</view>
		<!-- 空状态 -->
		<view v-if="logData.length == 0 && loaded">
			<wanl-empty text="暫無退款記錄" />
		</view>
		<view class="edgeInsetBottom"></view>
	</view>
</template>

<script>
import { pullRefundLog } from '@/features/mall/mall-gateway'

export default {
	data() {
		return {
			logData: [],
			loaded: false
		}
	},
	onLoad(option) {
		this.loadData(option.id)
	},
	methods: {
		/** 加载退款记录 */
		async loadData(id) {
			try {
				const res = await pullRefundLog({ id })
				this.logData = res
				this.loaded = true
			} catch (e) {
				console.error('[refund log] loadData', e)
			}
		}
	}
}
</script>

<style scoped>
.edgeInsetTop { height: var(--status-bar-height); }
.wanl-log .cu-avatar { margin-top: 4rpx; }
.wanl-log .content { flex: 1; }
.wanl-gray-light { color: #9ca3af; }
.edgeInsetBottom { height: 30rpx; }
</style>