<template>
	<loadlogo v-if="loading == true"></loadlogo>
	
	<scroll-view class="afterDatli" v-else :style="{ height: phoneHight, backgroundImage: afterBack }" :scroll-y="true">
		<far-bottom></far-bottom>
		<view class="main">
			<view class="mainPackage">
				<view class="tips">
					<image :src="afterDetail.status == '1' ? cl : afterDetail.status == '2' ? wc : jjue"></image>
					<text>{{ statusList[afterDetail.status] }}</text>
				</view>
				<view class="goods">
					<view class="goodsPackage">
						<view class="goodsTitle">
							<view class="titleLeft"><image :src="afterDetail.goodsthumb"></image></view>
							<view class="titleRight">
								<view class="rightTitle">{{ afterDetail.goodsname }}</view>
								<view class="rightBody" v-if="afterDetail.optionname">规格：{{ afterDetail.optionname }}</view>
								<view class="rightFoot">
									<text>¥{{ afterDetail.price }}</text>
									<text v-if="afterDetail.optionname > 0">x{{ afterDetail.num }}</text>
								</view>
							</view>
						</view>
						<view class="bodyBottom">
							<view>
								<text>售后类型</text>
								<text>{{ typeList[afterDetail.type] }}</text>
							</view>
							<view>
								<text>退款金额</text>
								<text class="colorFF4444">¥{{ afterDetail.refundmoney }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="afterProcess">
					<view class="afterProcessPackage">
						<block>
							<view class="logis bor-radius-10 b-f m-btm20">
								<view class="p-right-30">
									<view class="logis-list p-top-bom-40">
										<view class="loggis-section">
											<view v-for="(items, index) in afterDetail.journal" :key="index">
												<view class="loggis-move">
													<view class="flex-y-center">
														<view class="dis-flex">
															<block v-if="index === 0">
																<view class="Icon-bg"><view class="icon-line iconfont icon-check col-f"></view></view>
															</block>
															<block v-else><view class="circle-seg"></view></block>
															<view class="flex-box ">
																<view class="title">
																	<text>{{ items.title }}</text>
																</view>
															</view>
														</view>
														<view class="dis-flex">
															<view class="flex-box ">
																<view class="title">
																	<text style="padding-left: 50upx;">{{ items.detail }}</text>
																</view>
															</view>
														</view>
														<!-- <view class="dis-flex">
															<view class="flex-box ">
																<view class="title">
																	<text style="padding-left: 50upx;">手机号码:{{ items.ascflag }}</text>
																</view>
															</view>
														</view> -->
														<view class="dis-flex">
															<view class="flex-box ">
																<view class="title">
																	<text style="padding-left: 50upx;">申请时间:{{ items.time }}</text>
																</view>
															</view>
														</view>
														<view class="verMid uploadButton f-r dis-flex vox" style="flex-wrap: wrap;justify-content: space-between;">
															<!-- 图片预览循环模板 -->
															<block v-for="(itemis, index) in items.thumbs" class="verMid" style="flex: 0.33;" >
																<view class="imgPreview verMid" style="position: relative;padding: 10upx;">
																	<image :src="itemis" style="width: 180upx;height: 180upx;" />
																</view>
															</block>
														</view>
														
														<view class="processBody dis-flex">
															<block><view class="floatLeft"></view></block>
															<text>{{ items.content }}</text>
														</view>
													</view>
												</view>
												<!-- <view class="logg-dotted" v-if="loggDataDetail.list.length>0&&index<loggDataDetail.list.length-1"></view> -->
											</view>
										</view>
									</view>
								</view>
							</view>
						</block>
						<view class="processImage">
							<view v-for="(items, index) in afterDetail.thumbs" :key="index"><image :src="items"></image></view>
						</view>
					</view>
				</view>
				<view class="foot" v-if="afterDetail.status != '2'">
					<view class="buttonViewPackage">
						<view></view>
						<view class="buttonView">
							<view class="cx" v-if="afterDetail.status == '3'" @click="goTk"><text>重新申请</text></view>
							<view class="cex" @click="revokeSaleAfter" :class="dontCheck?'':'cantCheck'" v-if="afterDetail.status == '1' && afterDetail.hiderevoke == 0"><text>撤销申请</text></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
import App from '@/common/js/app.js';
import loadlogo from '@/components/template/loadlogo';
// #ifdef H5
import wxApi from '@/common/js/wxApi.js';
// #endif
export default {
	components: {
		loadlogo
	},
	data() {
		return {
			loading: true,
			phoneHight: null,
			back: null,
			afterDetail: {},
			typeList: ['', '退款'],
			statusList: ['', '处理中', '已完成', '被驳回'],
			dontCheck:true,
			id:null,
			orderno:'',
			plugin:''
		};
	},
	onLoad(e) {
		let _this = this;
		_this.init(e.id);
		_this.plugin=e.plugin
		_this.orderno=e.orderno
		_this.id=e.id
		uni.getSystemInfo({
			success(res) {
				_this.phoneHight = res.windowHeight + 'px';
			}
		});
	},
	computed: {
		afterBack() {
			let _this = this;
			return 'url(' + _this.imageRoot + 'afterBack.png' + ')';
		},
		cl() {
			let _this = this;
			return _this.imageRoot + 'cl.png';
		},
		jjue() {
			let _this = this;
			return _this.imageRoot + 'jjue.png';
		},
		wc() {
			let _this = this;
			return _this.imageRoot + 'wc.png';
		}
	},
	methods: {
		init(id) {
			let _this = this;
			_this.saleAfterDetail(id);
		},
		goTk(){
			let _this=this
			App.navigationTo({
				navType:'rediRect',
				url:'pages/subPages/orderList/afterSale/afterSale?afterid='+_this.id+"&id="+_this.orderno+"&plugin="+_this.plugin
			})
		},
		// 撤销申请接口
		revokeSaleAfter(){
			let _this=this
			uni.showModal({
			    title: '提示',
			    content: '确定撤销申请?',
			    success: function (res) {
			        if (res.confirm) {
						let data={
							id:_this.id
						}
			           App._post_form('&p=pay&do=revokeSaleAfter',data,res=>{
			           	uni.showToast({
							icon:"none",
			           	    title: '撤销成功',
			           	    duration: 2000
			           	});
						_this.dontCheck=false
						setTimeout(over,2000)
						function over(){
							App.navigationTo({
								navType:'rediRect',
								url:'pages/subPages/afterSale/index'
							})
						}
			           },
					   fail=>{
						   uni.showToast({
						   	icon:"none",
						       title: '撤销失败',
						       duration: 2000
						   });
					   })
			        } else if (res.cancel) {
			            
			        }
			    }
			});
			
		},
		// 售后详情页面
		saleAfterDetail(id) {
			let _this = this;
			let data = {
				id: id
			};
			App._post_form('&p=pay&do=saleAfterDetail', data, res => {
				_this.loading = false;
				_this.afterDetail = res.data;
			});
		}
	}
};
</script>

<style lang="less">
.cantCheck{
	pointer-events:none;
}
.vox{
	padding-top: 8upx;
}
.vox:after{
		content: '';
		width: 30%;
	}
.cx {
	display: inline-block;
	width: 164upx;
	height: 60upx;
	border: 1upx solid rgba(238, 238, 238, 1);
	border-radius: 30upx;
	text-align: center;
	> text {
		font-size: 24upx;
		color: rgba(51, 51, 51, 1);
		line-height: 60upx;
	}
}
.cex {
	margin-left: 24upx;
	display: inline-block;
	width: 164upx;
	height: 60upx;
	background: rgba(255, 68, 68, 1);
	border-radius: 30upx;
	text-align: center;
	> text {
		font-size: 24upx;
		color: rgba(255, 255, 255, 1);
		line-height: 60upx;
	}
}
.foot {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 750upx;
	height: 97upx;
	background: rgba(255, 255, 255, 1);
	border-top: 1upx solid rgba(238, 238, 238, 1);
}
.buttonViewPackage {
	display: flex;
	justify-content: space-between;
	padding: 19upx 30upx;
}
.processImage {
	margin-left: 55upx;
	> view {
		margin: 0 10upx 10upx 0;
		display: inline-block;
		width: 179upx;
		height: 179upx;
		background: rgba(0, 0, 0, 1);
		border-radius: 8upx;
		overflow: hidden;
		> image {
			width: 179upx;
			height: 179upx;
		}
	}
}
.processBody {
	margin-top: 19upx;
	> text {
		font-size: 24upx;
		color: rgba(153, 153, 153, 1);
	}
}
.title {
	display: flex;
	justify-content: space-between;
	padding-bottom: 20upx;
	font-size: 28upx;
	> text:nth-child(1) {
		font-size: 28upx;
		color: rgba(153, 153, 153, 1);
	}
	> text:nth-child(2) {
		font-size: 24upx;
		color: rgba(153, 153, 153, 1);
	}
}
.afterProcessPackage {
	padding: 0 30upx 40upx 30upx;
}
.afterProcess {
	margin-top: 20upx;
	width: 690upx;
	background: rgba(255, 255, 255, 1);
	border-radius: 10upx;
}
.colorFF4444 {
	color: #ff4444 !important;
}
.bodyBottom {
	margin-top: 35upx;
	> view {
		margin-top: 30upx;
		display: flex;
		justify-content: space-between;
		> text {
			font-size: 24upx;
			color: rgba(102, 102, 102, 1);
		}
	}
}
.rightFoot {
	display: flex;
	justify-content: space-between;
	margin-top: 30upx;
	> text:nth-child(1) {
		font-size: 28upx;
		color: rgba(255, 68, 68, 1);
	}
	> text:nth-child(2) {
		font-size: 28upx;
		color: rgba(153, 153, 153, 1);
	}
}
.rightBody {
	margin-top: 10upx;
	font-size: 24upx;
	color: rgba(153, 153, 153, 1);
}
.rightTitle {
	height: 70upx;
	font-size: 28upx;
	color: rgba(51, 51, 51, 1);
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.titleRight {
	height: 170upx;
	width: 440upx;
}

.goodsTitle {
	display: flex;
	justify-content: space-between;
}
.titleLeft {
	width: 170upx;
	height: 170upx;
	border-radius: 6upx;
	overflow: hidden;
	> image {
		width: 170upx;
		height: 170upx;
	}
}
.goodsPackage {
	padding: 27upx 30upx;
}
.goods {
	margin-top: 37upx;
	width: 690upx;
	height: 369upx;
	background: rgba(255, 255, 255, 1);
	border-radius: 10upx;
}
.tips {
	margin-top: ;
	> image {
		vertical-align: middle;
		width: 30upx;
		height: 30upx;
	}
	> text {
		vertical-align: middle;
		margin-left: 17upx;
		font-size: 30upx;
		color: rgba(255, 255, 255, 1);
	}
}
.afterDatli {
	background-image: ;
	font-size: 0;
	background: #f8f8f8;
	background-size: 750upx auto;
	background-repeat: no-repeat;
}
.mainPackage {
	padding: 53upx 30upx 127upx 30upx;
}

.goods_detail .goods_image {
	margin-right: 28upx;
	width: 170upx;
	height: 170upx;
	border-radius: 6upx;
	background-repeat: no-repeat;
	background-size: 170upx 170upx;
	background-position: center;
}

/**
	 * 订单物流
	 */
.logis-title {
	border-bottom: 1px solid #f0f0f0;
}

.logis-list .logis-date {
	word-wrap: break-word;
	word-break: normal;
}

.Icon-bg {
	width: 30upx;
	height: 30upx;
	line-height: 30upx;
	border-radius: 50%;
	background: #ff4444;
	text-align: center;
	margin: 0 22upx 0 0;
	position: relative;
	z-index: 5;
}

.icon-line {
	font-size: 28upx !important;
}

.loggis-move .address {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.logis-list-header::after {
	content: ' ';
	position: relative;
	left: 7%;
	width: 2upx;
	height: 120upx;
	border-left: 1px solid #eeeeee;
	margin: -46upx 0;
}

.pd-left {
	padding-left: 6%;
}

.logg-dotted {
	position: relative;
	left: 7%;
	width: 2upx;
	height: 120upx;
	border-left: 1px solid #eeeeee;
	margin: -46upx 0;
}

.circle-seg {
	width: 16upx;
	height: 16upx;
	border-radius: 50%;
	background: #f0f0f0;
	margin: 0 30upx 0 10upx;
	position: relative;
	z-index: 2;
}
.floatLeft {
	width: 16upx;
	height: 16upx;
	margin: 0 30upx 0 10upx;
	position: relative;
	z-index: 2;
}
.Icon-bg-presen {
	background-color: #ffd940;
	color: #333333 !important;
}
</style>
