<template>
	<view class="index" :style="[theme]">
		<view class="onecontent flex-between" style="margin-top: 10rpx;" v-for="(item,index) in datalist.goods" :key="index">
			<image :src="item.img" mode="aspectFill"></image>
			<view class="flex-colum-start">
				<view class="onecontentone">
					{{item.title}}
				</view>
				<view class="onecontenttow">
					<view class="onecontenttowabsolute">
						x{{item.number}}
					</view>
					<text style="font-size:28rpx;">¥</text>{{item.price}}
				</view>
			</view>
		</view>
		<view class="therecontent">
			<view class="therecontentone flex-between" @click="showpicke = true">
				<view class="therecontentone_one">
					退款原因
				</view>
				<text class="therecontentone_text">{{reason}}</text>
				<u-icon name="arrow-right" color="#9b9b9b" size="14"></u-icon>
			</view>
			<view class="therecontentone flex-between">
				<view class="therecontentone_one">
					退款金额
				</view>
				<input disabled style="padding: 16rpx; color: red;" type="text" v-model="money"
					class="therecontentone_text" placeholder="请输入退款金额">
			</view>
			<view class="therecontentone">
				<view class="therecontentone_one">
					详细说明
				</view>
				<view class="" style="margin-top: 10rpx;">
					<u--textarea v-model="remarks" placeholder="请输入内容"></u--textarea>
				</view>
			</view>
			<view class="therecontentone flex-between">
				<view class="therecontentone_one">
					图片凭证
				</view>
				<view class="therecontentone_text" style="text-align: right;">最多三张</view>
			</view>
			<view class="flex-start">
				<view class="fourcontent flex-start" v-if="avatar.length!=0">
					<view class="fourcontent_item" v-for="(item,index) in avatar" :key="index">
						<image :src="item" mode="aspectFill"></image>
						<text class="fourcontent_itemtext" @click="avatardelete(index)">
							<u-icon name="close-circle-fill" color="#000" size="16"></u-icon>
						</text>
					</view>
				</view>
				<view v-if="avatar.length<3" class="fourcontent_items flex-colum" @click="chooseImagelist">
					<u-icon name="camera-fill" color="#000" size="30"></u-icon>
				</view>
			</view>

		</view>
		<view class="buoot" @click="orderorderrefund">
			提交
		</view>
		<u-picker :show="showpicke" title='退款原因' :columns="columnspicke" @cancel='showpicke = false'
			@confirm='confirm'></u-picker>
	</view>
</template>

<script>
	import uploadImage from "@/js_sdk/yushijie-ossutil/ossutil/uploadFile.js";
	export default {
		data() {
			return {
				showpicke: false,
				reason: "",
				money: '',
				columnspicke: [
					['7天无理由', '拍错/多拍/不想要', '其他']
				],
				imgCode: '', // 后续保存到手机相册所需要用到的字段
				remarks: '',
				form: {
					phone: '18092171236'
				},
				datalist: {},
				avatar: [],
				order_id: ""
			}
		},
		async onLoad(e) {
			this.order_id = e.id
			try {
				let res = await this.api.shoppingorderoorderdetail({
					id: this.order_id
				})
				if (res) {
					this.datalist = res
					this.money = res.price
				}
			} catch (e) {}
			// this.generate()
		},
		computed: {
			theme() {
				return this.$store.getters.theme
			},
		},
		methods: {
			// / 更换头像
			chooseImagelist(e) {
				// uni.showLoading({
				// 	title: '上传中',
				// 	mask: true
				// })
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						let file = res.tempFilePaths[0];
						uploadImage(file, 'refund/',
							result => {
								this.avatar.push(result)
								uni.hideLoading()
							}, result => {
								console.log(result)
								uni.hideLoading()
							})
					}
				});
			},
			async orderorderrefund() {
				if (this.reason == null || this.reason == '') {
					uni.showToast({
						title: '请选择退款原因',
						icon: 'none'
					});
					return false;
				}
				let res = await this.api.shoppingorderorderororderrefund({
					order_id: this.order_id,
					reason: this.reason,
					remarks: this.remarks,
					img: this.avatar,
					// money:""
				})
				if (res == 1) {
					uni.showToast({
						title: '操作成功，请等待审核',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 1000);
				}

			},
			avatardelete(e) {
				this.avatar.splice(e, 1)
				console.log(this.avatar)
			},
			confirm(e) {
				this.reason = e.value[0]
				this.showpicke = false
				console.log(e.value[0])
			},
			aveImageToPhotosAlbum() {
				let base64 = this.imgCode.replace(/^data:image\/\w+;base64,/, ""); //去掉data:image/png;base64,
				let filePath = wx.env.USER_DATA_PATH + '/ph_fit_qrcode.png'; //   路径文件名
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				uni.getFileSystemManager().writeFile({ // 获取全局唯一的文件管理器
					filePath: filePath, //创建一个临时文件名
					data: base64, //写入的文本或二进制数据
					encoding: 'base64', //写入当前文件的字符编码
					success: res => {
						uni.saveImageToPhotosAlbum({ // 保存图片到系统相册
							filePath: filePath,
							success: function(res2) {
								uni.hideLoading();
								uni.showToast({
									title: '保存成功',
									icon: "none",
									duration: 5000
								})
							},
							fail: function(err) {
								uni.hideLoading();
								// console.log(err.errMsg);
							}
						})
					},
					fail: err => {
						uni.hideLoading();
						//console.log(err)
					}
				})
			},
		}

	}
