<template>
	<view class="afterSale">
		<far-bottom></far-bottom>
		<!-- 商品信息 -->
		<view class="orderInfo">
			<view class="orderInfoPackage">
				<view class="orderInfoImg">
					<image :src="AfterSaleInfo.goodLogo" />
				</view>
				<view class="orderInfos">
					<view>
						<span>{{ AfterSaleInfo.goodName }}</span>
					</view>
					<view>
						<span>{{ AfterSaleInfo.optionName }}</span>
						<span v-if="AfterSaleInfo.num > 0">x{{ AfterSaleInfo.num }}</span>
					</view>
					<view>
						<span>¥{{ AfterSaleInfo.allprice }}</span>
					</view>
				</view>
			</view>
		</view>
		<!-- 商品信息 -->

		<!-- 服务类型 -->
		<view class="afterSaleType">
			<view class="afterSaleTypePackage">
				<view class="afterSaleTypeTitle">
					<view class="line"></view>
					<span>服务类型</span>
				</view>
				<view class="afterSaleTypeBody">
					<view :class="[type == 3 ? 'check' : '']" @click="checkType(3)" v-if="AfterSaleInfo.type.indexOf(3) !== -1"><span>退货退款</span></view>
					<view :class="[type == 2 ? 'check' : '']" @click="checkType(2)" v-if="AfterSaleInfo.type.indexOf(2) !== -1"><span>换货</span></view>
					<view :class="[(type == 1 || plugin == 'citydelivery') ? 'check' : '']" @click="checkType(1)" v-if="(AfterSaleInfo.type.indexOf(1) !== -1) || plugin == 'citydelivery'"><span>退款</span></view>
				</view>
			</view>
		</view>
		<!-- 服务类型 -->

		<!-- 选择核销码 -->
		<view class="checkCode" v-if="AfterSaleInfo.usestatus=='1'">
			<view class="checkCodeTitle dis-flex f-24">
				<view style="flex: 0.8;">
					核销码(可多选)
				</view>
				<view  style="flex: 0.2;">
					<view class="dis-il-block allcheck"  @click="checkall">
						全选
					</view>
				</view>
				
			</view>
			<view class="checkCodeBody">
				<!-- 核销码循环模板 -->
				<view v-for="(item, index) in AfterSaleInfo.checkcodes">
					<span>
						核销码{{ index + 1 }}
						<span>{{ item.checkcode }}</span>
					</span>
					<view :class="codes.indexOf(item.checkcode) == -1 ? '' : 'checkedCode'" @click="checkedCodes(item.checkcode, item.orderprice)">
						<image :src="imgfixUrls + 'merchant/payCheck.svg'" v-if="codes.indexOf(item.checkcode) !== -1" />
					</view>
				</view>
				<!-- 核销码循环模板 -->
			</view>
		</view>
		<!-- 选择核销码 -->
		
		<!-- 退票数量 -->
		<view class="checkReason" v-if="AfterSaleInfo.usestatus == 3">
			<view class="checkReasonPackage">
				<span>申请数量</span>
				<view>
					<tui-numberbox  :value="numbers" id="goshop" @change="change($event,'goshop')" :width="60" :min="0" style="float: right;"></tui-numberbox>
				</view>
			</view>
		</view>
		<!-- 退票数量 -->
		
		<!-- 选择申请原因 -->
		<view class="checkReason" @click="con">
			<view class="checkReasonPackage">
				<span>申请原因</span>
				<view>
					<span>{{ reasonText }}</span>
					<image :src="imgfixUrls + 'merchant/right.svg'" />
				</view>
			</view>
		</view>
		<!-- 选择申请原因 -->

		<!-- 问题描述 -->
		<view class="describeQa">
			<view class="describeQaPackage">
				<view class="afterSaleTypeTitle">
					<view class="line"></view>
					<span>问题描述</span>
				</view>
				<textarea placeholder="请详细填写申请原因，注意保持商品完好，建议您先与卖家沟通" v-model="detail" v-if="reasonPop==false"></textarea>
			</view>
		</view>
		<!-- 问题描述 -->

		<!-- 上传凭证 -->
		<view class="voucherUp">
			<view class="voucherUpPackage">
				<view class="afterSaleTypeTitle">
					<view class="line"></view>
					<span>上传凭证(最多6张)</span>
				</view>

				<view class="voucherUpBody">
					<!-- 预览模板 -->
					<view class="xlMb" v-for="(item, index) in imagse">
						<image :src="item" />
						<image @click="closePic(item)" :src="imgfixUrls + 'merchant/close.png'" class="closeButton" />
					</view>
					<!-- 预览模板 -->
					<view class="upLoad" @click="uploadFiles" v-if="imagse.length < 6">
						<image :src="imgfixUrls + 'merchant/cream.png'" />
					</view>
				</view>
			</view>
		</view>
		<!-- 上传凭证 -->

		<view class="full"></view>

		<!-- 底部导航栏 -->
		<view class="navBottom">
			<view>
				<span>
					退款金额：
					<span>¥{{ allprice }}</span>
				</span>
			</view>
			<view @click="afterSaleApply"><span>提交申请</span></view>
		</view>
		<!-- 底部导航栏 -->

		<!-- 退款原因 -->
		<PopManager :show="reasonPop" :type="reasonType" @clickmask="closeReasonPop">
			<view class="reasonPopView">
				<view class="reasonPopViewPackage">
					<view class="reasonTitle">
						<span>退款申请</span>
						<image :src="imgfixUrls + 'merchant/close.png'" @click="closeReasonPop" />
					</view>
					<view class="reasonButton" v-for="(items, indexs) in reasonList" @click="checkReason(indexs)">
						<span>{{ items }}</span>
						<view :class="reason == indexs ? 'reasonYCheck' : 'reasonNCheck'">
							<image :src="imgfixUrls + 'merchant/payCheck.svg'" v-if="reason == indexs" />
						</view>
					</view>
					<view class="reasonSubmitButton" @click="closeReasonPop"><span>确认</span></view>
				</view>
			</view>
		</PopManager>
		<!-- 退款原因 -->
	</view>
