<template>
	<view class="container">
		<view class="statusBox">
			<view class="successBox" v-if="orderStatus=='2'">
				<i class="iconfont icon-dengdai"></i>
				<text class="statusText">订单支付成功</text>
				<text @click="viewDetail()" class="viewOrder">查看订单</text>
			</view>
			<view class="failBox" v-if="orderStatus=='1'">
				<text style="color:#F04604"><i class="iconfont icon-guanbi"></i>订单支付失败</text>
				<view class="optionBox">
					<text @click="cancelOrder()">取消订单</text>
					<text @click="continuePay()">继续支付</text>
				</view>
			</view>
		</view>
		<!-- 精选课程 -->
		<!-- <view class="courlistBox">
			<view class="course_content">
				<view class="tag">
					<h4>推荐产品</h4>
					<view @click="goToCourselist()">更多<text class="iconfont icon-youjiantou"></text></view>
				</view>
				<view class="ulBox" v-if="cffpCourseInfos.length>0">
					<view class="liBox" v-for="item in cffpCourseInfos" :key="item.fileId" @click="goDetail(item)">
						<course-item :thumbnailPath="item.displayImage" :title="item.fileTitle" :summaryBox="item.fileSynopsis" :dataList="{coursePrice:item.coursePrice,salesNumber:item.salesNumber}" ></course-item>
					</view>
				</view>
			</view>
		</view> -->
		<view class="productBox">
			<view class="productTitle">
				<view class="titleTxt">
					<text style="font-size: 30rpx;font-weight: 500;">推荐产品</text>
					<text class="more" @click="goToCourselist()">更多 <text class="iconfont icon-youjiantou"></text> </text>
				</view>
			</view>
			<view class="productList"  v-if="cffpCourseInfos.length>0">
				<view class="productListBox">
					<view class="productListItem"  v-for="item in cffpCourseInfos" :key="item.fileId" @click="goDetail(item)">
						<view class="top">
							<image class="productImg" :src="item.displayImage" alt="" mode="widthFix"></image>
							<view class="productDesBox">
								{{item.fileSynopsis}}
							</view>
						</view>
						<view class="bottom" style="text-align: left !important;">
							<view class="one">
								{{item.fileTitle}}
							</view>
							<view class="two">
								<text style="font-size: 28rpx;color: rgba(32, 39, 155, 1);">￥{{item.coursePrice}}</text>
								<text v-if="Number(item.salesNumber)>0" style="font-size: 24rpx;color: rgba(166, 166, 166, 1);">已售{{item.salesNumber}}</text>
							</view>
						</view>
					</view>
				</view>
				
			</view>
			<view class="productEmpty" v-else>
				暂无数据
			</view>
		</view>
		<tabBar :currentPage="currentPage" :infoTotal="infoTotal"></tabBar>
	</view>
</template>