</script>

<style lang="scss">
	page {
		background: #F6F6F6;
	}

	.index {
		padding: 32rpx 28rpx;

		.onecontent {
			width: 100%;
			padding: 32rpx;
			background: #FFFFFF;
			border-radius: 12rpx;

			image {
				width: 176rpx;
				height: 176rpx;
			}

			.flex-colum-start {
				flex: auto;
				margin-left: 20rpx;

				.onecontentone {
					width: 400rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 32rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #1A1A1A;
				}

				.onecontenttow {
					position: relative;
					margin-top: 16rpx;
					width: 100%;
					font-size: 40rpx;
					font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
					font-weight: normal;
					color: #333333;

					.onecontenttowabsolute {
						position: absolute;
						bottom: 0;
						right: 0;
						font-size: 28rpx;
						font-family: SourceHanSansCN-Bold-, SourceHanSansCN-Bold;
						font-weight: normal;
						color: #333333;
					}
				}
			}


		}

		.buoot {
			margin: 40rpx auto;
			width: 80%;
			padding: 16rpx 0;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			background:var(--bg-color-button);
			border-radius: 40rpx;
		}

		.therecontent {
			margin-top: 24rpx;
			padding: 32rpx;
			width: 100%;
			background: #FFFFFF;
			border-radius: 18rpx;

			.therecontentone {
				width: 100%;
				padding: 10rpx 0;
				border-bottom: 1px solid #F7F7F7;

				.therecontentone_one {
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				.therecontentone_text {
					flex: auto;
					margin-left: 20rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}

			}



			.fourcontent_items {
				position: relative;
				margin-top: 16rpx;
				margin-left: 20rpx;
				width: 112rpx;
				height: 112rpx;
				background: #f9f9f9;
				border-radius: 16rpx;
			}

			.fourcontent {
				.fourcontent_item {
					position: relative;
					margin-top: 16rpx;
					margin-left: 20rpx;
					width: 112rpx;
					height: 112rpx;
					border-radius: 16rpx;

					image {
						width: 112rpx;
						height: 112rpx;
						border-radius: 16rpx;
					}

					.fourcontent_itemtext {
						position: absolute;
						top: 0rpx;
						right: 0rpx;
					}
				}
			}

			.entowakst {
				font-size: 28rpx;
				font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
				font-weight: normal;
				color: #333333;
			}

			.therecontentfive_box {
				padding: 6rpx 10rpx;
				font-size: 20rpx;
				font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
				font-weight: normal;
				color: #666666;
				background: #FFFFFF;
				margin-left: 6rpx;
				border-radius: 8rpx;
				border: 2rpx solid #D5D5D5;
			}
		}


	}
</style>