<template>
    <view>
      <view v-if="prouctList.length>0">
        <view class="ftitle">
          <text>实物商品</text>
        </view>
        <!-- 横向滚动的 grid 容器 -->
        <view 
          class="scroll-view_H" 
          
        >
          <!-- grid 布局的包裹层，设置为 inline-grid 使其能在滚动容器内横向排列 -->
          <view 
            class="grid-wrapper"
          >
            <view 
              class="item" 
              v-for="(item, index) in prouctList" 
              :key="index" 
              @click="goGoodsDetail(item, 1)"
            >
              <view class="imgcontainer" style="position: relative">
                <view 
                  v-if="item.isVipPrice == 1 && item.vipPrice != 0 && item.vipPrice != null"
                  style="z-index: 10;position: absolute;top: 10rpx;left: 10px;text-align: center;font-size: 22rpx;background-color: #f94f04;color: #fff;font-weight: bold;border-radius:4px;width: 120rpx; padding:4rpx;box-sizing: border-box;"
                >
                  VIP优惠
                </view>
                <image :src="item.productImages" mode="aspectFit"></image>
              </view>
              <view class="name">
                {{ item.productName }}
              </view>
              <view>
                <text 
                  class="price" 
                  v-if="item.isVipPrice == 1 && item.vipPrice != 0 && item.vipPrice != null"
                >
                  <text style="color: #e97512; font-size: 12px; font-weight: bold">￥{{ item.vipPrice }}</text>
                  <text style="color: #8a8a8a;font-size: 10px;margin-left: 4px;font-weight: bold;text-decoration: line-through;">￥{{ Number(item.price) }}</text>
                </text>
                <text 
                  v-else-if="item.activityPrice && item.activityPrice > 0" 
                  class="price"
                >
                  <text style="color: #e97512; font-size: 12px; font-weight: bold">￥{{ item.activityPrice }}</text>
                  <text style="color: #8a8a8a;font-size: 10px;margin-left: 4px;font-weight: bold;text-decoration: line-through;">￥{{ Number(item.price) }}</text>
                </text>
                <text 
                  v-else 
                  class="price" 
                  style="color: #e97512; font-size: 12px; font-weight: bold"
                >
                  ￥{{ Number(item.price) }}
                </text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-if="courseList.length>0" style="margin-top: 40rpx;">
        <view class="ftitle">
          <text>课程信息</text>
        </view>
        <!-- 横向滚动的 grid 容器 -->
        <view style="margin-top: 20rpx;"
          class="scroll-view_H" 
          
        >
          <!-- grid 布局的包裹层，设置为 inline-grid 使其能在滚动容器内横向排列 -->
          <view 
           
          >
          <view class="learnBox box">
				<view class="newBox">
					<view class="item flexbox" v-for="(item, index) in courseList" :key="index" @click="onPageJump('/pages/course/courseDetail',item.id)">
						<view class="imgcontainer">
							<image :src="item.squareImage" style="height: 100%;"></image>
						</view>
						<view class="buyItems">
							<view class="txt555" style="font-weight: bold !important;">
								<text>{{item.title}}</text>
							</view>
							<view class="jianjie" v-html="item.content">

							</view>
							<view class="tag-view" style="margin-top:20rpx">
								<uni-tag v-if="item.level != 0" style="margin-right: 10rpx;" :text="item.level == 1 ? '初级':'高级'" type="primary" size="small" />
								<uni-tag v-if="item.selective != 0 && item.selective == 1" style="margin-right: 10rpx;" text="必修" size="small" type="warning" />
								<uni-tag v-if="item.selective != 0 && item.selective == 2" style="margin-right: 10rpx;" text="选修" size="small" type="success" />
							</view>
						</view>
						<view class="btn_box">
							<view class="btn_box_price" v-if="item.courseCatalogueEntityList.length==1">
								<text v-if="item.courseCatalogueEntityList[0].halfFee==0">免费</text>
								<text v-else>¥{{item.courseCatalogueEntityList[0].halfFee}}/{{item.courseCatalogueEntityList[0].fee}}</text>
							</view>
							
							<view class="btn_box_price" v-if="item.courseCatalogueEntityList.length>1">
								<text v-for="(v,i) in item.courseCatalogueEntityList" :key="i">
									{{formatContent(v.title)}}<text v-if="i !== item.courseCatalogueEntityList.length - 1">/</text>
								</text>
								<text v-if="item.courseCatalogueEntityList[0].halfFee==0" style="padding-left: 20rpx;">免费</text>
								<text v-else style="margin-left: 20rpx;">各{{item.courseCatalogueEntityList[0].halfFee}}/{{item.courseCatalogueEntityList[0].fee}}</text>
							</view>
							<!-- <text class="btn_box_btn" v-if="item.valid==0&&item.expired==0">了解课程</text>
                            <text class="btn_box_btn" v-if="item.valid==0&&item.expired>0">复读</text>
							<text class="btn_box_btn"  v-if="item.valid>0">观看课程</text> -->
							
						</view>
					</view>
				</view>
				
			</view>
          </view>
        </view>
      </view>
    </view>
  </template>
