<template>
	<loadlogo v-if="false"></loadlogo>
	
	<scroll-view class="afterSale" v-else :style="{ height: phoneHeight }" :scroll-y="true" :lower-threshold="0" @scrolltolower="load">
		<far-bottom></far-bottom>
		<!-- 头部导航栏 -->
		<view class="topNav">
			<view :class="type == 0 ? 'check' : ''" @click="checkType(0)">
				<view><span>{{languageStatus!=1?'全部':'전체'}}</span></view>
				<view v-if="type == 0"></view>
			</view>
			<view :class="type == 1 ? 'check' : ''" @click="checkType(1)">
				<view><span>{{languageStatus!=1?'处理中':'처리중'}}</span></view>
				<view v-if="type == 1"></view>
			</view>
			<view :class="type == 2 ? 'check' : ''" @click="checkType(2)">
				<view><span>{{languageStatus!=1?'已完成':'완료'}}</span></view>
				<view v-if="type == 2"></view>
			</view>
		</view>
		<!-- 头部导航栏 -->
		<!-- 填充区域 -->
		<view class="full"></view>
		<!-- 填充区域 -->
		<!-- 列表区域 -->
		<noneMores v-if="total == 0"></noneMores>
		<view class="mian" v-if="total != 0">
			<view class="Listmb" v-for="(item, index) in list" @click="godatli(item.id,item.plugin,item.orderid)">
				<view class="ListmbPackage">
					<view class="mbTitle diy-nav-list border-line border-bottom">
						<span class="color333333 font24">订单号：{{item.orderno}}</span>
						<span class="font24 colorFF4444">{{ typeList[item.status] }}</span>
					</view>
					<view class="mbBody ">
						<view class="mbBodyPackage diy-nav-list border-line border-bottom">
							<view class="bodyLeft"><image :src="item.goodsthumb"></image></view>
							<view class="bodyRight">
								<view class="rightTitle">{{item.goodsname}}</view>
								<view class="rightBody" v-if="item.optionname"><text>规格：{{item.optionname}}</text></view>
								<view class="rightFoot">
									<text>¥{{item.price}}</text>
									<text v-if="item.num > 0">x{{item.num}}</text>
								</view>
							</view>
							
						</view>
					</view>
					<view class="mbFoot">
						<view class="mbFootPackage">
							<view></view>
							<view class="buttonPackage">
								<view class="xqButton"><text>查看详情</text></view>
								<view class="cxButton" v-if="item.status=='1'" @click.stop="revokeSaleAfter(item.id)"><text>撤销申请</text></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="tips" v-if="total != 0"><loadmore :isMore="isMore"></loadmore></view>
		<!-- 列表区域 -->
	</scroll-view>
</template>

<script>
import loadlogo from '@/components/template/loadlogo';
import App from '@/common/js/app.js';
// #ifdef H5
import wxApi from '@/common/js/wxApi.js';
// #endif
import loadmore from '@/components/template/loadmore';
import noneMores from '@/components/template/nonemores.vue';
export default {
	components: {
		loadlogo,
		loadmore,
		noneMores,
	},
	data() {
		return {
			phoneHeight: null,
			type: 0,
			typeList: ['','处理中', '已完成', '已拒绝'],
			isMore:true,
			page:1,
			total:null,
			list:[]
		};
	},
	onLoad(e) {
		let _this = this;
		_this.init();
	},
	methods: {
		init() {
			let _this = this;
			uni.getSystemInfo({
				success(res) {
					_this.phoneHeight = res.windowHeight + 'px';
				}
			});
			_this.saleAfterList()
		},
		godatli(id,plugin,orderid){
			App.navigationTo({
				url:'pages/subPages/afterSale/afterDatli/afterDatli?id='+id+"&plugin="+plugin+"&orderno="+orderid
			})
		},
		checkType(type) {
			let _this = this;
			_this.type = type;
			_this.list=[]
			_this.page=1
			_this.saleAfterList();
		},
		load(){
			let _this=this
			if(_this.total==_this.page){
				_this.isMore=true
			}else{
				_this.page++
				_this.saleAfterList();
			}
		},
		// 撤销申请接口
		revokeSaleAfter(id){
			let _this=this
			uni.showModal({
			    title: '提示',
			    content: '确定撤销申请?',
			    success: function (res) {
			        if (res.confirm) {
						let data={
							id:id
						}
			           App._post_form('&p=pay&do=revokeSaleAfter',data,res=>{
			           	uni.showToast({
							icon:"none",
			           	    title: '撤销成功',
			           	    duration: 2000
			           	});
						_this.list=[]
						_this.page=1
						_this.saleAfterList()
			           },
					   fail=>{
						   uni.showToast({
						   	icon:"none",
						       title: '撤销失败',
						       duration: 2000
						   });
					   })
			        } else if (res.cancel) {
			            
			        }
			    }
			});
			
		},
		// 售后列表接口
		saleAfterList(){
			let _this=this
			let data={
				pindex:_this.page,
				status:_this.type
			}
			_this.isMore=false
			App._post_form('&p=pay&do=saleAfterList',data,res=>{
				_this.list=[..._this.list,...res.data.list] 
				_this.total=res.data.total
				_this.isMore=true
			})
		},
	}
};
</script>

