<template>
	<view class="MallShipmentRefund">
		<view class="mes-des">
			因您信誉良好 尊享：退货包运费·7天无理由退货
		</view>

		<!-- 申请类型 -->
		<view class="list">
			<view class="list-left">申请类型</view>
			<view class="list-right">申请退货</view>
		</view>

		<!-- 退货原因 -->
		<view class="list">
			<view class="list-left">退货原因</view>
			<u-select v-model="show" :list="list" mode='single-column' @confirm="confirm"></u-select>
			<view class="list-right" @click="show = true">{{title?title:'请选择退货'}}
				<u-icon name="arrow-right" color="#cacaca" size="26" />
			</view>
		</view>

		<!-- 退货图片 -->
		<view class="list">
			<view class="list-left">退货图片</view>
			<view class="list-right-img">
				<view class="upImg" v-for="(item,index) in pictures.showpath">
					<image @click="priviewImg(index)" mode="aspectFill" :src="item" />
					<u-icon name="close" @click='closeImg(index)' class='closeImg' />
				</view>
				<view class="addImg" @click="updImgs">
					<u-icon name="plus" label='上传图片' label-pos='bottom' size='50' margin-bottom='10' color='#606266'
						label-size='26' />
				</view>
			</view>
		</view>

		<!-- 申请原因 -->
		<view class="list1">
			<view class="list-left">备注原因</view>
			<u-input class="list-right" v-model="remark" maxlength='300' placeholder='请输入您的退货原因' type="textarea"
				height='230' :border="true" :clearable='false' />
			<view class="">
				{{remark.length+'/'+300}}
			</view>
		</view>

		<!-- 订单 -->
		<view class="actions">
			<view class="nowPay" @click="sure">确认退货</view>
		</view>

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

<script>
	import {
		mallShipmentsRefundInfo,
		mallShipmentsRefund
	} from '@/apis/interfaces/numberWeight'
	import {
		uploads
	} from '@/apis/interfaces/uploading'
	export default {
		name: 'MallShipmentRefund',
		data() {
			return {
				remark: '',
				shipment_no: '', // 提货单no
				title: '',
				list: [],
				show: false,
				pictures: {
					path: [],
					showpath: []
				}, // 退货单图片
			};
		},
		onLoad(e) {
			this.shipment_no = this.$route.params.no
			this.getInfo(this.shipment_no)
		},
		methods: {
			// 预览上传图片
			priviewImg(index) {
				console.log(index, this.pictures.showpath)
				uni.previewImage({
					current: index,
					urls: this.pictures.showpath
				})
			},
			// 上传图片
			updImgs(type) {
				uni.chooseImage({
					success: res => {
						console.log(res)
						let path = res.tempFiles.map((val, index) => {
							return {
								name: 'uploads' + index,
								uri: val.path
							}
						})
						uploads(path).then(pathRes => {
							// console.log(pathRes)
							this.pictures = {
								path: [...this.pictures.path, ...pathRes.path],
								showpath: [...this.pictures.showpath, ...pathRes.url]
							}
							console.log(this.pictures)
						}).catch(err => {
							uni.showToast({
								title: err.message,
								icon: 'none'
							})
						})
					}
				})
			},
			// 删除图片
			closeImg(index) {
				console.log(index)
				this.pictures.path.splice(index, 1)
				this.pictures.showpath.splice(index, 1)

				console.log(this.pictures);
			},
			// 获取退货的基本信息
			getInfo(shipment_no) {
				mallShipmentsRefundInfo(shipment_no).then(res => {
					let list = res.title
					let lists = []
					list.map(item => {
						let items = {
							label: item
						}
						lists.push(items)
					})
					console.log(lists)
					this.list = lists
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.message,
						type: 'error',icon:false,
						duration: 3000
					})
				})
			},
			confirm(e) {
				this.title = e[0].label
			},
			sure() {
				let data = {
					title: this.title,
					shipment_no: this.shipment_no,
					remark: this.remark,
					pictures: JSON.stringify(this.pictures.path)
				}
				if (data.title === '') {
					this.$refs.uToast.show({
						title: '请选择退货原因',
						type: 'error',icon:false,
						duration: 3000
					})
					return;
				}
				if (data.remark === '') {
					this.$refs.uToast.show({
						title: '请填写备注信息',
						type: 'error',icon:false,
						duration: 3000
					})
					return;
				}

				uni.showModal({
					title: '哎呦，提醒你',
					content: '您是否确认申请退货',
					success: (res) => {
						if (res.confirm) {
							mallShipmentsRefund(data).then(res => {
								console.log(res)
								this.$refs.uToast.show({
									title: res,
									type: 'error',icon:false,
									duration: 3000
								})
								uni.setStorageSync('refresh', true)
								setTimeout(res => {
									uni.navigateBack()
								}, 2000)
							}).catch(err => {
								this.$refs.uToast.show({
									title: err.message,
									type: 'error',icon:false,
									duration: 3000
								})
							})
						} else if (res.cancel) {
							this.$refs.uToast.show({
								title: '放弃了~',
								type: 'error',icon:false,
								duration: 3000
							})
						}
					}
				});

			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}

	// 
	.mes-des {
		background-color: rgba($color: #ff0000, $alpha: .1);
		color: #ff0000;
		text-shadow: 0 0 6rpx rgba($color: #000000, $alpha:.1);
		padding: 32rpx;
		text-align: center;
	}

	// 确认退货
	.actions {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		flex-wrap: wrap;
		flex: 1;
		font-size: 28rpx;
		padding: 30rpx;
		color: #fff;

		.nowPay {
			padding: 20rpx 30rpx;
			border-radius: 40rpx;
			margin-left: 20rpx;
			margin-top: 20rpx;
			width: 600rpx;
			font-size: 32rpx;
			background-color: $main-color;
			text-align: center;
		}
	}

	.list1 {
		font-size: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		width: 100%;
		box-sizing: border-box;
		padding: 40rpx;
		border-bottom: solid 1rpx #f7f7f7;

		u-input {
			width: 100%;
			margin-top: 30rpx;
		}
		.list-right {
			width: 100%;
			margin-top: 30rpx;
		}
	}

	.list {
		font-size: 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		box-sizing: border-box;
		padding: 40rpx;
		border-bottom: solid 1rpx #f7f7f7;

		.list-right {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			flex: 1;
			margin-left: 50rpx;
			font-size: 30rpx;
		}

		.list-right-img {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;
			box-sizing: border-box;
			flex: 1;
			margin-left: 50rpx;
			font-size: 30rpx;

			.upImg {
				width: 159rpx;
				height: 159rpx;
				margin: 4rpx;
				position: relative;

				image {
					width: 100%;
					height: 100%;
				}

				.closeImg {
					position: absolute;
					top: 0;
					right: 0;
					z-index: 1;
					padding: 20rpx;
				}
			}

			.addImg {
				width: 159rpx;
				height: 159rpx;
				background-color: #f7f7f7;
				display: flex;
				justify-content: center;
			}
		}
	}
</style>
