<template>
	<view class="page1">
		<view class="title">
			<view class="title-sreach">
				<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}">
					<uni-icons type="left" size="28"></uni-icons>
				</view>
				<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}">
					兼职主页
				</view>
			</view>
		</view>
		<view class="content">
			<view class="box1" style="display: flex;">
				<view class="">
					待退款/售后{{returnCount}}
				</view>
			</view>
			<view class="box1" v-for="(item,index) in returnData" :key="index">
				<view class="ziqu-xuanfu" v-if="item.status == 0" style="background:red">
					待退款
				</view>
				<view class="ziqu-xuanfu" v-if="item.status == 3" style="background:red">
					待售后
				</view>
				<view class="ziqu-xuanfu" v-if="item.refundType == 1" style="background:red">
					退商品
				</view>
				<view class="ziqu-xuanfu" v-if="item.refundType == 2" style="background:red">
					退配送费
				</view>
				<view class="ziqu-xuanfu" v-if="item.refundType == 3" style="background:red">
					全额退款
				</view>
				<view class="ziqu-xuanfu" v-if="item.refundTypeStatus == 1" style="background:red">
					商家原因
				</view>
				<view class="ziqu-xuanfu" v-if="item.refundTypeStatus == 2" style="background:red">
					配送原因
				</view>
				<view class="ziqu-xuanfu" v-if="item.refundTypeStatus == 3" style="background:red">
					商家/配送都有原因（需要退配送费）
				</view>
				<view class="ziqu-xuanfu" v-if="item.refundTypeStatus == 4" style="background:red">
					平台退款
				</view>
				<view style="height: 100rpx;border-bottom: 1px solid #F5F5F5;display: flex;line-height: 100rpx;">
					<view style="font-size: 24rpx;font-weight: 700;">
						金额<text style="color: red;">￥{{item.refundAmount}}</text>
					</view>
				</view>
				<view class="bottom-btn">
					<view class="btn1"  @tap="orderDetailOpen(item)">
						查看订单
					</view>
					<view class="btn1" @tap="returnAmountAllow(item,0)"
						style="background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));color: #000;">
						不同意
					</view>
					<view class="btn1" @tap="returnAmountAllow(item,1)"
						style="background: linear-gradient(90deg, rgba(227, 255, 150, 1), rgba(166, 255, 234, 1));color: #000;">
						同意
					</view>
					<!-- <view class="btn1">
						删除订单
					</view> -->
				</view>
			</view>
			
			<uni-popup ref="orderPopup" background-color="#fff">
				<view class="popup-area-content" style="height: 1200rpx;overflow: scroll;">
					<view class="popup-area-title">
						<text>订单详情</text>
					</view>
					<view class="box1">
						<view style="width: 100%;line-height: 70rpx;font-size: 28rpx;font-weight: 700;">
							{{orderDetail.shopName}} 
							<img @tap="makeCall(orderDetail.shopPhone)"
								src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/869a7af6a1c24bf3a0d523c4a18b55c6.png"
								alt="" style="width: 60rpx;height: 60rpx;" />
						</view>
						
						<view  v-for="(item1,index1) in goodsList" :key="index1"   v-if="goodsList != null && goodsList.length > 0" style="display: flex;padding: 20rpx;background: #eee;border-radius: 20rpx;">
							<view class="goods-img">
								<img :src="item1.productPicture" alt="">
							</view>
							<view class="goods-content">
								<view class="goods-name">
									{{item1.productName}}
								</view>
								<view class="goods-content-center">
									<view class="goods-deal1">
										{{item1.specs}}
									</view>
								</view>
								<view class="goods-content-bottom">
									<view style="width: 50%;">
										X{{item1.quantity}}
									</view>
									<view class="pintuan-left-price">
										￥{{item1.price}}
									</view>
								</view>
							</view>
						</view>
						<view>
							<view style="height: 80rpx;line-height: 80rpx;display: flex;" v-if="orderDetail.packageFee != null && orderDetail.packageFee > 0">
								<view style="flex: 1;color: #777;font-weight: 700;">
									打包费
								</view>
								<view style="color: #000;font-weight:700;">
									￥{{orderDetail.packageFee}}
								</view>
							</view>
							<view style="height: 80rpx;line-height: 80rpx;display: flex;" v-if="orderDetail.deliveryType == 1">
								<view style="flex: 1;color: #777;font-weight: 700;">
									配送费
								</view>
								<view style="color: #000;font-weight:700;">
									￥{{orderDetail.deliveryFee}}
								</view>
							</view>
							<view style="height: 80rpx;line-height: 80rpx;display: flex;">
								<view style="flex: 1;color: #777;font-weight: 700;">
									优惠券
								</view>
								<view style="color: #000;font-weight:700;">
									-￥1 <uni-icons type="right" size="12"></uni-icons>
								</view>
							</view>
						</view>
						<view style="display: flex;height: 80rpx;line-height: 100rpx;border-top: 1px solid #eee;font-size: 32rpx;font-weight: 700;">
							<view style="flex: 1;">
								实付
							</view>
							<view class="">
								￥{{orderDetail.totalAmount}}
							</view>
						</view>
					</view>
					<view class="box1">
						<view>
							<!-- <view style="height: 80rpx;line-height: 80rpx;display: flex;">
								<view style="flex: 1;color: #777;font-weight: 700;">
									收件地址
								</view>
								<view style="color: #000;font-weight: 700;">
									北校区1号宿舍楼5楼512(0702)
								</view>
							</view> -->
							<view style="height: 80rpx;line-height: 80rpx;display: flex;" v-if="orderDetail.numberCode != null">
								<view style="flex: 1;color: #777;font-weight: 700;">
									订单号
								</view>
								<view style="color: #000;font-weight: 700;">
									{{orderDetail.numberCode}}
								</view>
							</view>
							<view style="height: 80rpx;line-height: 80rpx;display: flex;">
								<view style="flex: 1;color: #777;font-weight: 700;">
									下单时间
								</view>
								<view style="color: #000;font-weight: 700;">
									{{orderDetail.createTime | formatISOTime}}
								</view>
							</view>
							<view style="height: 80rpx;line-height: 80rpx;display: flex;" v-if="orderDetail.shopMakeTime != null">
								<view style="flex: 1;color: #777;font-weight: 700;">
									商家出餐时间
								</view>
								<view style="color: #000;font-weight: 700;">
									{{orderDetail.shopMakeTime ? orderDetail.shopMakeTime : ''  | formatISOTime}}
								</view>
							</view>
							
						</view>
					</view>
					<view class="popup-area-container" v-for="(item,index) in productData" :key="index">
						<text style="display: inline-block">{{item.productName}} {{item.specs}} * {{item.quantity}}</text>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: {},
				searchCountForm:{
					linkId:uni.getStorageSync('worker').workerId,
					pageNum:1,
					pageSize:100,
					statusList:[0,3]
				},
				returnFormData:{},
				groupOrderIdList:[],
				goodsList:[],
				orderDetail:{},
				returnData:[],
				returnCount:0
			}
		},
		filters:{
			formatISOTime(isoString) {
			  const date = new Date(isoString);
			  const year = date.getFullYear();
			  const month = (date.getMonth() + 1).toString().padStart(2, '0');
			  const day = date.getDate().toString().padStart(2, '0');
			  const hours = date.getHours().toString().padStart(2, '0');
			  const minutes = date.getMinutes().toString().padStart(2, '0');
			  const seconds = date.getSeconds().toString().padStart(2, '0');
			  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			}
		},
		onShow() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		},
		onLoad() {
			this.getReturnCount()
		},
		methods: {
			orderDetailOpen(item){
				this.returnFormData.id = item.id;
				this.returnFormData.orderId = item.orderId;
				this.returnFormData.deliveryType = item.mallOrder.deliveryType;
				this.returnFormData.refundAmount = item.refundAmount;
				this.returnFormData.refundType = item.refundType;
				this.returnFormData.refundTypeStatus = item.refundTypeStatus;
				this.orderDetail = item.mallOrder;
				this.goodsList = item.items; 
				this.$refs.orderPopup.open();
			},
			makeCall(phone){
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			getReturnCount(){
				let that = this
				this.tui.request("/mall/refund/page", "POST", this.searchCountForm, false, false).then((res) => {
					if (res.code == 200 && res.result != null) {
						that.returnCount = res.result.records.length;
						that.returnData = res.result.records
						that.$forceUpdate();
					} else {
						that.tui.toast(res.message);
						return;
					}
					uni.hideLoading();
				}).catch((res) => {});
			},
			returnAmountAllow(item,status){
				let titleText = status == 1 ? '确定同意该申请吗？' : '确定拒绝该申请吗？';
				//退款提示
				
				if(item.groupOrderIds != null && item.groupOrderIds != ''){
					titleText += '该订单为面对面配送单，所有参团订单将同步处理';
					for(let i = 0; i < this.returnData.length;i++){
						if(item.groupOrderIds.indexOf(this.returnData[i].mallOrder.id) != -1){
							//需要展示具体订单信息这里有
							this.groupOrderIdList.push(this.returnData[i]);
						}
					}
				}else{
					this.groupOrderIdList = []
				}
				
				// 2. 弹出确认框
				uni.showModal({
					title: '提示',
					content: titleText,
					success: (res) => {
						if (res.confirm) {
							if(this.groupOrderIdList != [] && this.groupOrderIdList.length > 0){
								for(let i = 0; i < this.groupOrderIdList.length;i++){
									this.processReturn(this.groupOrderIdList[i], status);
								}
							}else{
								this.processReturn(item, status);
							}
						}
					}
				});
			},
			processReturn(item,status){
				let url = ''
				//退款
				if(item.status == 0){
					//不同意
					if(status == 0){
						this.returnFormData.status = 2
					}else{
						this.returnFormData.status = 1
					}
				}else if(item.status == 3){
					//售后
					if(status == 0){
						this.returnFormData.status = 5
					}else{
						this.returnFormData.status = 4
					}
				}
				this.returnFormData.id = item.id;
				this.returnFormData.orderId = item.orderId;
				this.returnFormData.deliveryType = item.mallOrder.deliveryType;
				this.returnFormData.orderType = item.mallOrder.orderType;
				this.returnFormData.refundAmount = item.refundAmount;
				this.returnFormData.refundType = item.refundType;
				this.returnFormData.refundTypeStatus = item.refundTypeStatus;
				
				let that = this
				this.tui.request("/mall/refund/allowOrReject", "POST", this.returnFormData, false, false).then((res) => {
					if (res.code == 200) {
						that.tui.toast(res.message);
						this.getReturnCount()
						that.$forceUpdate();
					} else {
						that.tui.toast(res.message);
						return;
					}
					uni.hideLoading();
				}).catch((res) => {});
			},
			back() {
				uni.navigateBack()
			},
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		background: #F5F8F5;
		color: #00231C;
	}

	.page1 {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		position: relative;
	}

	.title {
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
		width: 100%;
		height: 20%;
	}

	.title-sreach {
		width: 100%;
		display: flex;
		height: 200rpx;
		position: relative;
	}

	.back-btn {
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.title-name {
		padding-top: 110rpx;
		font-size: 36rpx;
		font-weight: 700;
		flex: 1;
		text-align: center;
	}
	.content{
		margin: -100rpx auto;
	}
	.box1 {
		width: 95%;
		margin: 20rpx auto;
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
	}
</style>