</template>

<script>
	import App from '@/common/js/app.js';
	import util from '@/common/js/util.js';
	import PopManager from '@/components/template/PopManager';
	import tuiNumberbox from '@/components/template/numberbox.vue';
	// #ifdef H5
	import wxApi from '@/common/js/wxApi.js';
	// #endif

	export default {
		components: {
			PopManager,
			tuiNumberbox
		},
		data() {
			return {
				reasonType: 'bottom',
				reasonPop: false,
				type: '',
				codes: [],
				AfterSaleInfo: {},
				id: null,
				plugin: null,
				detail: '',
				thumbs: [],
				allprice: 0,
				numbers:1,
				imagse: [],
				reasonList: [
					'预约不上',
					'商家营业但不接待',
					'商家建议其他平台/直接购买',
					'店里活动更优惠',
					'商家/停业/装修/转让',
					'朋友/网上评论不好',
					'买多了/买错了',
					'计划有变，没时间消费'
				],
				reason: 0,
				reasonText: ''
			};
		},
		onLoad: function(option) {
			let _this = this;
			this.id = option.id;
			this.plugin = option.plugin;
			_this.afterid = option.afterid || '';
			this.init();
			_this.reasonText = _this.reasonList[0];
		},
		methods: {
			change(e){
				console.log(e);
				if(e.value > this.AfterSaleInfo.surplusnum || e.value == 0) return
				this.numbers = e.value;
			},
			checkall(){
				let _this = this;
				if(_this.codes.length == _this.AfterSaleInfo.checkcodes.length){
					_this.AfterSaleInfo.checkcodes.map((item,index)=>{
					 _this.checkedCodes(item.checkcode, item.orderprice,false);
					})
				}else{
					_this.codes = [];
					_this.AfterSaleInfo.checkcodes.map((item,index)=>{
						_this.checkedCodes(item.checkcode, item.orderprice,true);
					})
				}
				

			},
			con() {
				let _this = this
				console.info(_this.reasonList)
				_this.reasonPop = true
			},
			init() {
				let _this = this;
				_this.getAfterSaleInfo();
				// #ifdef H5
				wxApi.wxRegister();
				// #endif
			},
			// 关闭弹窗
			closeReasonPop() {
				let _this = this;
				_this.reasonPop = false;
			},
			// 售后服务
			getAfterSaleInfo() {
				let _this = this;
				let data = {
					id: _this.id,
					plugin: _this.plugin,
					afterid: _this.afterid
				};
				App._post_form('&p=pay&do=afterSale', data, res => {
					_this.AfterSaleInfo = res.data;
					if(!_this.AfterSaleInfo.type){
						_this.AfterSaleInfo.type = [];
					}
					if(_this.AfterSaleInfo.type.length == 1){
						_this.checkType(_this.AfterSaleInfo.type);
					}
					if(_this.plugin == 'citydelivery'){
						_this.AfterSaleInfo.type = [1];
						_this.type = 1;
					}
					if (res.data.usestatus == '2') {
						_this.allprice = res.data.allprice
					}
				});
			},
			// 选择服务类型
			checkType(id) {
				let _this = this;
				_this.type = id;
			},
			checkReason(index) {
				let _this = this;
				_this.reason = index;
				_this.reasonText = _this.reasonList[index];
			},
			// 选择核销码
			checkedCodes(code, orderprice,flag) {
				let _this = this;
				orderprice = Number(orderprice);
				if (_this.codes.indexOf(code) !== -1 && !flag) {
					for (let i = 0; i < _this.codes.length; i++) {
						if (_this.codes[i] == code) {
							_this.codes.splice(i, 1);
						}
					}
					_this.allprice = util.subtractionFloat(_this.allprice, orderprice, 100);
					if (_this.allprice > _this.AfterSaleInfo.allprice) {
						_this.allprice = _this.AfterSaleInfo.allprice;
					}
				} else if(_this.codes.indexOf(code) == -1 && !flag){
					_this.codes.push(code);
					_this.allprice = util.additionFloat(_this.allprice, orderprice, 100);
					if (_this.allprice > _this.AfterSaleInfo.allprice) {
						_this.allprice = _this.AfterSaleInfo.allprice;
					}
				}else{
					_this.codes.push(code);
					_this.allprice = util.additionFloat(_this.allprice, orderprice, 100);
					if (_this.allprice > _this.AfterSaleInfo.allprice) {
						_this.allprice = _this.AfterSaleInfo.allprice;
					}
				}
				console.info(_this.codes);
			},
			// 删除图片
			closePic(item) {
				let _this = this;
				for (let i = 0; i < _this.imagse.length; i++) {
					if (item == _this.imagse[i]) {
						_this.imagse.splice(i, 1);
						_this.thumbs.splice(i, 1);
					}
				}
			},
			// 提交售后申请
			afterSaleApply() {
				let _this = this;
				let data = {
					id: _this.id,
					plugin: _this.plugin,
					type: _this.type,
					checkcodes: _this.codes,
					reason: _this.reasonText,
					detail: _this.detail,
					thumbs: _this.thumbs,
					afterid: _this.afterid,
					usestatus: _this.AfterSaleInfo.usestatus,
					num:_this.AfterSaleInfo.usestatus == 3?_this.numbers:''
				};
				if (_this.type == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择服务类型',
						duration: 2000
					});
					return;
				}
				if (_this.codes.length < 1 && _this.AfterSaleInfo.usestatus != '2' && _this.AfterSaleInfo.usestatus != '3') {
					uni.showToast({
						icon: 'none',
						title: '请选择核销码',
						duration: 2000
					});
					return;
				}
				if (_this.detail == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入问题描述',
						duration: 2000
					});
					return;
				}
				if(_this.AfterSaleInfo.tiptext){
					uni.showModal({
						title:'温馨提示',
						content:_this.AfterSaleInfo.tiptext,
						success(res) {
							if(res.confirm){
								_this.saveForm('1')
								App._post_form('&p=pay&do=afterSaleApply', data, res => {
									uni.showToast({
										icon: 'none',
										title: '申请退款成功',
										duration: 2000,
										success: function() {
											setTimeout(function() {
												uni.navigateBack({
													delta: 1
												});
											}, 2000);
										}
									});
								});
							}
						}
					})
				}else{
					_this.saveForm('1')
					App._post_form('&p=pay&do=afterSaleApply', data, res => {
						uni.showToast({
							icon: 'none',
							title: '申请退款成功',
							duration: 2000,
							success: function() {
								setTimeout(function() {
									uni.navigateBack({
										delta: 1
									});
								}, 2000);
							}
						});
					});
				}
				
				
			},
			// 文件上传接口
			async uploadFiles(type) {
				let _this = this;
				// #ifdef H5
				if(App.getClientType() == 2){
					let res = await App.browser_upload(6);
				    console.info(res);
				    for (let i = 0; i < res.tempFilePaths.length; i++) {
				    	let aa = await App._upLoad(res.tempFilePaths[i]);
				    	_this.thumbs.push(aa.data.image);
				    	_this.imagse.push(aa.data.img);
				    }
					return
				}
				wxApi.choseImage(res => {
					wxApi.uoloadIg(res.localIds[0], data => {
						if (data.errMsg === 'uploadImage:ok') {
							uni.showLoading();
							let requestData = {
								upload_type: 2,
								id: data.serverId
							};
							App._post_form(
								'&do=uploadFiles',
								requestData,
								res => {
									if (res.errno === 0) {
										_this.thumbs.push(res.data.image);
										_this.imagse.push(res.data.img);
									}
									uni.hideLoading();
								},
								fail => {
									uni.hideLoading();
								}
							);
						} else {
							uni.hideLoading();
							App.showError('上传失败');
						}
					});
				});
				// #endif
				// #ifndef H5
				wx.chooseImage({
					count: 6,
					sourceType: ['album', 'camera'],
					success: async function(res) {
						console.info(res);
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							let aa = await App._upLoad(res.tempFilePaths[i]);
							_this.thumbs.push(aa.data.image);
							_this.imagse.push(aa.data.img);
						}
					}
				});
				// #endif
			}
		}
	};
