<template>
	<view class="mg-lr-24">
		<view class="white-bg-wrap u-f u-f-jcfs u-f-aic mg-bot-10">
			<image class="border-radius-9 mg-right-10" :src="shopSureBillInfo.goodsImage"
				style="width: 128rpx;height: 128rpx;flex: 1" :mode="'widthFix'"></image>
			<view class="u-f u-f-fdc" style="flex: 4">
				<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>
		<view class="white-bg-wrap mg-bot-24">
			<view class="u-f u-f-jcsb u-f-aic mg-bot-40 mg-top-28">
				<view class="u-f u-f-jcfs u-f-aic">
					<u-rate :count="count" v-model="score" :size="36" :inactive-color="'#FAEBBD'"
						:active-color="'#F2CB51'"></u-rate>
				</view>
				<view class="u-f u-f-aic u-f-jcfe">
					<text class="gold-color fs28">{{score}}分</text>
				</view>
			</view>
			<view style="margin-bottom: 125rpx;">
				<textarea class="fs24 light-black" auto-height v-model="content" :maxlength="fillLength"
					style="height: 130rpx;color: #000;" placeholder="请输入评价内容" />
			</view>
			<view style="padding-bottom: 28rpx;text-align: right;">
				<text class="fs24 light-gray">{{content.length}}/{{fillLength}}</text>
			</view>
		</view>

		<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
			:maxCount="10"></u-upload>

		<view class="fix-bot u-f u-cc">
			<view class="line-gradient-btn mg-right-24 mg-left-24" style="width: 95%;" @click="submitFeedback">
				发布评价
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '',
				shopSureBillInfo: {},
				fillLength: 110,
				fileList: [],
				count: 5,
				score: 0
			}
		},
		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) {
									resolve(data.data.url);
								} 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.url)
				})
				let data = {
					storeId: this.shopSureBillInfo.storeId,
					goodsId: this.shopSureBillInfo.goodsId,
					orderId: this.shopSureBillInfo.orderId,
					score: this.score,
					commentContent: this.content,
					commentImageList: feedbackImage
				}
				this.$http.post('/api/client/goodsComment/add', data).then(res => {
					uni.showToast({
						icon: 'none',
						title: res.data.msg
					})
					if (res.data.code == 200) {
						uni.navigateBack({
							delta: 1
						})
					}
				})
			},
		}
	}
</script>

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

<style lang="scss" scoped>
	.upload-list {
		.upload-item {
			flex: 25%;
			width: 25%;
			height: 166rpx;
			background-color: #ffffff;

			&:nth-child(2n) {
				background-color: red;
			}
		}
	}

	.fix-bot {
		width: 100%;
		position: fixed;
		bottom: 28rpx;
		left: 0;
		padding: 10rpx 24rpx;
		background-color: #ffffff;
	}

	.camera {
		width: 42rpx;
		height: 42rpx;
		background: url(../.././static/common/camera.png) no-repeat center center;
		background-size: 100%;
	}
</style>