<template>
	<view class="container" >
		<!-- #ifdef APP -->
			<view class="backArrow">
				<text class="iconfont icon-youjiantou zuojiantou" style="left: 5rpx;" @click="goBack()"></text>
				<text style="font-size: 30rpx;">订单详情</text>
			</view>
		<!-- #endif -->
		
		<view class="orderInfoContent">
			<view class="ulBox">
				<view class="conent">
					<view v-for="item in orderInfoList.filter(item=>item.pageArea===1)" :key="item.id" class="liBox">
						<text>{{item.name}}:</text>
						<text
							:style="{color:item.color ? item.color : '#666'}">{{item.type==='currency' && item.value ? '￥' : ''}}{{item.value ? item.value : '/'}}</text>
					</view>
				</view>
				
			</view>
			<view class="ulBox">
				<view class="conent">
					<view v-for="item in orderInfoList.filter(item=>item.pageArea===2)" :key="item.id" class="liBox">
						<text>{{item.name}}:</text>
						<text
							:style="{color:item.color ? item.color : '#666'}"
						>
							{{item.type==='currency' && item.value ? '￥' : ''}}{{item.value ? item.value : '/'}}
						</text>
					</view>
				</view>
				
			</view>
			<view class="dropClassBox" v-if="Withdrawal=='1' && orderDetail.isRefund == '1'&& type == 'drop'">
				<view class="dropBtn" @click="dropClasses()">退款</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from "@/api/api";
	import common from "@/common/common";
	import dataHandling from "@/util/dataHandling";
	import { initJssdkShare, setWechatShare } from '@/util/fiveshare';
	export default {
		data() {
			return {
				userId: uni.getStorageSync('cffp_userId'),
				orderId: '',
				fileId: '',
				orderInfoList: [{
						id: 1,
						name: '订单编号',
						value: '/',
						type: 'string',
						alias: 'orderNo',
						pageArea: 1
					},
					{
						id: 2,
						name: '购买时间',
						value: '/',
						type: 'string',
						alias: 'orderConfirmDate',
						pageArea: 1
					},
					{
						id: 3,
						name: '订单类型',
						value: '/',
						type: 'string',
						alias: 'courseClassify',
						pageArea: 1
					},
					{
						id: 4,
						name: '商品名称',
						value: '/',
						type: 'string',
						alias: 'fileTitle',
						pageArea: 1
					},
					{
						id: 5,
						name: '购买人',
						value: '/',
						type: 'string',
						alias: 'userName',
						pageArea: 1
					},
					// {
					// 	id: 6,
					// 	name: '商品讲师',
					// 	value: '/',
					// 	type: 'string',
					// 	alias: 'lecturerName',
					// 	pageArea: 1
					// },
					{
						id: 7,
						name: '订单现价',
						value: '/',
						type: 'currency',
						alias: 'orderPrice',
						pageArea: 1
					},
					{
						id: 8,
						name: '积分抵扣',
						value: '/',
						color: '#FA6900',
						type: 'currency',
						alias: 'integralExchange',
						pageArea: 1
					},
					{
						id: 9,
						name: '实际支付',
						value: '/',
						type: 'currency',
						alias: 'paymentAmount',
						pageArea: 1
					},
					{
						id: 10,
						name: '获得积分',
						value: '/',
						type: 'string',
						color: '#F15A1F',
						alias: 'salesCommission',
						pageArea: 2
					},
					{
						id: 11,
						name: '积分来源',
						value: '/',
						type: 'string',
						alias: 'commissionSource',
						pageArea: 2
					},
					{
						id: 12,
						name: '订单状态',
						value: '/',
						type: 'string',
						alias: 'courseStatusName',
						pageArea: 2
					},
					{
						id: 13,
						name: '订单有效期至',
						value: '/',
						type: 'string',
						alias: 'effectiveEndDate',
						pageArea: 2
					}
				],
				type: '',
				orderDetail: {},
				Withdrawal: '',
				commissionType: null
			};
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			userCourseInfo() {
				const param = {
					userId: this.userId,
					orderId: this.orderId,
					queryType: this.type == 'drop' ? '1' : '2',
					commissionType: this.commissionType,
					refundUserId: this.Withdrawal =='1'? uni.getStorageSync('cffp_userId'):null
				}
				api.userCourseInfo(param).then(res => {
					if (res['success']) {
						const data = this.orderDetail = res['data']['orderDetail'];
						if(this.orderDetail.effectiveEndDate){
							this.orderDetail.effectiveEndDate = dataHandling.dateFormat2(this.orderDetail.effectiveEndDate)
						}
						if(this.orderDetail.orderConfirmDate){
							this.orderDetail.orderConfirmDate = dataHandling.dateFormat2(this.orderDetail.orderConfirmDate)
						}
						
						this.fileId = data.fileId;
						let deleteFlag = false
						Object.keys(data).map((key, item) => {
							this.orderInfoList.forEach(val => {
								if (val.alias == key) {
									val.value = data[key];
								}
								if(val.alias=='salesCommission'&&!val.value) {
									deleteFlag = true
								}
								
							})
						})
						if(deleteFlag){
							this.orderInfoList = this.orderInfoList.filter(item => {
							  // 保留所有项，除非是 salesCommission 为空且是 id 为 10 或 11 的项
							  return !(deleteFlag && (item.id === 10 || item.id === 11));
							});
						}
						
					}
					uni.hideLoading()
				})
			},
			dropClasses() {
				dataHandling.pocessTracking(
				  '退款',
				  `用户申请退款`,
				  '点击',
				  2,
				  '订单详情',
				  'pages/orderDetail/orderDetail'
				)
				uni.navigateTo({
					url: `/pages/applyDropClass/applyDropClass?id=${this.orderId}&fileId=${this.fileId}`
				})
			}
		},
		onLoad(option) {
			if (option.userId) {
				this.userId = option.userId
			};
			this.orderId = option.id;
			this.type = option.type;
			this.Withdrawal = option.Withdrawal
			this.commissionType = option.commissionType;
		},
		onShow() {
			// #ifdef H5
						initJssdkShare(() => {
						  setWechatShare();
						}, window.location.href);
						// #endif
		},
		mounted() {
			uni.showLoading({
				title: '加载中...'
			});
			this.userCourseInfo();
			uni.$on("radiobroadcast", res => {
				this.type = res.type;
				this.Withdrawal = null
				// 清除监听
				uni.$off('radiobroadcast');
			})
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100%;
		.backArrow{
			box-sizing: border-box;
			display: flex;
			height: 100rpx;
			justify-content: space-between;
			align-items: center;
			position: relative;
			width: 100%;
			margin-bottom: 10rpx;
			color: #333333;
			background-color: #fff;
			text:nth-child(2){
				width: 100%;
				text-align: center;
				position: absolute;
			}
		}
		.orderInfoContent {
			.ulBox {
				box-sizing: border-box;
				padding: 20rpx 20rpx 5rpx 20rpx;
				.conent{
					padding: 20rpx ;
					background-color: #fff;
					border-radius: 10rpx;
				}
				.liBox {
					margin-bottom: 20rpx;
					display: flex;
					justify-content: space-between;

					text {
						&:first-child {
							font-size: 28rpx;
							color: #333;
						}

						&:last-child {
							font-size: 28rpx;
						}
					}
				}

			}

			.dropClassBox {
				display: flex;
				justify-content: flex-end;
				padding-right: 20rpx;
				margin-top: 20rpx;

				.dropBtn {
					border-radius: 80rpx;
					color: #fff;
					background-color: #20269B;
					font-size: 36rpx;
					text-align: center;
					padding: 6rpx 50rpx;
				}
			}
		}
	}
</style>
