<!-- 交易详情页 -->
<template>
	<view class="wanl-money-log">
		<!-- 交易 -->
		<block v-if="moneyData.type == 'pay' && data">
			<view class="bg-white padding-xl margin-bottom-bj" v-for="(item, index) in data" :key="item.id">
				<view class="text-center solid-bottom title">
					<text>{{ item.shop.shopname }}</text>
					<view class="wanl-black"> -{{ item.pay.price }} </view>
				</view>
				<view class="goods">
					<view class="item solid-bottom" v-for="(goods, indexs) in item.goods" :key="indexs">
						<image :src="goods.image"></image>
						<view class="info">
							<view>
								<text class="text-cut-2">{{ goods.title }}</text>
							</view>
							<view class="wanl-gray">
								{{ goods.difference }} x {{ goods.number }}
							</view>
						</view>
						<view class="text-price">
							{{ goods.price }}
						</view>
					</view>
				</view>
				<view class="list margin-top-xl text-sm">
					<view class="flex">
						<view class="type wanl-gray">訂單號</view>
						<view class="info"> {{ item.pay.order_no }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">交易號</view>
						<view class="info"> {{ item.pay.pay_no }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">訂單金額</view>
						<view class="info text-price"> {{ item.pay.order_price }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">支付方式</view>
						<view class="info"> {{ moneyData.memo }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">第三方交易號</view>
						<view class="info"> {{ item.pay.trade_no }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">實付金額</view>
						<view class="info text-price"> {{ item.pay.actual_payment }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">支付時間</view>
						<view class="info"> {{ item.paymenttime_text }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">運費</view>
						<view class="info text-price"> {{ item.pay.freight_price }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">優惠金額</view>
						<view class="info text-price"> {{ item.pay.discount_price }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">合計金額</view>
						<view class="info text-price"> {{ item.pay.total_amount }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">交易時間</view>
						<view class="info"> {{ item.createtime_text }} </view>
					</view>
				</view>
			</view>
		</block>
		<!-- 拼團 -->
		<block v-else-if="moneyData.type == 'groups' && data">
			<view class="bg-white padding-xl margin-bottom-bj" v-for="(item, index) in data" :key="item.id">
				<view class="text-center solid-bottom title">
					<text>{{ item.shop.shopname }}</text>
					<view class="wanl-black"> -{{ item.pay.price }} </view>
				</view>
				<view class="goods">
					<view class="item solid-bottom" v-for="(goods, indexs) in item.goods" :key="indexs">
						<image :src="goods.image"></image>
						<view class="info">
							<view>
								<text class="text-cut-2">{{ goods.title }}</text>
							</view>
							<view class="wanl-gray">
								{{ goods.difference }} x {{ goods.number }}
							</view>
						</view>
						<view class="text-price">
							{{ goods.price }}
						</view>
					</view>
				</view>
				<view class="list margin-top-xl text-sm">
					<view class="flex">
						<view class="type wanl-gray">訂單號</view>
						<view class="info"> {{ item.pay.order_no }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">交易號</view>
						<view class="info"> {{ item.pay.pay_no }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">訂單金額</view>
						<view class="info text-price"> {{ item.pay.order_price }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">支付方式</view>
						<view class="info"> {{ moneyData.memo }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">第三方交易號</view>
						<view class="info"> {{ item.pay.trade_no }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">實付金額</view>
						<view class="info text-price"> {{ item.pay.actual_payment }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">支付時間</view>
						<view class="info"> {{ item.paymenttime_text }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">運費</view>
						<view class="info text-price"> {{ item.pay.freight_price }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">優惠金額</view>
						<view class="info text-price"> {{ item.pay.discount_price }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">合計金額</view>
						<view class="info text-price"> {{ item.pay.total_amount }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">交易時間</view>
						<view class="info"> {{ item.createtime_text }} </view>
					</view>
				</view>
			</view>
		</block>
		<!-- 用戶充值 -->
		<block v-else-if="moneyData.type == 'recharge' && data">
			<view class="bg-white padding-xl margin-bottom-bj">
				<view class="text-center solid-bottom title">
					<text>{{ moneyData.memo }}</text>
					<view class="wanl-black"> +{{ moneyData.money }} </view>
				</view>
				<view class="list margin-top-xl text-sm">
					<view class="flex">
						<view class="type wanl-gray">狀態</view>
						<view class="info">充值成功</view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">訂單號</view>
						<view class="info"> {{ data.orderid }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">支付類型</view>
						<view class="info">{{ bankList[data.paytype] || data.paytype }}</view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">交易號</view>
						<view class="info"> {{ data.memo }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">變動後餘額</view>
						<view class="info text-price"> {{ moneyData.after }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">變動前餘額</view>
						<view class="info text-price"> {{ moneyData.before }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">充值時間</view>
						<view class="info"> {{ moneyData.createtime_text || moneyData.createtime }} </view>
					</view>
				</view>
			</view>
		</block>
		<!-- 用戶提現 -->
		<block v-else-if="moneyData.type == 'withdraw' && data">
			<view class="bg-white padding-xl margin-bottom-bj">
				<view class="text-center solid-bottom title">
					<text>{{ moneyData.memo }}</text>
					<view class="wanl-black"> {{ moneyData.money }} </view>
				</view>
				<view class="list margin-top-xl text-sm">
					<view class="flex">
						<view class="type wanl-gray">狀態</view>
						<view class="info">提現{{ withdrawStatus[data.status] || data.status }}</view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">提現金額</view>
						<view class="info text-price"> {{ data.money }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">手續費</view>
						<view class="info text-price"> {{ data.handingfee }} </view>
					</view>
					<view class="flex" v-if="data.status == 'successed' && data.transfertime">
						<view class="type wanl-gray">到賬時間</view>
						<view class="info"> {{ data.transfertime_text || data.transfertime }} </view>
					</view>
					<view class="flex" v-if="data.status == 'rejected' && data.memo">
						<view class="type wanl-gray">拒絕原因</view>
						<view class="info"> {{ data.memo }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">類型</view>
						<view class="info">{{ bankList[data.type] || data.type }}</view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">賬戶</view>
						<view class="info"> {{ data.account }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">訂單號</view>
						<view class="info"> {{ data.orderid }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">變動後餘額</view>
						<view class="info text-price"> {{ moneyData.after }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">變動前餘額</view>
						<view class="info text-price"> {{ moneyData.before }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">提交時間</view>
						<view class="info"> {{ moneyData.createtime_text || moneyData.createtime }} </view>
					</view>
				</view>
			</view>
		</block>
		<!-- 退款 -->
		<block v-else-if="moneyData.type == 'refund' && data">
			<view class="bg-white padding-xl margin-bottom-bj">
				<view class="text-center solid-bottom title">
					<text>{{ moneyData.memo }}</text>
					<view class="wanl-black"> {{ moneyData.money > 0 ? '+' + moneyData.money : moneyData.money }} </view>
					<view @tap="goRefund(data.refund.id)">
						<button class="cu-btn sm radius-bock">查看退款</button>
					</view>
				</view>
				<view class="list margin-top-xl text-sm">
					<view class="flex">
						<view class="type wanl-gray">商戶</view>
						<view class="info"> {{ data.shop.shopname }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">訂單號</view>
						<view class="info"> {{ data.order_no }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">下單時間</view>
						<view class="info"> {{ data.createtime_text }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">支付時間</view>
						<view class="info"> {{ data.paymenttime_text }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">退款金額</view>
						<view class="info text-price"> {{ data.refund.price }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">退款類型</view>
						<view class="info">{{ getRefundType(data.refund.type) }}</view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">退款原因</view>
						<view class="info">{{ getRefundReason(data.refund.reason) }}</view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">申請時間</view>
						<view class="info"> {{ data.refund.createtime_text || data.refund.createtime }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">退款時間</view>
						<view class="info"> {{ data.refund.completetime_text || data.refund.completetime }} </view>
					</view>
				</view>
			</view>
		</block>
		<!-- 系統 -->
		<block v-else>
			<view class="bg-white padding-xl margin-bottom-bj">
				<view class="text-center solid-bottom title">
					<text>{{ moneyData.memo }}</text>
					<view class="wanl-black"> {{ moneyData.money > 0 ? '+' + moneyData.money : moneyData.money }} </view>
				</view>
				<view class="list margin-top-xl text-sm">
					<view class="flex">
						<view class="type wanl-gray">變動後餘額</view>
						<view class="info text-price"> {{ moneyData.after }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">變動前餘額</view>
						<view class="info text-price"> {{ moneyData.before }} </view>
					</view>
					<view class="flex">
						<view class="type wanl-gray">時間</view>
						<view class="info"> {{ moneyData.createtime_text || moneyData.createtime }} </view>
					</view>
				</view>
			</view>
		</block>
		<view class="edgeInsetBottom"></view>
	</view>
</template>

<script>
import { get } from '@/core/http/http-client'

export default {
	data() {
		return {
			moneyData: {},
			data: null,
			bankList: {
				alipay: '支付寶',
				wechat: '微信',
				jssdk: '微信公眾平台',
				ALIPAY: '支付寶',
				WECHAT: '微信',
				ICBC: '工商銀行',
				ABC: '農業銀行',
				PSBC: '郵儲銀行',
				CCB: '建設銀行',
				CMB: '招商銀行',
				BOC: '中國銀行',
				COMM: '交通銀行',
				SPDB: '浦發銀行',
				GDB: '廣發銀行',
				CMBC: '民生銀行',
				PAB: '平安銀行',
				CEB: '光大銀行',
				CIB: '興業銀行',
				CITIC: '中信銀行'
			},
			withdrawStatus: {
				created: '申請中',
				successed: '成功',
				rejected: '已拒絕'
			}
		}
	},
	onLoad(option) {
		this.moneyData = JSON.parse(option.data)
		this.loadData()
	},
	methods: {
		async loadData() {
			try {
				const { data } = await get('/wanlshop/pay/details', {
					id: this.moneyData.service_ids,
					type: this.moneyData.type
				})
				this.data = data
			} catch (e) {
				console.error('[details] 加载详情失败:', e)
			}
		},
		getRefundType(e) {
			return ['無需退貨', '退貨退款'][e] || '未知'
		},
		getRefundReason(e) {
			return ['不喜歡', '空包裹', '一直未送達', '顏色/尺碼不符', '質量問題', '少件漏發', '假冒品牌'][e] || '其他'
		},
		goRefund(id) {
			uni.navigateTo({ url: `/pages/user/refund/details?id=${id}` })
		}
	}
}
</script>

<style>
.wanl-money-log .title {
	padding: 20rpx 0 50rpx 0;
}

.wanl-money-log .title > view {
	font-size: 70rpx;
	font-weight: 600;
	margin-top: 14rpx;
}

.wanl-money-log .list .flex {
	margin-bottom: 25rpx;
}

.wanl-money-log .list .flex .type {
	width: 150rpx;
}

.wanl-money-log .list .flex .info {
	flex-grow: 1;
}

.wanl-money-log .goods .item {
	display: flex;
	align-items: center;
	margin: 25rpx 0;
	padding-bottom: 25rpx;
}

.wanl-money-log .goods .item image {
	width: 100rpx;
	height: 100rpx;
	margin-right: 25rpx;
}

.wanl-money-log .goods .item .info {
	flex: 1;
}
</style>