<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="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 class="price" style="">￥{{item.coursePrice}}</text>
			          <text v-if="Number(item.salesNumber)>0" class="num" >已售{{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('loginType','codelogin')
							uni.setStorageSync('isH5', 1);
							this.courseList()
							this.querySystemMessage()
						}
					}
				});
			}else{
				this.courseList()
				this.infoTotal = 0
			}
		}
	}
</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 {
		    width: 100%;
		    box-sizing: border-box;
		    
		    .productListBox {
		      padding: 30rpx;
		      display: grid;
		      /* 默认两列，固定宽度 */
		      grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
		      gap: 30rpx;
		      justify-content: center;
		      
		      .productListItem {
		        width: 100%;
		        max-width: 350rpx; /* 设置最大宽度 */
		        display: flex;
		        flex-direction: column;
		        overflow: hidden;
		        box-sizing: border-box;
		        margin: 0 auto; /* 居中显示 */
		        
		        .top {
		          width: 100%;
		          position: relative;
		          border-radius: 20rpx;
		          overflow: hidden;
		          
		          /* 确保图片容器有固定宽高比 */
		          &::before {
		            content: "";
		            display: block;
		            padding-top: 100%; /* 1:1 宽高比 */
		          }
		          
		          .productImg {
		            position: absolute;
		            top: 0;
		            left: 0;
		            width: 100%;
		            height: 100%;
		            object-fit: cover;
		            display: block;
		          }
		          
		          .productDesBox {
					  box-sizing: border-box;
		            position: absolute;
		            left: 0;
		            bottom: 0;
		            width: 100%;
		            padding: 0  15rpx;
		            box-sizing: border-box;
		            background: rgba(0, 0, 0, 0.1);
		            border-radius: 0 0 20rpx 20rpx;
		            font-size: 24rpx;
		            color: #fff;
		            display: -webkit-box;
		            -webkit-line-clamp: 2;
		            -webkit-box-orient: vertical;
		            overflow: hidden;
		            text-overflow: ellipsis;
		            /* 关键修改：添加精确的高度计算 */
		            max-height: calc(2 * 1.4 * 24rpx); /* 2行 × 行高 × 字体大小 */
		            line-height: 1.5;
		            /* 确保在Firefox等浏览器也有效 */
		            display: -moz-box;
		            -moz-box-orient: vertical;
		            -moz-line-clamp: 2;
		          }
		        }
		        
		        .bottom {
		          width: 100%;
		          box-sizing: border-box;
		          padding: 10rpx 0;
		          
		          .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;
		            justify-content: space-between;
		            align-items: center;
		            
		            .price {
		              font-size: 28rpx;
		              color: rgba(32, 39, 155, 1);
		            }
		            
		            .num {
		              font-size: 24rpx;
		              color: rgba(166, 166, 166, 1);
		            }
		          }
		        }
		      }
		    }
		  }
		  
		  /* iPad竖屏和小屏幕平板 */
		  @media (min-width: 768px) and (max-width: 1023px) {
		    .productList .productListBox {
		      grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
		      gap: 30rpx;
		    }
		  }
		  
		  /* iPad横屏和大屏幕平板 */
		  @media (min-width: 1024px) and (max-width: 1279px) {
		    .productList .productListBox {
		      grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
		      gap: 30rpx;
		    }
		  }
		  
		  /* 电脑端 */
		  @media (min-width: 1280px) {
		    .productList .productListBox {
		      grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
		      gap: 30rpx;
		    }
		  }
		  
		  .productEmpty {
		    color: rgba(166, 166, 166, 1);
		    width: 100%;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    padding: 30rpx 0;
		    font-size: 28rpx;
		  }
		}
		.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: #666666;
					font-size: 30rpx;
					margin-top: 30rpx;
				}
				.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;
						}
					}
				}
			}
		}

	}
	
</style>
