<template>
	<view class="container" style="padding-top: 50rpx;">
		<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()" style="top: 16rpx;"></text>
		<view class="orderInfoContent">
			<view class="ulBox">
				<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 class="ulBox">
				<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 class="dropClassBox" v-if="Withdrawal=='1' && orderDetail.operationStatus == '1'&& type == 'drop'">
				<view class="dropBtn" @click="dropClasses()">退课</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from "@/api/api";
	import common from "@/common/common";
	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,
				}
				api.userCourseInfo(param).then(res => {
					if (res['success']) {
						const data = this.orderDetail = res['data']['orderDetail'];
						this.fileId = data.fileId;
						Object.keys(data).map((key, item) => {
							this.orderInfoList.forEach(val => {
								if (val.alias == key) {
									val.value = data[key];
								}
							})
						})
					}
					uni.hideLoading()
				})
			},
			dropClasses() {
				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;
		},
		mounted() {
			uni.showLoading({
				title: '加载中...'
			});
			this.userCourseInfo();
			uni.$on("radiobroadcast", res => {
				this.type = res.type;
				this.Withdrawal = null
				// 清除监听
				uni.$off('radiobroadcast');
			})
		}
	}
</script>

<style lang="scss">
	.container {
		height: 100%;

		.orderInfoContent {
			.ulBox {
				background-color: #fff;
				margin: 20rpx 22rpx;
				padding: 20rpx;

				.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>