</script>

<style lang="less" scoped>
	.reasonNCheck {
		margin-top: 20upx;
		width: 32upx;
		height: 32upx;
		border: 1upx solid rgba(204, 204, 204, 1);
		border-radius: 16upx;
	}

	.reasonSubmitButton {
		margin: 24upx auto 0 auto;
		width: 688upx;
		height: 80upx;
		background: rgba(255, 68, 68, 1);
		border-radius: 40upx;
		text-align: center;

		>span {
			line-height: 80upx;
			font-size: 28upx;
			color: rgba(255, 255, 255, 1);
		}
	}

	.reasonYCheck {
		margin-top: 20upx;
		line-height: 70upx;
		width: 32upx;
		height: 32upx;
		border-radius: 16upx;
		background: #ff4444;

		>image {
			width: 32upx;
			height: 32upx;
		}
	}

	.reasonButton {
		display: flex;
		justify-content: space-between;
		height: 70upx;

		>span {
			line-height: 70upx;
			font-size: 24upx;
			lor: rgba(51, 51, 51, 1);
		}
	}

	.reasonTitle {
		height: 50upx;
		text-align: center;

		>span {
			vertical-align: middle;
			line-height: 50upx;
			font-size: 30upx;
			lor: rgba(51, 51, 51, 1);
		}

		>image {
			margin-top: 15upx;
			vertical-align: middle;
			float: right;
			width: 28upx;
			height: 28upx;
		}
	}

	.reasonPopViewPackage {
		padding: 30upx;

		>.reasonButton:nth-child(2) {
			margin-top: 40upx !important;
		}
	}

	.reasonPopView {
		width: 750upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 20upx 20upx 0px 0px;
	}

	.closeButton {
		width: 34upx !important;
		height: 34upx !important;
		position: relative;
		bottom: 130upx;
		left: 95upx;
	}

	.xlMb {
		width: 133upx;
		height: 134upx;
		border-radius: 6upx;
		overflow: hidden;

		>image:nth-child(1) {
			width: 133upx;
			height: 134upx;
		}

		>image:nth-child(2) {
			left: 100upx;
			position: relative;
			bottom: 134upx;
			width: 30upx;
			height: 30upx;
		}
	}

	.voucherUpBody {
		flex-wrap: wrap;
		margin-top: 20upx;

		>view:nth-child(1) {
			margin-left: 0;
		}

		>view {
			margin-top: 20upx;
			vertical-align: middle;
			display: inline-block;
			margin-right: 25upx;
		}
	}

	.upLoad {
		width: 133upx;
		height: 132upx;
		border: 1upx dashed rgba(204, 204, 204, 1);
		border-radius: 6upx;
		text-align: center;

		>image {
			margin: 33upx 0 0 0;
			width: 66upx;
			height: 66upx;
		}
	}

	.navBottom {
		display: flex;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		width: 750upx;
		height: 97upx;
		background: rgba(255, 255, 255, 1);
		border: 1upx solid rgba(238, 238, 238, 0.67);

		>view:nth-child(1) {
			padding: 35upx 30upx;

			>span {
				font-size: 24upx;

				color: rgba(51, 51, 51, 1);

				>span {
					color: #fe504f;
				}
			}
		}

		>view:nth-child(2) {
			width: 302upx;
			height: 97upx;
			background: rgba(255, 68, 68, 1);
			text-align: center;

			>span {
				line-height: 97upx;
				font-size: 28upx;

				color: rgba(255, 255, 255, 1);
			}
		}
	}

	.full {
		width: 750upx;
		height: 135upx;
	}

	.voucherUpPackage {
		padding: 30upx;
	}

	.voucherUp {
		margin: 20upx auto 0 auto;
		width: 688upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 10upx;
	}

	.describeQaPackage {
		padding: 30upx;

		>textarea {
			height: 238upx;
			width: 570upx;
			padding: 30upx;
			background: rgba(249, 249, 249, 1);
			margin: 20upx 0 0 0;
			font-size: 24upx;

			color: rgba(51, 51, 51, 1);
		}
	}

	.describeQa {
		margin: 20upx auto 0 auto;
		width: 690upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 10upx;
	}

	.checkReasonPackage {
		padding: 30upx;
		display: flex;
		justify-content: space-between;

		>span {
			vertical-align: middle;
			font-size: 28upx;

			color: rgba(51, 51, 51, 1);
		}

		>view {
			vertical-align: middle;
			display: inline-block;

			>span {
				vertical-align: middle;
				font-size: 24upx;

				color: rgba(153, 153, 153, 1);
			}

			>image {
				vertical-align: middle;
				width: 10px;
				height: 15px;
			}
		}
	}

	.checkReason {
		margin: 20upx auto 0 auto;
		width: 690upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 10upx;
	}

	.checkedCode {
		background: rgba(255, 68, 68, 1);

		>image {
			width: 32upx;
			height: 32upx;
		}
	}

	.checkCodeBody {
		padding: 30upx;

		>view {
			margin-top: 30upx;
			display: flex;
			justify-content: space-between;

			>span {
				vertical-align: middle;
				font-size: 24upx;

				color: rgba(51, 51, 51, 1);

				>span {
					color: #999999;
					margin-left: 35upx;
				}
			}

			>view {
				vertical-align: middle;
				width: 32upx;
				height: 32upx;
				border: 1upx solid rgba(204, 204, 204, 1);
				border-radius: 6upx;
			}
		}

		>view:nth-child(1) {
			margin-top: 0;
		}
	}

	.checkCodeTitle {
		padding: 30upx;
		border-bottom: 1upx solid rgba(238, 238, 238, 1);

		>span {
			font-size: 28upx;

			color: rgba(51, 51, 51, 1);

			>span {
				font-size: 24upx;
				color: #999999;
			}
		}
	}

	.checkCodeTitlePackage {
		padding: 30upx;
		border-bottom: 1upx solid rgba(238, 238, 238, 1);
	}

	.checkCode {
		margin: 20upx auto 0 auto;
		width: 690upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 10upx;
	}

	.check {
		background: rgba(255, 68, 68, 1) !important;
		border: 1upx solid rgba(0, 0, 0, 0) !important;

		>span {
			color: rgba(255, 255, 255, 1) !important;
		}
	}

	.afterSaleTypeBody {
		margin-top: 40upx;
		display: flex;
		justify-content: space-between;

		>view {
			width: 160upx;
			height: 57upx;
			border: 1upx solid rgba(204, 204, 204, 1);
			border-radius: 10upx;
			display: inline-block;
			vertical-align: middle;
			text-align: center;

			>span {
				line-height: 57upx;
				font-size: 24upx;

				color: rgba(153, 153, 153, 1);
			}
		}
	}

	.line {
		vertical-align: middle;
		display: inline-block;
		width: 8upx;
		height: 26upx;
		background: rgba(255, 68, 68, 1);
		border-radius: 4upx;
	}

	.afterSaleTypeTitle {
		>span {
			margin-left: 15upx;
			vertical-align: middle;
			font-size: 28upx;

			color: rgba(51, 51, 51, 1);
		}
	}

	page {
		overflow-x: hidden;
	}

	.afterSale {
		background: #f8f8f8;
		font-size: 0;
	}

	.orderInfo {
		width: 750upx;
		background: rgba(255, 255, 255, 1);
	}

	.orderInfoPackage {
		padding: 30upx;

		>view {
			display: inline-block;
			vertical-align: top;
		}
	}

	.orderInfoImg {
		width: 170upx;
		height: 170upx;
		border-radius: 10upx;
		overflow: hidden;

		>image {
			width: 170upx;
			height: 170upx;
		}
	}

	.orderInfos {
		width: 483upx;
		margin-left: 20upx;

		>view:nth-child(1) {
			height: 70upx;
			overflow: hidden;

			>span {
				font-size: 28upx;

				color: rgba(51, 51, 51, 1);
			}
		}

		>view:nth-child(2) {
			margin: 15upx 0 0 0;
			display: flex;
			justify-content: space-between;

			>span {
				font-size: 24upx;

				color: rgba(153, 153, 153, 1);
			}
		}

		>view:nth-child(3) {
			margin: 20upx 0 0 0;

			>span {
				font-size: 24upx;

				color: rgba(254, 80, 79, 1);
			}
		}
	}

	.afterSaleType {
		margin: 20upx auto 0 auto;
		width: 690upx;
		background: rgba(255, 255, 255, 1);
		border-radius: 10upx;
	}

	.afterSaleTypePackage {
		padding: 30upx;
	}
	.allcheck{
		padding: 3upx 20upx;
		border-radius: 8upx;
		border: 1upx solid #FF4444;
		color: #FF4444;
		float: right;
		height: 35upx;
		line-height: 35upx;
	}
</style>