<script>
	import api from "@/api/api";
	import {apiURL} from "@/environments/environment";
	import courseItem from "@/components/courseItem/courseItem.vue";
	import tabBar from '../../components/tabBar/tabBar.vue';
	export default {
		components:{tabBar,courseItem},
		data() {
			return {
				cffpCourseInfos:[],
				fileId:'',
				orderId:'',
				orderStatus:'2',
				userId:'',
				isRedirect:'',
				currentPage: '',
				infoTotal:0
			};
		},
		onShow() {
			let loginType  = uni.getStorageSync('loginType')
			if(loginType !== "visitor" ){
				this.querySystemMessage()
			}else{
				this.infoTotal = 0
			}
		},
		methods:{
			querySystemMessage() {
			   api.querySystemMessage({systemType:1,userId:uni.getStorageSync('cffp_userId')}).then(res => {
			     if (res['success']&& res['data']['dataList'].length>0) {
				 this.infoTotal =  res['data']['dataList'].filter(item=>{
					  return item.isRead == 0
				   }).length
			     }else {
					 this.infoTotal = 0
				 }
			   });
			},
			courseList(){
				const param = {
					queryName:this.queryName
				}
				api.courseList(param).then(res=>{
					if(res['success']){
						this.cffpCourseInfos = res['data']['data'];
					}else{
						uni.showToast({
							title: res['message'],
							duration: 2000,
							icon: 'none'					
						})
					}
				})
			},
			viewDetail(){
				// 查看详情
				uni.navigateTo({
					url:`/pages/orderDetail/orderDetail?id=${this.orderId}&type=drop&userId=${this.userId}`
				})
			},
			goToCourselist(){
				uni.switchTab({
					url:'../../pages/courselist/courselist'
				})
			},
			continuePay(){
				uni.navigateTo({
					url:`/pages/orderConfirm/orderConfirm?fileId=${this.fileId}&orderId=${this.orderId}`
				})
			},
			cancelOrder(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			goDetail(item){
				uni.navigateTo({
					url: `/pages/courseDetail/courseDetail?fileId=${item.fileId}`
				});
			}
		},
		onLoad(options) {
			this.isRedirect = options.isRedirect
			this.orderId = options.orderId;
			this.orderStatus = options.orderStatus;
			this.fileId = options.fileId;
			if(options.userId && options.userId != "undefined"){
				this.userId = options.userId;
				uni.setStorageSync('cffp_userId', this.userId)
				uni.request({
					url: `${apiURL}/authorize/obtainToken`,
					method: 'POST',
					data: {ticket:'uni-app', loginId:options.userId},
					success: (res) => {
						if (res.statusCode === 200) {
							uni.setStorageSync('uni-token', res.data['data']['token']);
							uni.setStorageSync('cffp_userId', options.userId);
							uni.setStorageSync('isLogin','1');
							uni.setStorageSync('isH5', 1);
							this.courseList()
						}
					}
				});
			}else{
				this.courseList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		padding-bottom: 50rpx;
		.productBox{
					background-color: #fff;
					margin-top: 15rpx;
					box-sizing: border-box;
					margin-bottom: 100rpx;
					.productTitle{
						border-bottom: 1rpx solid rgba(238, 238, 238, 1);
						padding-bottom: 10rpx;
						.titleTxt{
							padding: 15rpx 30rpx;
						   display: flex;
						   justify-content: space-between;
						   align-items: center;		
						}
						.more{
							font-size: 26rpx;
							color: rgba(84, 84, 84, 1);
							.icon-youjiantou{
								font-size: 26rpx;
							}
						}
					}
					.productList{
						.productListBox{
							padding: 30rpx 40rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							flex-wrap: wrap;
							.productListItem{
								width: 48%;
								margin-bottom: 20rpx;
								display: flex;
								align-items: center;
								flex-direction: column;
								overflow: hidden;
								.top{
									// background-color: pink;
									width: 290rpx;
									position: relative;
									overflow: hidden;
									.productDesBox{
										padding: 5rpx 10rpx 10rpx 10rpx;
										box-sizing: border-box;
										position: absolute;
										left: 0;
										bottom: 0%;
										background: rgba(0, 0, 0, 0.1);
										width: 100%;
										border-radius: 0 0 20rpx 20rpx; /* 左上 右上 右下 左下 */
										font-size: 24rpx;
										color: #fff;
										display: -webkit-box;
										 -webkit-line-clamp: 1;
										 -webkit-box-orient: vertical;
										 overflow: hidden;
										 text-overflow: ellipsis;
										 white-space: nowrap; /* 确保不会换行 */
									}
									.productImg{
										border-radius: 20rpx;
										 display: block;
									}
								}
								.bottom{
									box-sizing: border-box;
									padding: 10rpx 15rpx;
									text-align: left;
									width: 100%;
									.one{
										font-size: 27rpx;
										margin-bottom: 5rpx;
										 display: -webkit-box;
										  -webkit-line-clamp: 1;
										  -webkit-box-orient: vertical;
										  overflow: hidden;
										  text-overflow: ellipsis;
										  white-space: nowrap; /* 确保不会换行 */
									}
									.two{
										display: flex;
										align-items: center;
										justify-content: space-between;
										padding-right: 10rpx;
									}
								}
							}
						}
						
					}
					.productEmpty{
						color: rgba(166, 166, 166, 1);
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 30rpx 0;
						font-size: 28rpx;
					}
				}
	}
	.ulBox{
			flex-direction: column;
		}
		.liBox{
			background-color: #fff;
			border-radius: 20rpx;
			margin-bottom: 10rpx;
			padding: 10rpx;
		}
		.statusBox{
			padding: 30rpx 0;
			background-color: #fff;
			margin-bottom: 10rpx;
			.successBox{
				display: flex;
				flex-direction: column;
				align-items: center;
				.statusText{
					color: #20279B;
					font-size: 36rpx;
				}
				.viewOrder{
					color: #fff;
					font-size: 30rpx;
					margin-top: 30rpx;
					background-color: #20279B;
					padding: 10rpx 20rpx;
					border-radius: 40rpx;
				}
				.iconfont{
					margin-bottom: 30rpx;
					font-size: 100rpx;
					color: #20279B;
				}
			}
		
			.failBox{
				display: flex;
				flex-direction: column;
				align-items: center;
				.iconfont{
					border: 1px solid #F15A1F;
					padding: 12rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}
				.optionBox{
					display: flex;
					justify-content: center;
					margin-top: 60rpx;
					text{
						border-radius: 40rpx;
						background-color: #20279B;
						color: #fff;
						font-size: 30rpx;
						padding: 10rpx 50rpx;
						margin-right: 20rpx;
						&:first-child{
							background-color: transparent;
							color: #20279B;
							border: 1px solid #20279B;
						}
					}
				}
			}
		}
		.course_content{
			background: #fff;
			position: relative;
			padding: 0 30rpx 100rpx 30rpx;
			.tag{
				padding: 20rpx;
				display: flex;
				justify-content: space-between;
				h4{
					// margin-left: 20rpx;
				}
			}
			.tag:before{
				position: absolute;
				left: 20rpx;
				top: 20rpx;
				display: inline-block;
				content: '';
				width: 2px;
				height: 16px;
				background-color: #F15A1F;
				border-radius: 2px;
			}
		}
		
</style>
