<!-- 退款详情页 -->
<template>
	<view>
		<view class="edgeInsetTop"></view>
		<view class="wanl-refund">
			<!-- 头部状态 -->
			<view class="header">
				<view class="content">
					<view>
						<view class="status-text">{{ getStateText(refundData.state) }}</view>
						<view class="reason">
							<text class="reason-text">{{ refundData.statetime }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 状态描述 -->
			<view class="bg-white padding-bj" v-if="refundData.state != 4">
				{{ getStateInfo(refundData.state) }}
			</view>

			<!-- state=0: 等待卖家同意 -->
			<view class="bg-white solid-top padding-bj current" v-if="refundData.state == 0">
				<view class="wanl-gray text-sm">
					<view><text class="wlIcon-dot margin-right-sm"></text>{{ $t('details.sellerAgreeOrTimeout') }}</view>
					<view class="margin-top-xs"><text class="wlIcon-dot margin-right-sm"></text>{{ $t('details.ifRefundRejected')
						}}
					</view>
				</view>
				<view class="flex justify-end margin-top">
					<button class="cu-btn line-black margin-lr-xs" @tap="closeRefund(refundData.id)">{{ $t('details.closeRefund')
						}}</button>
					<button class="cu-btn line-orange" @tap="editRefund(refundData.id)">{{ $t('details.editApplication')
						}}</button>
				</view>
			</view>

			<!-- state=1: 卖家同意，填寫退貨物流 -->
			<view v-if="refundData.state == 1">
				<view class="bg-white solid-top padding-bj receipt">
					<view class="icon">
						<text class="wlIcon-guanzhu1"></text>
					</view>
					<view class="content">
						<view class="flex justify-between">
							<text>{{$t('details.recipient')}}：{{ refundData.shopConfig.returnName }}</text>
							<text>{{ refundData.shopConfig.returnPhoneNum }}</text>
						</view>
						<view class="margin-top-xs">
							<view class="text-cut-2">{{ refundData.shopConfig.returnAddr }}</view>
						</view>
					</view>
				</view>
				<view class="bg-white padding-bj solid-top">
					<view class="wanl-gray text-sm">
						<view><text class="wlIcon-dot margin-right-sm"></text>{{ $t('details.doNotUseNormalMail') }}</view>
						<view class="margin-top-xs"><text class="wlIcon-dot margin-right-sm"></text>{{ $t('details.pleaseFillRealExpressInfo') }}</view>
					</view>
				</view>
				<view class="cu-form-group margin-top-bj">
					<view class="title">物流單號：</view>
					<input :placeholder="$t('details.pleaseInputExpressNo')" v-model="returnData.express_no" />
				</view>
				<view class="cu-form-group">
					<view class="title">物流公司：</view>
					<picker @change="kuaidiChange" :range="refundData.kuaidi" range-key="name">
						<view class="picker">
							{{ kuaidiKey > -1 ? refundData.kuaidi[kuaidiKey].name : $t('details.pleaseSelect') }}
						</view>
					</picker>
				</view>
				<view class="bg-white padding-bj current">
					<view class="flex justify-end">
						<button class="cu-btn line-orange margin-lr-xs" @tap="toExpress(refundData.id)">{{ $t('details.confirmReturn') }}</button>
					</view>
				</view>
			</view>

			<!-- state=6: 已提交退貨 -->
			<view class="bg-white current" v-if="refundData.state == 6">
				<view class="bg-white solid-top padding-bj">
					{{ $t('details.expressNumber') }}<text class="wanl-gray">{{ refundData.express_name }}({{ refundData.express_no
						}})</text>
				</view>
				<view class="bg-white solid-top padding-bj current">
					<view class="wanl-gray text-sm">
						<view><text class="wlIcon-dot margin-right-sm"></text>{{ $t('details.ifRefundRejected') }}</view>
						<view class="margin-top-xs"><text class="wlIcon-dot margin-right-sm"></text>{{ $t('details.sellerTimeout') }}
						</view>
					</view>
				</view>
			</view>

			<!-- state=2: 賣家拒絕 -->
			<view class="bg-white solid-top padding-bj current" v-if="refundData.state == 2">
				<view class="text-sm">
					{{ $t('details.refusalReason') }}：<text class="wanl-gray">{{ refundData.refuse_content }}</text>
				</view>
				<view class="flex justify-end margin-top">
					<button class="cu-btn line-black"
						@tap="arbitrationRefund(refundData.id)">{{ $t('details.platformIntervention') }}</button>
					<button class="cu-btn line-orange margin-left-xs"
						@tap="editRefund(refundData.id)">{{ $t('details.editApplication') }}</button>
				</view>
			</view>

			<!-- state=3: 平台介入 -->
			<view class="bg-white solid-top padding-bj current" v-if="refundData.state == 3">
				<view class="wanl-gray text-sm">
					<view><text class="wlIcon-dot margin-right-sm"></text>{{$t('details.serviceReviewing')}}</view>
					<view class="margin-top-xs"><text class="wlIcon-dot margin-right-sm"></text>{{$t('details.answerWithin1to3Days')}}</view>
				</view>
			</view>

			<!-- state=4: 退款完成 -->
			<view class="bg-white padding-bj flex justify-between align-center" v-if="refundData.state == 4">
				<text>{{$t('details.refundTotalAmount')}}</text>
				<text class="text-price wanl-orange">{{ refundData.price }}</text>
			</view>

			<!-- 退款歷史入口 -->
			<view class="bg-white padding-bj margin-top-bj flex justify-between align-center" @tap="refundLog(refundData.id)">
				<text>{{$t('details.refundHistory')}}</text>
				<text class="wlIcon-fanhui2"></text>
			</view>

			<!-- 退款詳情 -->
			<view class="bg-white padding-bj margin-top-bj">{{$t('details.refundDetails')}}</view>
			<view class="padding-bj flex">
				<view class="cu-avatar xl margin-right-bj"
					:style="{ backgroundImage: 'url(' + $appKit.oss(refundData.goods.image, 70, 70) + ')' }"></view>
				<view class="text-sm" style="width: calc(100% - 128rpx);">
					<view class="margin-bottom-xs">
						<view class="text-cut-2">{{ refundData.goods.title }}</view>
					</view>
					<view class="wanl-gray">{{$t('details.specifications')}}：{{ refundData.goods.difference }}</view>
				</view>
			</view>
			<view class="bg-white padding-bj text-sm">
				<view class="item flex">
					<text class="wanl-gray">{{$t('details.refundType')}}：</text>
					<text>{{ refundData.type_text }}</text>
				</view>
				<view class="item flex margin-top-bj">
					<text class="wanl-gray">{{$t('details.refundReason')}}：</text>
					<text>{{ refundData.reason_text }}</text>
				</view>
				<view class="item flex margin-top-bj">
					<text class="wanl-gray">{{$t('details.refundAmount')}}：</text>
					<text class="text-price">{{ refundData.price }}</text>
				</view>
				<view class="item flex margin-top-bj">
					<text class="wanl-gray">{{$t('details.logisticsStatus')}}：</text>
					<text>{{ refundData.expressType_text }}</text>
				</view>
				<view class="item flex margin-top-bj">
					<text class="wanl-gray">{{$t('details.refundTime')}}：</text>
					<text>{{ refundData.createtime_text }}</text>
				</view>
			</view>
			<view class="edgeInsetBottom"></view>
		</view>
	</view>
</template>

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

export default {
	data() {
		return {
			refundData: {
				statetime: '',
				goods: {},
				shopConfig: {},
				kuaidi: []
			},
			returnData: {
				id: 0,
				express_no: '',
				express_name: ''
			},
			kuaidiKey: -1
		}
	},
	onLoad(option) {
		this.loadData({ id: option.id })
	},
	methods: {
		/** 加载退款详情 */
		async loadData(data) {
			try {
				const res = await pullRefundInfo(data)
				this.refundData = res
				this.returnData.id = res.id
				// 根据状态计算倒计时
				if (res.state == 0) {
					var diff = (res.createtime + res.config.autoagree * 86400) - Date.parse(new Date()) / 1000
					var days = Math.floor(diff / 86400), hours = Math.floor(diff % 86400 / 3600), minutes = Math.floor(diff % 86400 % 3600 / 60)
					if (minutes > 0 && hours == 0 && days == 0) this.refundData.statetime = this.$t('details.remainingMinutes', { minutes })
					else if (hours > 0 && days == 0) this.refundData.statetime = this.$t('details.remainingHoursMinutes', { hours, minutes })
					else if (days > 0) this.refundData.statetime = this.$t('details.remainingDaysHoursMinutes', { days, hours, minutes })
				} else if (res.state == 1) {
					var diff = (res.agreetime + res.config.returntime * 86400) - Date.parse(new Date()) / 1000
					var days = Math.floor(diff / 86400), hours = Math.floor(diff % 86400 / 3600), minutes = Math.floor(diff % 86400 % 3600 / 60)
					if (minutes > 0 && hours == 0 && days == 0) this.refundData.statetime = this.$t('details.remainingMinutes', { minutes })
					else if (hours > 0 && days == 0) this.refundData.statetime = this.$t('details.remainingHoursMinutes', { hours, minutes })
					else if (days > 0) this.refundData.statetime = this.$t('details.remainingDaysHoursMinutes', { days, hours, minutes })
				} else if (res.state == 2) {
					this.refundData.statetime = res.rejecttime_text
				} else if (res.state == 6) {
					var diff = (res.returntime + res.config.receivingtime * 86400) - Date.parse(new Date()) / 1000
					var days = Math.floor(diff / 86400), hours = Math.floor(diff % 86400 / 3600), minutes = Math.floor(diff % 86400 % 3600 / 60)
					if (minutes > 0 && hours == 0 && days == 0) this.refundData.statetime = this.$t('details.remainingMinutes', { minutes })
					else if (hours > 0 && days == 0) this.refundData.statetime = this.$t('details.remainingHoursMinutes', { hours, minutes })
					else if (days > 0) this.refundData.statetime = this.$t('details.remainingDaysHoursMinutes', { days, hours, minutes })
				} else if (res.state == 3) {
					this.refundData.statetime = this.$t('details.waitingPlatformProcess')
				} else if (res.state == 4) {
					this.refundData.statetime = res.completetime_text
				} else if (res.state == 5) {
					this.refundData.statetime = res.closingtime_text
				} else if (res.state == 7) {
					this.refundData.statetime = this.$t('details.estimated24HoursReturn')
				} else if (res.state == 8) {
					this.refundData.statetime = this.$t('details.contactPlatformServiceText')
				}
			} catch (e) {
				console.error('[refund] loadData', e)
			}
		},

		/** 退款状态文字 */
		getStateText(state) {
			return [
        this.$t('details.waitingSellerAgree'),
        this.$t('details.waitingBuyerReturn'),
        this.$t('details.sellerRejectRefund'),
        this.$t('details.platformIntervention'),
        this.$t('details.refundCompleted'),
        this.$t('details.refundClosed'),
        this.$t('details.waitingSellerReceive'),
        this.$t('details.thirdPartyRefunding'),
        this.$t('details.refundFailed')
    ][state]
		},

		/** 退款状态描述 */
		getStateInfo(state) {
			return [
        this.$t('details.refundInitiated'),
        this.$t('details.sellerAgreed'),
        this.$t('details.canModifyRefund'),
        this.$t('details.platformInterventionApplied'),
        this.$t('details.refundCompleted'),
        this.$t('details.refundClosed'),
        this.$t('details.merchantConfirmReceive'),
        this.$t('details.refundWillReturn'),
        this.$t('details.refundFailed')
    ][state]
		},

		/** 选择快递公司 */
		kuaidiChange(e) {
			this.kuaidiKey = e.detail.value
			this.returnData.express_name = this.refundData.kuaidi[e.detail.value].code
		},

		/** 跳转退款历史 */
		refundLog(id) {
			uni.navigateTo({ url: `/pages/user/refund/log?id=${id}` })
		},

		/** 平台介入 */
		async arbitrationRefund(id) {
			uni.showLoading({ title: this.$t('details.pleaseWait') })
			try {
				await postRefundArbitration({ id })
				this.loadData({ id })
			} catch (e) {
				uni.showToast({ title: this.$t('details.operationFailed'), icon: 'none' })
			}
			uni.hideLoading()
		},

		/** 关闭退款 */
		async closeRefund(id) {
			uni.showLoading({ title: this.$t('details.pleaseWait') })
			try {
				await postRefundClose({ id })
				this.loadData({ id })
			} catch (e) {
				uni.showToast({ title: this.$t('details.operationFailed'), icon: 'none' })
			}
			uni.hideLoading()
		},

		/** 提交退货物流 */
		async toExpress() {
			if (!this.returnData.express_no) {
				uni.showToast({ title: this.$t('details.pleaseInputExpressNo'), icon: 'none' })
				return
			}
			if (!this.returnData.express_name) {
				uni.showToast({ title: this.$t('details.pleaseSelectExpressCompany'), icon: 'none' })
				return
			}
			uni.showLoading({ title: this.$t('details.pleaseWait') })
			try {
				const res = await postRefundExpress(this.returnData)
				this.loadData({ id: res })
			} catch (e) {
				uni.showToast({ title: this.$t('details.submitFailed'), icon: 'none' })
			}
			uni.hideLoading()
		},

		/** 跳转编辑退款 */
		editRefund(id) {
			uni.navigateTo({ url: `/pages/user/refund/edit?id=${id}` })
		}
	}
}
</script>

<style scoped>
.edgeInsetTop {
	height: var(--status-bar-height);
}

.wanl-refund .header {
	width: 100%;
	height: 180rpx;
	position: relative;
	background-color: #f72b36;
}

.wanl-refund .header .content {
	width: 100%;
	height: 180rpx;
	position: absolute;
	z-index: 10;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 60rpx;
	box-sizing: border-box;
}

.wanl-refund .header .status-text {
	font-size: 34rpx;
	line-height: 34rpx;
	color: #FEFEFE;
}

.wanl-refund .header .reason {
	font-size: 24rpx;
	line-height: 24rpx;
	color: rgba(254, 254, 254, 0.75);
	padding-top: 15rpx;
	display: flex;
	align-items: center;
}

.wanl-refund .header .reason-text {
	padding-right: 12rpx;
	white-space: pre-wrap;
}

.wanl-refund .current .cu-btn {
	width: 140rpx;
	font-size: 26rpx;
	padding: 0 12rpx;
}

.wanl-refund .receipt {
	display: flex;
	align-items: center;
}

.wanl-orange {
	color: #ff6b35;
}

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

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