<template>
	<view class="mg-lr-24">
		<view class="u-f u-f-jcfs u-f-aic">
			<text class="fs24 fw400 light-black mg-right-10">{{shopSureBillInfo.storeName||''}}</text>
			<image src="../.././static/common/sg_right_arrow.png" class="sg-gray-arrow"></image>
		</view>
		<view class="white-bg-wrap u-f u-f-jcfs u-f-aic mg-bot-26">
			<image class="border-radius-9 mg-right-10" :src="shopSureBillInfo.goodsImage"
				style="width: 128rpx;height: 128rpx;"
				:mode="'scaleToFill'"></image>
			<view class="u-f u-f-fdc" style="flex: calc(100% - 138rpx)">
				<view class="fs28 light-black fw400 mg-bot-10 two-line-ellipsis">{{shopSureBillInfo.goodsName}}</view>
				<view class="mg-bot-10 u-f u-f-aic u-f-jcfs">
					<text class="light-gray fs24 mg-right-8">{{shopSureBillInfo.goodsSpecification}}</text>
				</view>
				<view class="u-f u-f-aic u-f-jcsb">
					<view class="u-f u-f-jcsb u-f-aic" style="margin-right: 96rpx;">
						<text class="fs24 main-color">￥</text>
						<text class="fs32 main-color fw700">{{shopSureBillInfo.goodsPrice || 0}}</text>
					</view>
					<view class="fs24 light-gray">x{{shopSureBillInfo.goodsNum || 1}}</view>
				</view>
			</view>
		</view>
		
		<common-title :msg="'申请原因'"></common-title>
		
		<view class="white-bg-wrap">
			<view class="mg-bot-38">
				<textarea v-model="applyContent" style="width: 100%;min-height: 230rpx;background-color: #F6F6F6;padding: 20rpx 24rpx;" auto-height placeholder-style="color:#999999;font-size: 24rpx;" placeholder="请描述申请服务的具体原因..."/>
			</view>
			
			<view class="u-f u-f-aic u-f-jcc">
				<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="10"></u-upload>
			</view>
		</view>
		
		<view class="white-bg-wrap mg-top-20 mg-bot-50">
			<view class="u-f u-f-jcsb u-f-aic fs28 mg-bot-30">
				<text class="light-black">退款方式</text>
				<text class="light-gray">原路返还微信</text>
			</view>
			<view class="u-f u-f-jcsb u-f-aic fs28 mg-bot-8">
				<text class="light-gray">预估退款金额(以实际金额为准)</text>
				<view class="main-color">
					<text class="fs24">￥</text>
					<text class="fs32">{{shopSureBillInfo.goodsPrice}}</text>
				</view>
			</view>
		</view>
		
		<view class="u-f u-f-aic u-f-jcc" @click="submitFeedback">
			<view class="line-gradient-btn" style="width: 90%">提交</view>
		</view>
	</view>
</template>

<script>
	import commonTitle from '../../components/common-title/common-title.vue'
	export default {
		components: {
			commonTitle
		},
		data() {
			return {
				applyContent: '',
				shopSureBillInfo: {},
				fileList: []
			}
		},
		onLoad(options) {
			let data = options.data ? JSON.parse(decodeURIComponent(options.data)) : ""
			this.shopSureBillInfo = data || {}
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this[`fileList`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList`].length
				lists.map((item) => {
					this[`fileList`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList`][fileListLen]
					this[`fileList`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				let baseUrl = this.$config.webUrl
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: baseUrl + '/api/client/upload',
						filePath: url,
						header: {
							'Content-Type': 'application/json;charset=UTF-8',
							Authorization: uni.getStorageSync('token')
						},
						name: 'file',
						success: (res) => {
							try {
								// 解析返回的数据
								const data = JSON.parse(res.data);
								if (data && data.data && data.data.url && data.data.url[0]) {
									resolve(data.data.url[0]);
								} else {
									reject(new Error('Invalid response format'));
								}
							} catch (error) {
								reject(new Error('Failed to parse response data'));
							}
						},
						fail: (error) => {
							// 处理上传失败的情况
							reject(error);
						}
					});
				});
			},
			//提交评论
			submitFeedback() {
				let feedbackImage = []
				this.fileList.map(item => {
					feedbackImage.push(item.thumb)
				})
				
				let data = {
					storeId: this.shopSureBillInfo.storeId,
				    goodsId: this.shopSureBillInfo.goodsId,
				    orderId: this.shopSureBillInfo.orderId,
					type: 2, // 类型（1-退款 2-售后）
				    score: this.score,
					applyContent: this.applyContent,
					afterSalesPictureList: feedbackImage
				}
				
				this.$http.post('/api/client/afterSales/add', data).then(res => {
					uni.showToast({
						icon: 'none',
						title: res.data.msg
					})
					
					let orderId = res.data.data
					if (res.data.code == 200) {
						uni.navigateTo({
							url: `/pagesB/refund/refund?orderId=${orderId}`
						})
					}
				})
			}
		}
	}
</script>


<style>
	page {
		background-color: #FAFBFF;
	}
</style>

<style>
	.upload-pic {
		width: 224rpx;
		height: 224rpx;
		background: #F6F6F6;
		border-radius: 8rpx;
	}
	
	.sg-gray-arrow {
		width: 18rpx;
		height: 18rpx;
	}
	
	.camera {
		width: 66rpx;
		height: 66rpx;
		background: url(../.././static/common/camera.png) no-repeat center center;
		background-size: 100%;
	}
</style>
