<template>
	<view class="container safe-area-inset-bottom">
		<MessageNotification />
		<!-- 退款原因 -->
		<view class="row-box">
			<text>退款原因</text>
			<view class="choose" @click="show = true">
				{{info || '请选择'}}
				<u-select v-model="show" :list="list" value-name="id" label-name="text" title="退款原因"
					:safe-area-inset-bottom="true" @confirm="confirm">
				</u-select>
				<text class="iconfont icon-jiantou1" v-if="info==''"></text>
			</view>
		</view>

		<!-- 退款金额: -->
		<view class="card">
			<view class="price">
				退款金额:
				<text>￥{{RefundBaseList.total_pay_price}}</text>
			</view>
			<view class="y_price">含邮费 ￥{{RefundBaseList.trans_expenses}}</view>
			<view class="explain">
				<u-field v-model="txt" label="退款说明:" placeholder="请选填" type="textarea"
					placeholder-style="color:'#999999'" :border-bottom="false">
				</u-field>
			</view>
		</view>

		<!-- 上传凭证 -->
		<view class="card">
			<view class="title">
				上传凭证
			</view>
			<view class="btn_up">
				<view class="pre-box" v-if="!showUploadList">
					<view class="pre-item" v-for="(item, index) in lists" :key="index">
						<image class="pre-item-image" :src="item.url" mode="aspectFill"></image>
					</view>
				</view>

				<u-upload :action="action" ref="uUpload" :show-upload-list="showUploadList" :custom-btn="true"
					upload-text="点击上传" max-count="9" :header="headers" :form-data="formData">
					<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
						<u-icon name="camera" size="40" color="#C4C7CC"></u-icon>
						<text>点击上传</text>
					</view>
				</u-upload>

			</view>
		</view>

		<view class="footer">
			<text @click.stop="next()">提交</text>
		</view>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		getRefundReson,
		infoRefundBase,
		postRefundBased
	} from '../../request/api/api';
	export default {
		data() {
			return {
				show: false,
				txt: "",
				list: [{
						value: '1',
						label: '发错货'
					},
					{
						value: '2',
						label: '少发/漏发'
					},
					{
						value: '3',
						label: '拍错了'
					},
					{
						value: '4',
						label: '商品破损'
					},
					{
						value: '5',
						label: '不想要了'
					},
				],

				// refund_types:[],
				info: "",
				action: "https://app.xiaokang88.com/member/v1/attachment/upload", // 演示地址
				formData: {
					store_id: uni.getStorageSync('store_id') || '11001'
				},
				showUploadList: false,
				// 如果将某个ref的组件实例赋值给data中的变量，在小程序中会因为循环引用而报错
				// 这里直接获取内部的lists变量即可
				lists: [],
				headers: {
					authorization: "Bearer " + uni.getStorageSync('token'),
				},
				// img: "https://yanydy.oss-cn-hangzhou.aliyuncs.com/uploads/20230422/ae6a707e5a2269c51c6c316c14f327fe.png",
				order_no: '',
				RefundBaseList: {},
				reasons: '',
				order_id: '',
				img: ""
			}
		},
		onLoad(op) {
			this.order_id = op.id
			this.getRefundBaseList()
		},
		methods: {
			next() {
				this.img = this.$refs.uUpload.lists.reduce((con, item) => {
					con.push(item.response.data.url)
					return con
				}, [])
				// console.log(this.lists);
				this.postRefundBase()
			},

			// 上传
			submit() {
				// let files = [];
				// // 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				// files = this.$refs.uUpload.lists.filter(val => {
				// 	return val.progress == 100;
				// })
				// this.$refs.uUpload.formData.store_id = uni.getStorageSync('store_id') || '11001';
				// console.log(files, 'files')


				// this.img = this.$refs.uUpload.lists.reduce((con, item) => {
				// 	con.push(item.response.data.url)
				// 	return con
				// }, [])

				console.log(this.lists, 'img');
			},
			// 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素)
			confirm(e) {
				this.info = e[0].label
				this.reasons = e[0].label
				// console.log(e);
			},
			//获取退款原因
			getRefundBaseList() {
				getRefundReson({
					method: "post",
					data: {
						store_id: uni.getStorageSync('store_id') || '11001',
					}
				}).then((res) => {
					// console.log(res, 'list');
					if (res.data.errcode == 0) {
						// console.log(res);
						this.list = res.data.data
					}

				})
			},

			// 退款详情
			getInfoList() {
				infoRefundBase({
					method: "post",
					data: {
						store_id: uni.getStorageSync('store_id') || '11001',
						order_id: this.order_id
					}
				}).then((res) => {
					if (res.data.errcode == 0) {
						// console.log(res.data);
						this.RefundBaseList = res.data.data
					}

				})
			},
			//提交退款申请
			postRefundBase() {
				if (!this.reasons) {
					uni.showToast({
						title: '请输入退款原因',
						icon: 'none',
						mask: true
					})
					return
				}
				if (!this.txt) {
					uni.showToast({
						title: '请输入退款说明',
						icon: 'none',
						mask: true
					})
					return
				}
				postRefundBased({
					method: "post",
					data: {
						store_id: uni.getStorageSync('store_id') || '11001',
						order_id: this.order_id,
						reason: this.reasons,
						refund_images: this.img,
						reamrk: this.txt

					}
				}).then((res) => {
					// console.log(res, 'list');
					if (res.data.errcode !== 0) {
						this.$refs.uToast.show({
							title: res.data.msg,
							type: 'default',
							icon: false
						})
						setTimeout(res => {
							uni.navigateBack({
								delta: 1
							});
						}, 600)
						return
					} else {
						uni.navigateTo({
							url: '/subPackages/my/my-drug/drug-list?index=' + 2
						})
					}

				})
			},
		},
		onReady() {
			// 得到整个组件对象，内部图片列表变量为"lists"
			this.lists = this.$refs.uUpload.lists;
			console.log(1);
		},
		mounted() {
			this.getInfoList()
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 750rpx;
		min-height: 100vh;
		max-height: 100%;
		background: #F5F5F5;
		padding-bottom: env(safe-area-inset-bottom);
		padding-top: 20rpx;

		.title {
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #232323;
		}

		.row-box {
			width: 750rpx;
			height: 88rpx;
			background: #FFFFFF;
			font-family: PingFang SC-Bold, PingFang SC;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 40rpx;

			text {
				font-size: 28rpx;
				font-weight: bold;
				color: #232323;
			}

			.choose {
				font-size: 28rpx;
				font-weight: 400;
				color: #999999;
				display: flex;
				align-items: center;

				.iconfont {
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
					margin-left: 10rpx;
				}
			}
		}

		.card {
			width: 750rpx;
			background: #FFFFFF;
			font-family: PingFang SC-Bold, PingFang SC;
			padding: 34rpx 40rpx;
			margin: 20rpx 0;

			.price {
				font-size: 28rpx;
				font-weight: bold;
				color: #232323;

				text {
					font-size: 32rpx;
					color: #FC3636;
				}
			}

			.y_price {
				font-size: 28rpx;
				font-weight: 400;
				color: #999999;
				margin: 32rpx 0;
			}

			.explain {
				font-size: 28rpx;
				font-weight: bold;
				color: #232323;

				::v-deep .u-field {
					padding: 0;
				}
			}

			.btn_up {
				margin-top: 20rpx;

				.pre-box {
					width: 100%;
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.pre-item {
						margin-bottom: 20rpx;

						.pre-item-image {
							width: 180rpx;
							height: 180rpx;
						}
					}

				}


				.wrap {
					padding: 24rpx;
				}

				.slot-btn {
					width: 128rpx;
					height: 128rpx;
					background: #F3F4F5;
					border-radius: 8rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					text {
						width: 96rpx;
						height: 34rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #A7ABB0;
						line-height: 28rpx;
					}
				}

			}
		}

		.footer {
			width: 750rpx;
			height: 110rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 2rpx solid #F2F3F5;
			position: fixed;
			left: 0;
			bottom: env(safe-area-inset-bottom);

			text {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 686rpx;
				height: 86rpx;
				background: #4175EE;
				border-radius: 64rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
</style>