<template>
	<view class="container">
		<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="type=='drop' && orderDetail.operationStatus == '1'">
				<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:{}
			};
		},
		methods:{
			userCourseInfo(){
				const param = {
					userId:this.userId,
					orderId:this.orderId
				}
				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];
								}
							})
						})	
					}
				})
			},
			dropClasses(){
				uni.navigateTo({
					url:`/pages/applyDropClass/applyDropClass?id=${this.orderId}&fileId=${this.fileId}`
				})
			}
		},
		mounted() {
			this.userCourseInfo();
		},
		onLoad(option) {
			this.orderId = option.id
			this.type = option.type
		}
	
	}
</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: 24rpx;
							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>
