<template>
	<view class="web_box">
		<u-navbar title="积分商城" height="44" :fixed="false" :autoBack="true" bgColor="rgba(0,0,0,0)">
			<!-- <view class="u-nav-slot" slot="left">
			</view> -->
		</u-navbar>
		<view class="top hflex acenter jbetween">
			<view class="hflex acenter">
				<u-avatar :src="user.headimg" size="52px"></u-avatar>
				<view class="vflex" style="padding-left: 12rpx;">
					<view class="top_name">{{user.user_name}}</view>
					<view class="hflex acenter" style="padding-top: 8rpx;">
						<image src="/static/images/integral/integral.png" mode="widthFix" style="width: 44rpx;"></image>
						<view class="top_integral">积分：{{user.integral?user.integral:0}}</view>
					</view>
				</view>
			</view>
			<view class="rule" @click="seeRule">积分规则</view>
		</view>
		<view class="tabs">
			<view class="hflex acenter" style="margin: 16rpx 0;">
				<scroll-view scroll-x="true" style="white-space: nowrap;">
					<block v-for="(item,index) in tabs" :key="index">
						<view class="tabs1" :class="active == index ? 'active' : ''" @click="changeTabs(index)">{{item.title}}</view>
					</block>
				</scroll-view>
			</view>
			<view class="hflex acenter" style="margin: 16rpx 0;">
				<scroll-view scroll-x="true" style="white-space: nowrap;">
					<block v-for="(item,index) in tabs[active].child" :key="index">
						<view class="tabs2" :class="active2 == index ? 'active2' : ''" @click="changeTabs2(index)">{{item.title}}</view>
					</block>
				</scroll-view>
			</view>
			<view class="tabs3 hflex acenter jbetween">
				<block v-for="(item,index) in tabs3" :key="index">
					<view class="tabs3_item" :class="active3 == index ? 'active3' : ''" @click="changeTabs3(index)">{{item.name}}</view>
				</block>
				<view class="interval hflex acenter jbetween" @click="showRange = true">
					<view>价格区间</view>
					<u-icon name="arrow-down-fill" color="#666666" size="8"></u-icon>
				</view>
			</view>
		</view>
		<view class="list hflex fwrap acenter">
			<block v-for="(item,index) in goods" :key="index">
				<view class="list_item" @click="toDetail(index)">
					<image :src="item.img" mode="widthFix" style="width: 302rpx;border-radius: 16rpx;"></image>
					<view class="item_title">{{item.name}}</view>
					<view class="hflex acenter" style="padding: 10rpx 0 14rpx;">
						<view class="text_style1">讲师：{{item.lecturer}}</view>
						<view class="text_style1" style="padding-left: 26rpx;">总学时：{{item.period}}学时</view>
					</view>
					<view class="hflex acenter">
						<image src="/static/images/integral/integral.png" mode="widthFix" style="width: 44rpx;"></image>
						<view class="price">{{item.price}}</view>
					</view>
				</view>
			</block>
		</view>
		<!-- 积分规则 -->
		<u-modal :show="showRule" :title="ruleTitle" confirmColor="#2988FE" @confirm="showRule = false">
			<view class="slot-content">
				<rich-text :nodes="ruleContent"></rich-text>
			</view>
		</u-modal>
		<!-- 价格区间 -->
		<u-popup :show="showRange" @close="showRange = false" mode="bottom" :round="12">
			<view class="popup">
				<view class="popup_title hflex">
					<view>价格区间<span style="font-size: 28rpx;">(积分)</span></view>
				</view>
				<view class="popup_content">
					<view class="hflex acenter jaround">
						<u--input type="number" placeholder="自定最低价" v-model="minPrice" @change="change"></u--input>
						<view>——</view>
						<u--input type="number" placeholder="自定最高价" v-model="maxPrice"></u--input>
					</view>
					<view class="hflex acenter jaround" style="padding-top: 40rpx;">
						<block v-for="(item,index) in range" :key="index">
							<view class="item" :class="active4 == index ? 'active4' : ''" @click="selePrice(index)">{{item.minPrice}}-{{item.maxPrice}}</view>
						</block>
					</view>
				</view>
				<view class="hflex acenter">
					<view class="btn1" @click="cancel">取消</view>
					<view class="btn2" @click="finish">完成</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	export default {
		data() {
			return {
				user: {},
				showRule: false,
				ruleTitle: '积分规则',
				ruleContent: '',
				tabs: [],
				active: 0,
				tabs2: [],
				active2: 0,
				tabs3: [
					{
						name: '综合'
					},
					{
						name: '销量'
					},
					{
						name: '价格'
					}
				],
				active3: 0,
				goods: [],
				showRange: false,
				minPrice: '',
				maxPrice: '',
				range: [
					{
						minPrice: 0,
						maxPrice: 1000,
					},
					{
						minPrice: 1000,
						maxPrice: 5000,
					},
					{
						minPrice: 5000,
						maxPrice: 10000,
					},
				],
				active4: -1,
				page: 1,
				limit: 10,
				total: 0,
			}
		},
		onLoad() {
			this.getUser()
			this.courseIntegralCate()
			
		},
		onShow() {
			this.getUser()
			this.courseIntegralCate()
		},
		methods: {
			// 获取用户信息
			getUser() {
				var that = this
				$api.req({
					url: '/api/User/userinfo'
				}, function(res) {
					console.log("个人信息：",res);
					if (res.code == 1) {
						that.user = res.data
					}
				})
			},
			// 获取商城分类
			courseIntegralCate() {
				var that = this
				$api.req({
					url: '/api/Index/courseIntegralCate'
				}, function(res) {
					console.log("商城分类：",res);
					if (res.code == 1) {
						that.tabs = res.data
						that.courseIntegrallist()
					}else {
						$api.info(res.msg)
					}
				})
			},
			// 获取商城列表
			courseIntegrallist() {
				var that = this
				$api.req({
					url: '/api/Index/courseIntegrallist',
					data: {
						page: that.page,
						limit: that.limit,
						cate_one_id: that.tabs[that.active].id,
						cate_two_id: that.tabs[that.active].child[that.active2].id,
						order: that.active3 + 1,
						price_min: that.minPrice,
						price_max: that.maxPrice,
					}
				}, function(res) {
					console.log("商城列表：",res);
					if (res.code == 1) {
						if (that.page > 1) {
							that.goods = that.goods.concat(res.data.list)
						} else {
							that.goods = res.data.list
							that.total = res.data.count
						}
						
						
					}
				})
			},
			// 切换tabs
			changeTabs(index) {
				this.active = index
				this.page = 1
				this.courseIntegrallist()
			},
			// 切换第2个tabs
			changeTabs2(index) {
				this.active2 = index
				this.page = 1
				this.courseIntegrallist()
			},
			// 切换第三个tabs
			changeTabs3(index) {
				this.active3 = index
				this.page = 1
				this.courseIntegrallist()
			},
			// 选择价格区间 
			selePrice(index) {
				this.active4 = index
			},
			change() {
				this.active4 = -1
			},
			// 确定区间
			finish() {
				var that = this
				that.showRange = false
				if (that.active4 !== -1) {
					that.minPrice = that.range[that.active4].minPrice
					that.maxPrice = that.range[that.active4].maxPrice
				}
				this.page = 1
				that.courseIntegrallist()
				that.active4 = -1
			},
			// 返回
			cancel() {
				that.showRange = false
				that.active4 = -1
			},
			// 具体课程
			toDetail(index) {
				var login = uni.getStorageSync('token') 
				if (login) {
					$api.jump('/pages/index/course/detail?id=' + this.goods[index].id)
				} else {
					$api.info('请先登录')
				}
				
			},
			// 触底事件
			onReachBottom() {
				console.log("到底了");
				console.log(this.page );
				console.log(this.limit);
				console.log(Number(this.total));
				if (Number(this.page) * Number(this.limit) >= Number(this.total)) {
					$api.info("没有更多了")
				} else {
					this.page++
					this.courseIntegrallist()
				}
			},
			// 积分规则
			seeRule() {
				var that = this
				$api.req({
					url: '/api/Publics/config_info'
				}, function(res) {
					if (res.code == 1) {
						that.ruleContent = res.data.integration_rule
						that.showRule = true
					}
				})
				
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.web_box::v-deep {
		background: url('@/static/images/integral/bg.png') no-repeat;
		background-size: 100%;
		padding: 0 40rpx;
		// height: 110vh;
		
		.u-navbar {
			width: 100%;
			box-sizing: border-box;
			padding: 0 16px 0 0;
		}
		.top {
			margin-top: 44rpx;
			width: 100%;
			box-sizing: border-box;
			padding: 26rpx 0;
		}
		.top_name {
			font-size: 16px;
			font-weight: 500;
			color: #333333;
			line-height: 22px;
		}
		.top_integral {
			font-size: 12px;
			font-weight: 600;
			color: #333333;
			line-height: 17px;
		}
		.rule {
			font-size: 14px;
			font-weight: 400;
			color: #333333;
			line-height: 20px;
		}
		.tabs1 {
			font-weight: 400;
			color: #999999;
			font-size: 32rpx;
			margin-right: 36rpx;
			display:inline-block;
		}
		.active {
			position: relative;
			font-size: 40rpx;
			color: #333333;
			font-weight: 500;
		}
		.active::after {
			position: absolute;
			content: "";
			left: 0;
			bottom: -5rpx;
			width: 120rpx;
			height: 5rpx;
			background: linear-gradient(270deg, #2988FE 0%, rgba(41,136,254,0) 100%);
		}
		.tabs2 {
			width: 208rpx;
			height: 42rpx;
			background: #FFFFFF;
			border-radius: 4px;
			font-size: 14px;
			font-weight: 500;
			color: #666666;
			text-align: center;
			line-height: 42rpx;
			margin-right: 36rpx;
			display:inline-block;
		}
		.active2 {
			color: #2988FE;
			background: #DBEBFF;
		}
		.tabs3 {
			width: 100%;
			margin: 22rpx 0 30rpx;
			box-sizing: border-box;
			padding: 8rpx 16rpx;
			background: #FFFFFF;
			box-shadow: 0px 2px 3px 0px rgba(213,213,213,0.5);
			border-radius: 8rpx;
		}
		.tabs3_item {
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
			margin-right: 95rpx;
		}
		.active3 {
			color: #2988FE;
		}
		.interval {
			width: 156rpx;
			background: #EEEEEE;
			border-radius: 8px;
			box-sizing: border-box;
			padding: 8rpx 14rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #666666;
		}
		.list_item {
			width: 320rpx;
			background: #FFFFFF;
			box-shadow: 0px 2px 6px 0px rgba(213,213,213,0.5);
			border-radius: 24rpx;
			box-sizing: border-box;
			padding: 8rpx;
			margin: 0 26rpx 20rpx 0;
		}
		.list_item:nth-child(2n) {
			margin-right: 0;
		}
		.item_title {
			font-size: 26rpx;
			font-weight: 600;
			color: #333333;
		}
		.text_style1 {
			font-size: 20rpx;
			font-weight: 400;
			color: #999999;
		}
		.price {
			font-size: 30rpx;
			font-weight: 600;
			color: #F7B500;
		}
		.popup {
			width: 100%;
			box-sizing: border-box;
			padding: 26rpx 30rpx;
			background: #FFFFFF;
			box-shadow: 0px 2px 6px 0px rgba(213,213,213,0.5);
		}
		.popup_title {
			font-size: 36rpx;
			font-weight: 500;
			color: #333333;
		}
		.popup_content {
			width: 100%;
			padding: 38rpx 0 102rpx;
		}
		.u-input {
			width: 272rpx !important;
			height: 50rpx;
			background: #EEEEEE;
			border-radius: 16rpx !important;
			
		}
		.u-input__content__field-wrapper__field {
			
			text-align: center !important;
		}
		.item {
			width: 174rpx;
			height: 50rpx;
			background: #EEEEEE;
			border-radius: 16rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #333333;
			text-align: center;
			line-height: 50rpx;
		}
		.active4 {
			background: #2988FE;
			color: #FFFFFF;
		}
		.btn1 {
			width: 340rpx;
			height: 64rpx;
			background: #A5CDFF;
			border-radius: 48px 0px 0px 48px;
			text-align: center;
			font-size: 36rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 64rpx;
		}
		.btn2 {
			width: 340rpx;
			height: 64rpx;
			background: linear-gradient(135deg, #53BDFF 0%, #2988FE 100%);
			border-radius: 0px 48px 48px 0px;
			text-align: center;
			font-size: 36rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 64rpx;
		}
	}
</style>