<template>
	<view class="cashier-page">
		<view class="header" :style="{paddingTop:statusBarHeight}">
			<view class="header-title">蜜丫妈妈</view>
			<view class="header-search">
				<image src="@/static/index/ss.png" mode="" class="header-img"></image>
				<input type="text" class="header-input" v-model="search" placeholder="搜索" @input="searchBox">
			</view>
			<view class="header-name">盲盒</view>
		</view>
		<view class="life-blindbox-page" :style="{paddingTop:statusBarHeight}">
			<view class="notice-main" @click="goNotice" >
				<view class="notice">
					<image src="@/static/index/gg.png" class="notice-img" mode=""></image>
					<view class="notice-txt">{{notice.summary ? notice.summary : '暂无公告'}}</view>
				</view>
			</view>
			<swiper class="activity-swiper" autoplay :indicator-dots="true" previous-margin="77rpx" next-margin='77rpx'
				indicator-active-color="#fff" indicator-color="#77797e" circular v-if="bannerTopList.length > 0">
				<swiper-item v-for="(item,index) in bannerTopList" :key="index" class="swiper-item" @click="rollingLink(item)">
					<view class="swiper-img" :style="{'backgroundImage':`url(${item.coverResource.url})`}"></view>
				</swiper-item>
			</swiper>
			<!-- <view style="word-break: break-all;">参数：{{JSON.stringify(loginParams)}}</view> -->
			<scroll-view class="scroll-view" scroll-x="true" scroll-with-animation
				:class="{'scroll-top':scrollTop > 200}">
				<view class="scroll-item" v-for="(item,index) in categoriesList" :key="index"
					@click="categoriesCk(item,index)">
					<view class="scroll-title" :class="{'title-active':categoriesIndex === index}">
						{{item.name}}
						<image src="@/static/index/dj.png" mode="" class="scroll-active" v-if="categoriesIndex === index"></image>
					</view>
				</view>
			</scroll-view>
			<view class="list-main">
				<view class="list" v-for="(item,index) in list" :key="index" @click="goDetail(item)">
					<image :src="item.coverResource.url" mode="" class="list-img"></image>
					<view class="info-title">{{item.name}}</view>

					<view class="list-info">
						<view class="price">
							<text class="price-sym">¥</text>
							<text>{{item.price[0].sale}}</text>
						</view>
						<view class="info-price">
						</view>
					</view>
				</view>
			</view>
			<view v-if="list.length === 0" style="padding-top: 200rpx;">
				<empty></empty>
			</view>
			<view class="no-data" v-if="total == list.length && list.length > 0">没有更多了～</view>
		</view>
		<!-- 弹框 -->
		<view class="dlg" v-if="adVisible && adStoreVisible == 'frist'" @click="close">
			<view class="dlg-main">
				<swiper class="dlg-swiper" autoplay :indicator-dots="true" circular previous-margin="120rpx" next-margin='120rpx'>
					<swiper-item v-for="(item,index) in popupList" :key="index" class="dlg-swiper-item" @click.stop="rollingLink(item)">
						<view class="dlg-swiper-img" :style="{'backgroundImage':`url(${item.coverResource.url})`}"></view>
						<!-- <image :src="item.coverResource.url" mode="aspectFill" ></image> -->
					</swiper-item>
					
				</swiper>
				<!-- <image src="../../static/order/close.png" mode="" class="close-img"></image> -->
				<image src="@/static/order/close.png" mode="" class="dlg-close-img" @click="close"></image>
			</view>
		</view>
		<FloatWindowCom></FloatWindowCom>
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/index/index"></page-popup>
	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight ? `${uni.getSystemInfoSync().statusBarHeight}px` : '20px'
	import {
		boxesPinnedApi,
		boxesTagsApi,
		boxesApi
	} from '@/API/index.js'
	import FloatWindowCom from '@/pages/components/floatWindow.vue'
	import { noticeTopApi,popupAdApi } from '@/API/user.js'
	import { loginXc } from '@/API/login.js'
	import md5 from 'crypto-js/md5';
	import Hex from 'crypto-js/enc-hex';

	export default {
		mixins: [myMixins],
		data() {
			return {
				statusBarHeight,
				scrollTop: 0,
				list: [],
				formData: {
					page: 1,
					size: 10,
					tagId: ""
				},
				bannerTopList: [], //顶部盲盒轮播
				categoriesList: [{
					name: '首页',
					id: '',
					seq: ''
				}], //分类
				categoriesIndex: 0, //分类选中
				total:0,
				search:'',
				timer:null,
				notice:{
					summary:''
				},
				popupList:[],
				adVisible:false,
				adStoreVisible:'frist',//是否第一次进入
				
				// 小川登录url带过来的参数
				loginParams:{
					appid:'',
					user_id:'',
					time:'',
					nickname:'',
					headimgurl:'',
					thirdToken:'',
					device:'',
					sign:'',
					gotoPath:''
				},
				appid:"",
				userid:"",
				time:"",
				gotoPath:"",
				
				
			}
		},
		components:{FloatWindowCom},
		onReachBottom() {
			if(this.total == this.list.length){
				return
			}
			this.formData.page += 1
			if(this.categoriesIndex === 0){
				// this.getBoxesPinned()
			}else{
				this.getBoxes()
			}
		},
		onPageScroll(res) {
			this.scrollTop = res.scrollTop
		},
		onLoad(option) {
			this.loginParams = option
			// url里有appid和userid的时候需要登录
			if(option.sign){
				this.login(option)
			}else if(!option.sign && option.appid && option.userid){
				
				this.loginParams.userid = option.userid
			// 获取当前时间的秒级时间戳
				const currentTimeInSeconds = Math.floor(Date.now() / 1000);
				console.log(currentTimeInSeconds);
				this.appid = option.appid
				this.userid = option.userid
				this.gotoPath = option.gotoPath ? option.gotoPath : ""
				this.time = currentTimeInSeconds
				let md5Str = ''
				if(this.gotoPath){
					md5Str = `appid=${this.appid}&gotoPath=${this.gotoPath}&time=${this.time}&userid=${this.userid}&key=${this.appid}`
				}else{
					md5Str = `appid=${this.appid}&time=${this.time}&userid=${this.userid}&key=${this.appid}`
				}
				// md5加密
				let sign = this.generate16BitMD5(md5Str)
				this.loginParams.sign = sign
				this.loginParams.time = this.time
				this.login(this.loginParams)
			}else{
				try{
					this.adStoreVisible = uni.getStorageSync('ad') ? uni.getStorageSync('ad') : 'frist'
				}catch(e){
					//TODO handle the exception
					this.adStoreVisible = 'frist'
				}
				this.getBoxesTags()
				this.getNoticeTop()
				this.getPopupAd('HOMEPAGE_CAROUSEL')
				this.getPopupAd('HOMEPAGE_POPUP')
				if(this.categoriesIndex === 0){
					this.getBoxesPinned()
				}else{
					this.getBoxes()
				}
			}
			// console.log(this.generate16BitMD5('appid=1773995642561630208&time=1711792318&userid=hkjkk&key=1773995642561630208'))
		},
		methods: {
			login(data){
				loginXc(data).then(res => {
					if(res.code === 200){
						try{
							this.adStoreVisible = uni.getStorageSync('ad') ? uni.getStorageSync('ad') : 'frist'
						}catch(e){
							//TODO handle the exception
							this.adStoreVisible = 'frist'
						}
						this.getBoxesTags()
						this.getNoticeTop()
						this.getPopupAd('HOMEPAGE_CAROUSEL')
						this.getPopupAd('HOMEPAGE_POPUP')
						if(this.categoriesIndex === 0){
							this.getBoxesPinned()
						}else{
							this.getBoxes()
						}
					}else{
						this.$api.msg(res.message)
					}
				})
			},
			close(){
				uni.setStorageSync('ad','behind')
				this.adVisible = false
			},
			generate16BitMD5(data) {
			    let md5Digest = md5(data).toString(Hex);
			    return md5Digest.substring(8, 24); // 截取前16位
			},
			// 获取广告弹窗/轮播
			getPopupAd(type){
				// HOMEPAGE_CAROUSEL 轮播
				// HOMEPAGE_POPUP 弹窗
				popupAdApi({type}).then(res => {
					if(res.code === 200){
						if(type === 'HOMEPAGE_CAROUSEL'){
							this.bannerTopList = res.data
						}
						if(type === 'HOMEPAGE_POPUP'){
							this.popupList = res.data
							if(this.popupList.length > 0){
								this.adVisible = true
							}
						}
					}else{
						this.$api.msg(res.message)
					}
				})
			},
			// 获取置顶公告
			getNoticeTop(){
				noticeTopApi().then(res => {
					if(res.code === 200){
						if(res.data){
							this.notice = res.data
						}
						
					}else{
						this.$api.message(res.message)
					}
				})
			},
			goNotice(){
				if(!this.notice.summary){
					return
				}
				uni.navigateTo({
					url:`/pages/mine/noticeDetail?id=${this.notice.id}`
				})
			},
			// 搜索盲盒
			searchBox(){
			  if (this.timer) {
				clearTimeout(this.timer);
			  }
			  // 设置新的定时器
			  this.timer = setTimeout(() => {
				this.handleSearch();
			  }, 500); // 延迟500毫秒执行搜索操作
			},
			handleSearch(){
				// if()
				if(this.categoriesIndex === 0){
					this.getBoxesPinned()
				}else{
					this.getBoxes()
				}
			},
			// 获取首页盲盒
			getBoxesPinned() {
				let data = {
					name:this.search
				}
				boxesPinnedApi(data).then(res => {
					if (res.code === 200) {
						this.list = res.data
					}else{
						this.$api.msg(res.message)
					}
				})
			},
			// 获取盲盒标签
			getBoxesTags() {
				boxesTagsApi().then(res => {
					if (res.code === 200) {
						res.data.forEach(item => {
							this.categoriesList.push(item)
						})
					} else {
						this.$api.msg(res.message)
					}
				})
			},
			// 获取盲盒分页
			getBoxes() {
				if(this.search){
					this.formData['name'] = this.search
				}
				
				boxesApi(this.formData).then(res => {
					if (res.code === 200) {
						this.total = res.data.total
						if (this.formData.page > 1) {
							this.list = [...this.list, ...res.data.content]
						} else {
							this.list = res.data.content
						}
					} else {
						this.$api.msg(res.message)
					}
				})
			},
			rollingLink(item) {
				
				if (item.link) {
					if (item.link.type === 'INSIDE') {
						uni.navigateTo({
							url: `${item.link.url}`
						})
					} else {
						window.open(item.link.url)
						// uni.navigateTo({
						// 	url: `/pages/webView/index?url=${item.link}`
						// })
					}

				}
			},
			categoriesCk(item, index) {
				this.categoriesIndex = index;
				this.formData = {
					page: 1,
					size: 10,
					tagId: item.id
				}
				this.search = ""
				this.list = []
				if(this.categoriesIndex === 0){
					this.getBoxesPinned()
				}else{
					this.getBoxes()
				}
			},

			goDetail(item) {
				// 跳转详情
				uni.navigateTo({
					url: `/pages/index/detail?id=${item.id}`
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-image: url('@/static/index/bg.png');
		background-size: 100%;
	}

	.header {
		position: fixed;
		z-index: 10;
		width: 100%;
		left: 0;
		display: flex;
		align-items: center;
		background-color: #F9F6F7;
		padding-bottom: 10rpx;

		.header-title {
			font-weight: 400;
			font-size: 50rpx;
			color: #000000;
			font-family: YouSheBiaoTiHei;
			margin-left: 28rpx;
		}

		.header-search {
			margin-left: 45rpx;
			position: relative;
			width: 334rpx;
			height: 65rpx;
			background: #FFFFFF;
			border-radius: 33rpx;

			.header-img {
				position: absolute;
				top: 18rpx;
				left: 22rpx;
				width: 29rpx;
				height: 29rpx;
			}

			.header-input {
				font-size: 24rpx;
				color: #000000;
				width: 334rpx;
				height: 65rpx;
				padding-left: 60rpx;
				padding-right: 10rpx;
			}

		}

		.header-name {
			margin-left: 45rpx;
			font-weight: bold;
			font-size: 33rpx;
			color: #000000;
		}
	}

	.life-blindbox-page {
		.notice-main {
			padding-top: 90rpx;

			.notice {
				background-color: #fff;
				margin-left: 22rpx;
				width: 706rpx;
				height: 67rpx;
				border-radius: 34rpx;
				display: flex;
				align-items: center;
				padding: 17rpx 26rpx;

				.notice-img {
					width: 33rpx;
					height: 28rpx;
				}

				.notice-txt {
					width: 600rpx;
					margin-left: 9rpx;
					font-size: 24rpx;
					color: #888888;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
		}


		.page-bg {
			position: fixed;
			z-index: -1;
			top: 0;
			left: 0;
			width: 100%;
			height: 320rpx;
		}

		.activity-swiper {
			width: 100%;
			height: 266rpx;
			overflow: hidden;
			margin-top: 14rpx;

			.swiper-item {
				width: 556rpx;
				display: flex;
				justify-content: center;

				.swiper-img {
					width: 556rpx;
					height: 266rpx;
					display: block;
					background-repeat: no-repeat;
					background-size: 100%;
					background-position: 50%;
					transform: scale(1);
					transition: transform 0.3s ease-in-out 0s;
					border-radius: 32rpx;
				}
			}
		}


		.empty-img {
			display: block;
			margin: 50rpx auto;
			width: 508rpx;
			height: 482rpx;
		}


		.scroll-view {
			width: 100%;
			white-space: nowrap;
			padding-top: 43rpx;
			z-index: 10;

			.scroll-item {

				display: inline-block;
				text-align: center;
				margin-left: 53rpx;

				.scroll-bg {
					width: 72rpx;
					height: 72rpx;
					border-radius: 50%;
				}

				.scroll-title {
					font-weight: 400;
					font-size: 32rpx;
					color: #6D6D6D;
					display: flex;
					flex-direction: column;
					align-items: center;

					.scroll-active {
						width: 42rpx;
						height: 18rpx;
						margin-top: 13rpx;
						// border: 1px solid red;
					}
				}

				.title-active {
					font-weight: bold;
					font-size: 38rpx;
					color: #333333;
				}
			}
		}

		.scroll-top {
			position: fixed;
			top: 100rpx;
			left: 0;
			background-color: #F9F6F7;
		}
		.no-data{
			font-size: 24rpx;
			text-align: center;
			padding: 10rpx 0 30rpx 0;
		}
		.list-main {
			display: grid;
			gap: 12rpx;
			grid-template-rows: 1fr;
			margin: 0px auto;
			grid-template-columns: repeat(2, 1fr);
			padding: 35rpx 22rpx;
			background: linear-gradient(181deg, #FFEAEE 0%, rgba(247, 207, 215, 0) 100%);
			border: 2rpx solid #FFFFFF;
			border-bottom: none;
			border-radius: 32rpx 32rpx 0 0;
			margin-top: -5.7rpx;
			

			.list {
				width: 347rpx;
				height: 380rpx;
				background: #fff;
				border-radius: 20rpx;
				padding: 10rpx;

				.list-img {
					width: 327rpx;
					height: 272rpx;
					background: #FFFFFF;
					border-radius: 6rpx;
				}

				.info-title {
					padding: 0 10rpx;
					margin-top: 15rpx;
					font-size: 22rpx;
					color: #333333;
					width: 320rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}


				.list-info {
					width: 320rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 10rpx;
					// margin-top: 22rpx;

					.info-sub {
						color: #999999;
						font-size: 24rpx;
						// width: 398rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.price {
						font-size: 28rpx;
						font-family: YouSheBiaoTiHei;
						color: #FB2851;

						.price-sym {}
					}

					.info-price {
						display: flex;
						align-items: center;

						.price {
							color: #FF2F54;
							font-size: 32rpx;

							.price-sym {
								font-size: 28rpx;
							}
						}

						.sold {
							font-size: 20rpx;
							color: #999999;
						}
					}

					.minimum {
						width: 322rpx;
						height: 46rpx;
						display: flex;
						align-items: center;
						background-image: url(https://box-mall.oss-cn-hangzhou.aliyuncs.com/static/wx/box/bg2.png);
						background-size: 100%;
						background-repeat: no-repeat;

						// margin-top: 16rpx;
						.minimum-img {
							width: 36rpx;
							height: 36rpx;
							margin-left: 4rpx;
						}

						.minimum-txt {
							margin-left: 16rpx;
							color: #FFFFFF;
							font-size: 24rpx;
							font-family: YouSheBiaoTiHei;
						}

						.minimum-price {
							margin-left: 40rpx;
							color: #ED9E37;
							font-size: 20rpx;
						}
					}

					.tag {
						// margin-top: 10rpx;
						display: flex;
						align-items: center;

						.tag-item {
							margin-right: 12rpx;
							width: 70rpx;
							height: 70rpx;
							border: 1px solid #E9E9E9;
							border-radius: 10rpx;
						}
					}
				}
			}
		}

	}
		.dlg{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			background-color: rgba(0,0,0,0.5);
			z-index: 9999;
			display: flex;
			align-items: center;
			justify-content: center;
			.dlg-main{
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				.dlg-swiper{
					// width: 402rpx;
					width: 750rpx;
					height: 580rpx;
					border-radius: 20rpx;
					.dlg-swiper-item{
						width: 468rpx;
						height: 580rpx;
						border-radius: 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						.dlg-swiper-img{
							width: 468rpx;
							height: 580rpx;
							border-radius: 20rpx;
							background-repeat: no-repeat;
							background-size: 100%;
							background-position: center;
							transform: scale(1);
							transition: transform 0.3s ease-in-out 0s;
						}
					}
					
				}
				.dlg-close-img{
					margin-top: 23rpx;
					width: 48rpx;
					height: 48rpx;
					z-index: 9999;
				}
			}
		}
</style>