<script>


import $http from "@/config/requestConfig.js";

import { mapState, mapMutations } from "vuex";
export default {
    props: ['prouctList', 'courseList'],
    data() {
        return {


        }
    },
    methods: {
        	//判断显示‘上/中/下’
		formatContent(content) {
		  const keywords = ["上部", "中部", "下部"];
		  let result = [];
			
		  // 判断是否包含关键字
		  keywords.forEach((keyword) => {
			if (content.includes(keyword)) {
			  result.push(keyword.substring(0, 1));
			}
		  });
		  return result.join("");
		},
        	// 跳转
		onPageJump(url,id) {
			uni.navigateTo({
				url: `${url}?id=${id}`
			});
		},
        goGoodsDetail(v) {
            uni.navigateTo({
                url: `/pages/goods/index/index?navTitle=${v.title}&title=${v.title}&id=${v.productId}`,
            });
        },
    }
}
</script>
<style lang="scss" scoped>
@import "@/style/mixin.scss";
.ftitle {
  font-size: 40rpx;
  color: #1E40AF ;
  font-weight: bold;
  letter-spacing: 2rpx;
  text-shadow: 0 2rpx 4rpx rgba(0, 122, 255, 0.6); /* 文字阴影，与卡片阴影风格统一 */
}
.imgcontainer {
  background-color: #f0f0f0;
}
/* 横向滚动容器，设置固定高度和溢出横向滚动 */
.scroll-view_H {
  margin-top: 30rpx;
 
}
/* grid 布局包裹层，设置为 inline-grid 使其横向排列，同时设置 grid 布局 */
.grid-wrapper {
    display: inline-grid;
  /* 每行 3 列，每列最小 210rpx，剩余空间平均分配（自适应宽度） */
  grid-template-columns: repeat(3, minmax(210rpx, 1fr)); 
  grid-column-gap: 20rpx; /* 列间距用 rpx 保持一致性 */
  grid-row-gap: 20rpx;
  
  width: auto; /* 确保 grid 容器宽度随内容自适应，不强制占满父容器 */
}
.flexbox {
		display: flex;
	}
.item {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 14rpx;
  // 去掉 inline-block，grid 子项不需要
  // display: inline-block; 
  overflow: hidden;

  .name {
    font-size: 24rpx;
    @include toe();
    margin-top: 10rpx;
    font-weight: bold;
  }

  .price {
    font-size: 26rpx;
    color: #666;
    padding-top: 10rpx;
  }

  .fall {
    background-image: linear-gradient(90deg, #e70503 0%, #e7a535 100%);
    border-radius: 10px;
    color: #fff;
    padding: 4rpx;
    padding-bottom: 8rpx;
    height: 50rpx;
    line-height: 40rpx;
    position: relative;
    margin-top: 50rpx;
    font-size: 24rpx;

    .mprice {
      width: 52%;
      font-size: 28rpx;
      font-weight: bold;
    }
  }

  image {
    width: 100%;
    height: 220rpx;
  }
}

.newBox {
		.flexbox{
			padding-bottom: 100rpx !important;
		}
		.item {
			position: relative;
			margin-bottom: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			@include ptop_bottm(20px);
			@include pleft_right(10px);

			@include mshadow(10px, 1) .imgcontainer {
				width: 250rpx;
				height: 250rpx;
				margin-right: 20rpx;
				
				image {
					width: 100%;
				}
			}
			.btn_box{
				position: absolute;
				bottom: 20rpx;
				right: 20rpx;
				display: flex;
				align-items: center;
				.btn_box_price{
					font-size: 32rpx;
					font-weight: 500;
					// margin-right: 30rpx;
					color: red;
					line-height: 54rpx;
				}
				.btn_box_btn{
					width: 140rpx;
					height: 54rpx;
					text-align: center;
					line-height: 54rpx;
					border-radius: 20rpx;
					@include theme("btn_bg");
					font-size: 28rpx; color: #fff;
				}
			}
			.buyItems {
				width: 60%;
			}

			.jianjie {
				line-height: 30rpx; height: 60rpx; overflow: hidden; 
				overflow: hidden!important;
				margin-top: 10rpx;
				font-size: 24rpx;
				@include bov();
				color: #9c9c9c;
			}

			.txt555 {
				font-size: 30rpx;
				color: #000;
				@include bov()
			}
		}
	}
.learnBox {
		margin-bottom: 10px;
		padding-top: 10px;

		.learn {
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 20rpx;

			.item {
				width: 48%;
				margin-bottom: 16px;

				overflow: hidden;

				image {
					width: 100%;
					height: 200rpx;
				}

				.txt555 {
					display: block;
					text-align: center;
					height: 40rpx;
					width: 100%;
					line-height: 40rpx;
					@include bov(1);
					margin-top: 10rpx;
					font-size: 24rpx;
                    

				}

			}
		}
	}
    
	
</style>