<!-- 编辑退款页 -->
<template>
	<view>
		<view class="edgeInsetTop"></view>
		<!-- 商品信息 -->
		<view class="bg-white padding-bj flex">
			<view class="cu-avatar xl margin-right-bj" :style="{backgroundImage: 'url(' + $appKit.oss(refund.goods.image, 70, 70) + ')'}"></view>
			<view class="text-sm" style="width: calc(100% - 128rpx);">
				<view class="margin-bottom-xs">
					<view class="text-cut-2">{{ refund.goods.title }}</view>
				</view>
				<view class="wanl-gray">{{ $t('apply.mall.comment.spec') }}：{{ refund.goods.difference }}</view>
			</view>
		</view>

		<!-- 编辑退款表单 -->
		<view class="margin-top-bj">
			<view class="cu-form-group">
				<view class="title">{{ $t('apply.logisticsStatus') }}</view>
				<picker @change="expressChange" :value="refund.expressType" :range="expressList">
					<view class="picker">{{ expressList[refund.expressType] }}</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">{{ $t('apply.refundType') }}</view>
				<picker @change="typeChange" :value="refund.type" :range="typeList">
					<view class="picker">{{ typeList[refund.type] }}</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">{{ $t('apply.refundReason') }}</view>
				<picker @change="reasonChange" :value="refund.reason" :range="reasonList">
					<view class="picker">{{ reasonList[refund.reason] }}</view>
				</picker>
			</view>
			<view class="cu-form-group margin-top-bj">
				<view class="title">{{ $t('apply.refundAmount') }}</view>
				<input type="digit" :placeholder="amount.info" @input="moneyInput" :value="refund.price" :disabled="amount.total == 0" />
			</view>

			<!-- 上傳憑證 -->
			<view class="bg-white margin-top-bj">
				<view class="cu-form-group">
					<view class="title">{{ $t('apply.uploadProof') }}</view>
				</view>
				<view class="grid col-4 grid-square flex-sub padding-lr">
					<view class="bg-img" v-for="(item, index) in refund.images" :key="index" @tap="viewImage(index)">
						<image :src="$appKit.oss(item, 90, 90)" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="delImg(index)"><text class="wlIcon-31guanbi"></text></view>
					</view>
					<view class="dashed" @tap="chooseImage" v-if="refund.images.length < 4">
						<text class="wlIcon-31paishe">{{ $t('edit.upload') }}</text>
					</view>
				</view>
			</view>

			<view class="cu-form-group margin-top-bj">
				<view class="title">{{ $t('apply.refundDescription') }}</view>
				<input :placeholder="$t('edit.optional')" v-model="refund.refund_content" />
			</view>
		</view>

		<view class="edgeInsetBottom"></view>
		<!-- 提交按鈕 -->
		<view class="wanlian cu-bar tabbar foot flex flex-direction">
			<button class="cu-btn wanl-bg-orange lg" @tap="addData">{{ $t('apply.confirmModify') }}</button>
		</view>
	</view>
</template>

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

export default {
	data() {
		return {
			refund: {
				expressType: -1,
				type: -1,
				reason: -1,
				images: [],
				goods: {},
				freight_type: 0
			},
			amount: {
				total: 0,
				freight: 0,
				info: ''
			}
		}
	},
	computed: {
		expressList() {
			return [this.$t('edit.notReceived'), this.$t('edit.received')]
		},
		typeList() {
			return [this.$t('edit.refundNoReturn'), this.$t('edit.refundAndReturn')]
		},
		reasonList() {
			return [this.$t('edit.dontLike'), this.$t('edit.emptyPackage'), this.$t('edit.notDelivered'), this.$t('edit.colorSizeMismatch'), this.$t('edit.qualityIssue'), this.$t('edit.missingItems'), this.$t('edit.counterfeitBrand')]
		}
	},
	onLoad(option) {
		this.loadData(option.id)
	},
	methods: {
		/** 加载退款信息用于编辑 */
		async loadData(id) {
			try {
				const res = await pullRefundInfo({ id })
				this.refund = res
				var price = res.goods.price * res.goods.number
				var freight_price = parseInt(res.goods.freight_price)
				this.amount.freight = freight_price
				if (res.goods_number == 1 || res.freight_type == 2) {
					this.amount.info = this.amount.info = this.$t('edit.maxRefundAmount', { price: price + freight_price })
					this.amount.total = price + freight_price
				} else {
					this.amount.info = this.$t('edit.maxRefundAmountNoFreight', { price, freight: freight_price })
					this.amount.total = price
				}
			} catch (e) {
				console.error('[refund edit] loadData', e)
			}
		},

		/** 提交修改 */
		async addData() {
			if (this.refund.price <= 0) {
				uni.showToast({ title: this.$t('edit.priceCannotBeEmpty'), icon: 'none' })
				return
			}
			if (this.refund.price > this.amount.total) {
				uni.showToast({ title: this.$t('edit.refundCannotExceed', { amount: this.amount.total }), icon: 'none' })
				return
			}
			uni.showLoading({ title: this.$t('edit.submitting') })
			try {
				const res = await postRefundEdit({
					id: this.refund.id,
					expressType: this.refund.expressType,
					type: this.refund.type,
					reason: this.refund.reason,
					price: this.refund.price,
					images: this.refund.images,
					refund_content: this.refund.refund_content
				})
				uni.hideLoading()
				uni.navigateTo({ url: `/pages/user/refund/details?id=${res}` })
			} catch (e) {
				uni.hideLoading()
				uni.showToast({ title: this.$t('edit.modifyFailed'), icon: 'none' })
			}
		},

		/** 退款金額輸入 */
		moneyInput(e) {
			let money = e.detail.value
			if (money > this.amount.total) {
				uni.showToast({ title: this.$t('edit.refundCannotExceed', { amount: this.amount.total }), icon: 'none' })
			}
			this.refund.price = money
		},

		expressChange(e) { this.refund.expressType = e.detail.value },
		typeChange(e) { this.refund.type = e.detail.value },
		reasonChange(e) { this.refund.reason = e.detail.value },

		/** 選擇圖片 */
		chooseImage() {
			uni.chooseImage({
				count: 4,
				sizeType: ['original', 'compressed'],
				sourceType: ['album'],
				success: res => {
					for (let i = 0; i < res.tempFilePaths.length; i++) {
						this.refund.images.push(res.tempFilePaths[i])
					}
				}
			})
		},

		/** 預覽圖片 */
		viewImage(key) {
			uni.previewImage({ urls: this.refund.images, current: this.refund.images[key] })
		},

		/** 刪除圖片 */
		delImg(key) {
			this.refund.images.splice(key, 1)
		}
	}
}
</script>

<style scoped>
.edgeInsetTop { height: var(--status-bar-height); }
.dashed::after { border: 1px dashed #666; }
.wanlian.cu-bar.tabbar.foot { background: rgba(255, 255, 255, 0.96) !important; backdrop-filter: blur(10px); border-top: 1px solid rgba(0, 0, 0, 0.06); }
.wanlian.cu-bar.tabbar.foot .cu-btn { width: calc(100% - 50rpx); background: linear-gradient(135deg, #ff6b35, #ff3d2e) !important; border: none !important; color: #fff !important; font-size: 32rpx; height: 86rpx; }
.wanl-bg-orange { background: linear-gradient(135deg, #ff6b35, #ff3d2e) !important; color: #fff !important; }
.wanl-gray { color: #667085; }
.edgeInsetBottom { height: 100rpx; }
</style>