<template>
	<view class="commonPageBox commonDetailPage">
		<z-nav-bar title="商品详情"></z-nav-bar>
		<view class="contentBox commonPageContentBox" style="padding-bottom: 30rpx;" v-if="!this.$store.state.loadingShow">
			<swiper :autoplay="true" :interval="3000" :duration="1000"
				style="width: 100%; height: 750rpx; background-color: #f5f5f5">
				<swiper-item v-for="(item, index) in swiperList" :key="index" style="width: 100%; height: 100%">
					<image :src="item" mode="aspectFit" style="width: 100%; height: 100%">
					</image>
				</swiper-item>
			</swiper>

			<view class="goods_box">
				<view class="curriulum_title_box">
					<view v-if="this.options.isMiaosha == 1" class="miaosha_box">
						<view class="price_box">
							<view class="price_left">
								<template v-if="
									curriculumData.activityPrice &&
									curriculumData.activityPrice > 0
								  ">
									<text class="aui-text-danger price">
										￥{{ curriculumData.activityPrice }}
									</text>
									<text class="price original_price">原价：￥{{ curriculumData.price }}
									</text>
								</template>
								<template v-else>
									<text class="aui-text-danger price">
										￥{{ curriculumData.price }}
									</text>
								</template>

								<view class="price original_price sales_number">已售 {{ curriculumData.sumSales }}件
								</view>
							</view>

							<view class="xianshimaiosha_box">
								<text class="xianshimaiosha">秒杀商品</text>
							</view>
						</view>

						<view class="curriulum_title">{{ curriculumData.productName }}
						</view>
					</view>
					<view v-else class="normal_box">
						<view class="price_box">
							<template v-if="
							  curriculumData.activityPrice &&
							  curriculumData.activityPrice > 0
							">
								<text class="aui-text-danger price">
									￥{{ curriculumData.activityPrice }}
								</text>
								<text class="price original_price">原价：￥{{ curriculumData.price }}
								</text>
							</template>
							<template v-else>
								<text class="aui-text-danger price">
									￥{{ curriculumData.price }}
								</text>
							</template>
							<text class="price original_price sales_number" style="float: right">已售
								{{ curriculumData.sumSales }}件
							</text>
						</view>

						<view class="curriulum_title" style="margin-top: 40rpx">{{ curriculumData.productName }}
						</view>
					</view>

					<view class="price_box"> </view>
				</view>
			</view>

			<template>
				<common-sticky label="title" :itemStyle="`width:${
            cateList.length == 2 ? '50' : '33'
          }%;padding-left: 15px; padding-right: 15px; height: 68rpx;`" :list="cateList"
					:currentCateIndex="currentCateIndex">
				</common-sticky>
			</template>
			<view :class="`dataList parameterList`" v-if="booksList.length > 0">
				<view class="goods_detail_list_title bg_box_shandow color_shandow bg_color PM_font">
					<view class="left" style="color: #294a97 !important">
						<u-icon name="list" color="#294a97" size="23"
							style="display: inline-block; margin-right: 10rpx"></u-icon>
							书籍信息
					</view>
				</view>

				<common-list imgUrl="url" isNoIcon imgMode="aspectFit" class="color_shandow parameter_box book_box"
					defaultUrl="" :isCondition="true" :dataList="booksList" label="title">
					<template slot="labelSlot" slot-scope="slotProps">
						<!-- isSelectGoods -->
						<view class="related_courses_name" :class="`goods_item `">
							<view class="image_box" style="margin-right: 10rpx">
								<image :src="slotProps.row.images" mode="aspectFit" class="goods_image"></image>
							</view>
							<view :class="`goods_info `">
								<view class="name">
									<text style="color: #333"> {{ slotProps.row.name }}</text>
								</view>
							</view>
						</view>
					</template>
				</common-list>
			</view>
			<view :class="`dataList parameterList`" v-if="coursesList.length > 0">
				<view class="goods_detail_list_title bg_box_shandow color_shandow bg_color PM_font">
					<view class="left" style="color: #7dc1f0 !important">
						<u-icon name="list" color="#7dc1f0" size="23"
							style="display: inline-block; margin-right: 10rpx"></u-icon>
							课程信息
					</view>
				</view>

				<common-list imgUrl="url" isNoIcon imgMode="aspectFit" class="color_shandow parameter_box" defaultUrl=""
					:isCondition="true" :dataList="coursesList" label="title">
					<template slot="labelSlot" slot-scope="slotProps">
						<!-- isSelectGoods -->
						<view class="related_courses_name" :class="`goods_item `">
							<view class="image_box" style="margin-right: 10rpx">
								<image :src="slotProps.row.images" mode="aspectFit" class="goods_image"></image>
							</view>
							<view :class="`goods_info `">
								<view class="name">
									<text style="color: #333"> {{ slotProps.row.title }}</text>
								</view>
							</view>
						</view>
					</template>
				</common-list>
			</view>

			<u-divider text="商品详情" :hairline="true" textColor="#333" lineColor="#b0b0b0"></u-divider>
			<view class="small_class_teaching_box">
				<view class="common_divider divider_box"> </view>

				<common-rich-detail :detailInfo="detailInfo" style="padding: 10rpx">
					<template #richHeadImg></template>
				</common-rich-detail>
				<view class="small_class_teaching_content">
				</view>
			</view>
		</view>
		<view class="goods_nav_box" v-if="!this.$store.state.loadingShow">
			<uni-goods-nav :fill="true" :options="buyOptions" :button-group="customButtonGroup1"
				@buttonClick="toLogin()" />
		</view>
	</view>
</template>

<script>
	import $http from "@/config/requestConfig.js";
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				detailInfo: {},
				parameterList: [],
				booksList: [],
				coursesList: [],
				buyOptions: [],

				swiperList: [],
				goodsList: [],
				options: {},
				curriculumData: {},
				curriculumInfo: {},
				detailInfo: {},
				modalInfo: {},

				playData: {},
				searchValue: "",
				cateList: [], // 一级分类标题1
				twoCateList: [], // 二级分类标题
				dataList: [], // 方剂标题
				allDataList: [], // 方剂标题
				currentStatusIndex: 0, // 当前选中的一级分类
				currentCateIndex: 0, // 当前选中的一级分类
				curTwoCateIndex: 0, // 当前选中的二级分类
				searchList: [], // 搜索结果数组
				urlList: {
					detailInfo: 'visitor/getProductDetail'
				},
				customButtonGroup1: [{
					with: 200,
					text: "立即购买",
					backgroundColor: "linear-gradient(90deg, #FE6035, #EF1224)",
					color: "#fff",
				}, ],
			};
		},
		onLoad(options) {
			this.options = options;
		},
		onShow() {
			this.selectGoodsData = {};
			this.getCourseDescriptionData();
		},
		computed: {
			...mapState(["userInfo"]),
		},
		methods: {
			//获取数据
			async getCourseDescriptionData() {
				var data = {};
				var that = this;
				uni.showLoading({
					title: '加载中'
				})
				this.$http.request({
					url: this.urlList.detailInfo,
					method: "POST",
					data: {
						productId: this.options.id,
					},
					header: {
						"Content-Type": "application/json",
					},
				})

				.then(async (res) => {
					uni.hideLoading();
					that.selectGoodsData = res.data.GLProducts[0];
					that.curriculumData = res.data.detail;
					that.booksList = res.data.books ? res.data.books : [];
					that.coursesList = res.data.courses ? res.data.courses : [];
					that.goodsList = res.data.GLProducts;

					that.parameterList = [];
					
					if (
						that.curriculumData.productImageList == null ||
						that.curriculumData.productImageList == ""
					) {
						this.swiperList.push(that.curriculumData.explainsImg);
					} else {
						that.swiperList = that.curriculumData.productImageList.split(",");
					}

					this.detailInfo = {
						content: this.curriculumData.productDetails,
					};
				});
			},
			toLogin(){
				uni.navigateTo({
					url: '/pages/user/login'
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	@import "@/static/mixin.scss";
	.searchList {
		.item {
			font-size: 28rpx;
			padding: 20rpx;
			border-bottom: 1px solid #dadbde;
		}
	}

	.scroll-view_H {
		background-color: #fff;
		white-space: nowrap;
		padding: 10rpx;
	}

	.contentBox {
		height: calc(100% - 50px);

		.statusList {
			padding: 10rpx;
			box-sizing: border-box;
			justify-content: space-between;

			text {
				text-align: center;
				display: inline-block;
				width: 32%;
				padding: 20rpx 0;
				font-size: 34rpx;
				border-radius: 10rpx;
			}

			.cur {
				background-color: $themeColor;
				color: #fff;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			}
		}

		.twoCateList {
			font-size: 28rpx;
			margin-top: 20rpx;

			.grid-text {
				padding: 10rpx 0rpx;
				text-align: center;
			}

			.cur {
				color: $themeColor;
			}

			// .u-grid-list{border: 0.5px solid #dadbde;}
		}

		.dataList {
			font-size: 26rpx;
			padding-bottom: 40rpx;
			// margin-top: 20rpx;
			// padding: 32rpx 0rpx;
			border-radius: 10rpx;
			background-color: #fff;
			box-sizing: border-box;

			.JFtitleItem {
				background-color: #ffffff;
				padding: 20rpx 10rpx;
				width: 100%;
				border-bottom: 0.5px solid #f8f9fa;
			}

			.wmzhimg {
				width: 220rpx;
				height: 220rpx;
			}
		}
	}

	.search_box {
		margin: 0 auto;
		overflow: hidden;
		align-items: center;
		width: calc(100% - 10px);
		margin-top: 20rpx;
		margin-bottom: 20rpx;

		.search {
			height: 56upx;
			display: flex;
			width: 86%;
			margin: 0 auto;
			align-items: center;
			padding: 0upx 40upx;
			background-color: #fff;
			border-radius: 20upx;
			box-shadow: 0 0px 10px 1px #3ab3ae33;
		}

		.prompt {
			color: #838383;
			font-size: 24rpx;
		}

		.icon_search {
			background-image: url("@/static/icon/map_ic_search.png");
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
			width: 36upx;
			height: 36upx;
			margin-right: 20upx;
		}
	}

	.flexbox {
		display: flex;
	}

	.uni-modal .uni-modal__bd {
		text-align: left;
	}

	.limiTy {
		font-size: 28rpx;
		line-height: 46rpx;
	}

	.chImage {
		height: 100rpx;
	}

	.dataList {
		height: 100%;
	}

	.titleList2 {
		height: calc(100% - 150rpx);
	}

	.priceDetail {
		height: calc(100% - 180rpx) !important;
		padding: 0rpx 0;
		box-sizing: border-box;
	}

	.componentPage {
		height: calc(100% - 90rpx) !important;
	}

	.dateReminder {
		width: 100%;
		font-size: 24rpx;
		text-align: right;
		line-height: 40rpx;
	}

	.fdButtonBox {
		border: 1rpx solid $themeColor;
		background-color: $themeColor;
		color: #fff;
		// width: 100%;
		float: right;
		padding: 4rpx 14rpx;
		font-size: 24rpx;
		font-weight: 500;
		line-height: 30rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
	}

	.headImage {
		
	}

	.commonDetailPage {
		padding-bottom: 40rpx !important;
	}

	.goods_box {
		background-color: #fff;
		box-sizing: border-box;
		width: 100%;

		.curriulum_title_box {
			width: calc(100%) !important;
			padding-bottom: 20rpx;
			background-color: #fff;

			.curriulum_title {
				width: calc(100%);
				font-weight: 600;
				font-size: 34rpx;
				// line-height: 40rpx;
				//     display: flex;
				// align-items: center;
				margin-top: 80rpx;
				margin-bottom: 0rpx;
				// padding: 20rpx;
				box-sizing: border-box;
			}
		}
	}

	.dataList {
		background-color: #fff !important;
		padding: 0 30rpx 40rpx !important;
		box-sizing: border-box;
	}

	/deep/.titleItem {
		// width: calc(100% - 120rpx) !important;
	}

	/deep/.scroll-view-item:nth-child(2n-1) {
		background-color: transparent !important;
	}

	.dataList {
		height: auto !important;
	}

	.small_class_teaching_box {
		padding-top: 20rpx;
		width: 100%;
		margin-top: 20rpx;
		background: #fff;

		.small_class_teaching_top {
			padding: 20rpx 20rpx 0 10rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			// background: #EDFCF7;
			color: #8f8e8e;

			// box-shadow: 0px 0px 6rpx 0px #E9DCCC;
			.icon1 {
				width: 50rpx;
				height: 50rpx;
			}

			.small_class_teaching_top_left {
				display: flex;
				align-items: center;
				color: #7dc1f0;

				font-family: MicrosoftYaHei;
			}
		}

		.small_class_teaching_content {
			margin-top: 20rpx;
			// background: #EDFCF7;
			padding-bottom: 10rpx;

			.top {
				padding: 20rpx 20rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 4rpx solid #fff;

				.top_item {
					width: 23%;
					font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
					font-weight: normal;
					font-size: 34rpx;
					color: #294a97;
					line-height: 80rpx;
					background: #cef8ea;
					text-align: center;
					border-radius: 10rpx;
					box-shadow: 0px 0px 6rpx 0px #e9dccc;
				}
			}

			.schedule {
				width: 100%;
				overflow: hidden;
				padding: 20rpx 20rpx;
				box-sizing: border-box;
				align-items: center;
				color: #018f89;

				font-family: MicrosoftYaHei;

				.icon_box {
					width: 100%;
					display: flex;
					align-items: center;
					margin-bottom: 0rpx;

					.icon1 {
						width: 50rpx;
						height: 50rpx;
						margin-right: 10rpx;
					}
				}

				.progress_box {
					width: 100%;
					display: flex;
					align-items: center;
					position: relative;

					.progress_icon {
						width: calc(100% - 240rpx);
					}

					.icon1 {
						width: 60rpx;
						height: 60rpx;
						margin: 0 20rpx;
					}

					.icon2 {
						width: 140rpx;
						height: 100rpx;
						position: absolute;
						right: 0;
						// margin-top: -20rpx;
					}
				}
			}
		}
	}

	.related_courses_box {
		background-color: #fff;

		.small_class_teaching_content {
			padding: 10rpx 20rpx;
			box-sizing: border-box;
		}
	}

	.related_courses_name {
		display: inline-block;
		width: calc(100% - 0rpx) !important;

		.aui-text-danger {
			display: inline-block;
			float: right;
		}
	}

	.original_price {
		font-size: 28rpx !important;
		font-weight: 500;
		color: #999 !important;
		white-space: nowrap;
		text-decoration: line-through;
		float: left;
		margin-top: 6rpx;
	}

	.price {
		font-size: 48rpx;
		font-weight: 700;
		float: left;
		margin-right: 10rpx;
		// font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
	}

	.price_box {
		width: 100%;
		overflow: hidden;
	}

	.commonTags {
		margin-right: 20rpx;
		margin-top: -5rpx !important;
	}

	.sales_number {
		text-decoration: none;
		color: #b0b0b0;
		font-weight: 500;
	}

	.miaosha_box {
		overflow: hidden;

		.countdown {
			display: flex;
			align-items: center;
			color: #fff;
			font-size: 24rpx;
		}

		.price_left {
			width: calc(100% - 300rpx);
			float: left;
		}

		.price_box {
			.price {
				color: #fff !important;
			}

			.original_price {
				color: #e4dede !important;
				font-weight: 500;
				margin-left: 20rpx;
				font-size: 26rpx !important;
			}

			.sales_number {
				display: block;
				width: 100%;
				color: #fff !important;
				font-weight: 500;
				padding-left: 10rpx;
				margin-left: 0rpx;
				font-size: 24rpx !important;
			}

			padding: 30rpx 20rpx 30rpx;
			background: linear-gradient(to right, #ff2701, #fd8d024d);
			// height: 100rpx;
		}

		.curriulum_title {
			padding: 20rpx 40rpx;
			margin-top: 20rpx !important;
		}
	}

	.normal_box {
		padding: 40rpx 30rpx;
	}

	.xianshimaiosha_box {
		width: 300rpx;
		height: 100%;
		float: right;
	}

	.xianshimaiosha {
		display: inline-block;
		width: 100%;
		line-height: 100rpx;
		font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
		font-weight: blod;
		font-size: 64rpx;
		color: red;
		text-align: right;
		padding-right: 20rpx;
		box-sizing: border-box;
		font-style: italic;
	}

	// .common_curriculum_list{

	// }
	/deep/.common_curriculum_list {
		margin-top: 20rpx;
		padding: 20rpx 20rpx 20rpx;

		.content_item {
			width: 100% !important;
			margin-bottom: 0 !important;
			padding: 15rpx 0 0rpx;
			border-top: 1rpx solid #f1f0f0;
			// height: 160rpx;

			.book_image {
				width: 60rpx !important;
				height: 60rpx !important;
				float: left !important;
				background-color: #f5f5f5;
			}

			.common_curriculum_item {
				width: calc(100% - 88rpx);
				float: right;
				display: block !important;

				// overflow: hidden;

				.related_courses_name {
					width: 100% !important;
				}
			}
		}

		.content_item:nth-child(1) {
			border-top: none !important;
		}
	}

	/deep/.common_section {
		padding: 0 !important;
		padding-bottom: 20rpx !important;
	}

	.goods_detail_list_title {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left {
			display: flex;
			align-items: center;
		}

		.right {
			font-size: 24rpx;
			font-weight: 500 !important;
			color: #333;
			font-family: none;
		}
	}

	.commonPageContentBox {
		height: auto !important;
	}

	.goods_item {
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// margin-bottom: 20rpx;
		padding: 10rpx 20rpx;
		border: 2rpx solid #fff;
		border-radius: 10rpx;
	}

	.title {
		box-sizing: border-box;
		// font-weight: bold;
		margin-bottom: 40rpx;
		padding-left: 20rpx;
	}

	.image_box {
		width: 70rpx;
		height: 70rpx;
		float: left;
		background-color: #f5f5f5;
	}

	.goods_image {
		width: 100%;
		height: 100%;
	}

	.goods_info {
		width: calc(100%);
		// padding: 10rpx 20rpx;
		box-sizing: border-box;
		// height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		float: left;

		.name {
			font-size: 26rpx;
			// font-weight: 600;
			color: #333;
		}

		.price {
			font-size: 26rpx;
			color: #aaa;
		}
	}

	.isSelectGoods {
		color: $themeColor !important;

		.name {
			color: $themeColor !important;
		}

		.price {
			color: $themeColor !important;
		}

		border: 2rpx solid $themeColor;
		border-radius: 10rpx;
	}

	/deep/.list_item {
		// border-bottom: none;
		padding: 10rpx 0 !important;
		padding-right: 0 !important;
	}

	.parameterList {
		/deep/.list_item {
			// border-bottom: none;
			padding: 0 !important;
			border: none !important;
			box-shadow: none !important;
		}

		.parameter_box {
			padding: 20rpx 0;
		}

		.goods_item {
			padding-top: 5rpx !important;
			padding-bottom: 5rpx !important;
		}
	}

	.parameter_info_box {
		padding: 0 20rpx;
	}

	.parameter_info {
		/deep/.list_item {
			// border-bottom: none;
			padding: 0 !important;
			border: none !important;
			box-shadow: none !important;
		}

		.goods_item {
			border: none !important;
		}
	}

	.goodsList {
		.image_box {
			width: 80rpx;
			height: 80rpx;
			float: left;
			background-color: #f5f5f5;
		}
	}

	/deep/.u-popup__content {
		background-color: transparent !important;
	}

	/deep/.u-popup__content__close {
		color: #fff !important;
	}

	.title_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 0;

		.title_price {
			color: #ef1224;
			font-size: 40rpx;
			font-weight: 700;
		}
	}

	.title_list {
		margin-bottom: 20rpx;
	}

	.book_box {
		.image_box {
			width: 160rpx;
			height: 160rpx;
		}

		.goods_info {
			display: block;
		}
	}
</style>