<style lang="less">
	
.tips {
	width: 750upx;
	height: 60upx;
}
.xqButton {
	display: inline-block;
	width: 163upx;
	height: 60upx;
	border: 1upx solid rgba(238, 238, 238, 1);
	border-radius: 30upx;
	text-align: center;
	> text {
		line-height: 60upx;
		font-size: 24upx;
		color: rgba(51, 51, 51, 1);
	}
}
.cxButton {
	margin-left: 24upx;
	display: inline-block;
	width: 164upx;
	height: 60upx;
	background: rgba(255, 68, 68, 1);
	border-radius: 30upx;
	text-align: center;
	> text {
		line-height: 60upx;
		font-size: 24upx;
		color: rgba(255, 255, 255, 1);
	}
}
.mbFootPackage {
	padding: 20upx 0 0 0;
	display: flex;
	justify-content: space-between;
	> view {
		display: inline-block;
	}
}
.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;
}
.bodyRight {
	height: 170upx;
	width: 440upx;
}
.bodyLeft {
	width: 170upx;
	height: 170upx;
	border-radius: 6upx;
	overflow: hidden;
	> image {
		width: 170upx;
		height: 170upx;
	}
}
.font24 {
	font-size: 24upx;
}
.color333333 {
	color: #333333;
}
.colorFF4444 {
	color: #ff4444;
}
.mbBodyPackage {
	padding: 26upx 0upx;
	height: 178upx;
	display: flex;
	justify-content: space-between;
	> view {
		display: inline-block;
	}
}
.mbBody {
	height: 230upx;
}
.mbTitle {
	display: flex;
	justify-content: space-between;
	height: 50upx;
}
.ListmbPackage {
	padding: 30upx;
}
.Listmb {
	margin: 20upx auto 0 auto;
	width: 690upx;
	height: 414upx;
	background: rgba(255, 255, 255, 1);
	border-radius: 10upx;
}
.full {
	height: 84upx;
}
.mian {
	padding: 0 30upx 0upx 30upx;
}
.check {
	overflow: hidden;
	display: inline-block;
	vertical-align: top;
	width: 20%;

	> view {
		overflow: hidden;
		height: 76upx;
		margin: auto;
		width: 85upx;
		text-align: center;

		> span {
			line-height: 80upx !important;
			font-size: 28upx !important;

			font-weight: bold !important;
			color: rgba(51, 51, 51, 1) !important;
		}
	}
}
.afterSale {
	font-size: 0;
	background: #f9f9f9;
}
.topNav {
	display: flex;
	justify-content: space-around;
	z-index: 999;
	position: fixed;
	width: 750upx;
	height: 84upx;
	background: rgba(255, 255, 255, 1);
	overflow: hidden;
	> view {
		overflow: hidden;
		display: inline-block;
		vertical-align: top;
		width: 20%;
		position: relative;
		> view:nth-child(1) {
			overflow: hidden;
			height: 77upx;
			margin: auto;
			width: 85upx;
			text-align: center;
			> span {
				line-height: 77upx;
				font-size: 24upx;
				color: rgba(51, 51, 51, 1);
			}
		}
		> view:nth-child(2) {
			margin: auto;
			position: absolute;
			left: 50%;
			bottom: 0;
			width: 32px;
			height: 4px;
			background: #ff4444;
			border-radius: 4px 4px 0 0;
			-webkit-transform: translateX(-50%);
			-ms-transform: translateX(-50%);
			transform: translateX(-50%);
		}
	}
}
</style>
