<template>
	<view class="beijin">
		<view class="toplogin">
			<!-- <image src="../../static/toplogin.png"></image> -->
			<view>奇点艺术</view>
		</view>
		<ls-swiper class='lunbo' :list="swiperList" imgKey="pictureUrl" :crown="true" :loop="true" :interval='4000'
			:autoplay='true' :shadow='true' height='130' previousMargin="120" nextMargin='120' imgRadius="5"
			@clickItem='xuanzhong' />
	</view>
	<view class="Collections">
		<view class="Collections_top" @click="golist">
			<view>
				<image class="img1" src="../../static/Frame.png"></image>
				<view>热门作品</view>
			</view>
			<view>
				<image class="img2" src="../../static/youshou.png"></image>
			</view>
		</view>
		<scroll-view scroll-x="true" class="Collections_biaoqian">
			<view style="display: flex;">
				<view class="neir" v-for="(item,index) in zuopin" @click="shichangset(index,item)" :class="scstate==index?'xz':''">
					{{item.seriesName}}
				</view>
			</view>
		</scroll-view>
		<scroll-view scroll-x="true" class="Collections_content">
			<view class="items">
				<view @click="godateils(item)" v-for="(item,index) in zuopinlist">
					<view v-if="item.state==2||item.state==3" class="daojis">
						<image src="../../static/daojs.png"></image>
						<view>{{item.timeSale}}</view>
					</view>
					<image :src="item.tupian"></image>
					<view class="neiron">
						<view>{{item.collectionName}}</view>
						<!-- <view :class="item.state!=4?'myl':''">￥{{item.price}}</view> -->
						<view :style="item.ismw||item.numberRemaining==0||item.state==7||item.sfgm?'background: #8D8C9F;':''">￥{{item.price}}</view>
					</view>
					<view class="waicheng">
						<view class="maoboli">

						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
	<view class="paihangbang">
		<view class="paihangbang_top">
			<view @click="phbsset(1)">
				<image src="../../static/yaoqing.png"></image>
				<view>邀请排行榜</view>
				<view :class="phbstate==1?'ddd xz':'ddd'"></view>
			</view>
			<view @click="phbsset(2)">
				<image src="../../static/mingreng.png"></image>
				<view>藏品名人榜</view>
				<view :class="phbstate==2?'ddd xz':'ddd'"></view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="paihangbang_scrv" @scrolltoupper='paihbxx' @scrolltolower='jiazai'>
		<!-- <scroll-view scroll-y="true" class="paihangbang_scrv" @scrolltoupper='' @scrolltolower=''> -->
			<view class="paiminglist">
				<view v-if="paihb.length!=0" v-for="(item,index) in paihb">
					<view>
						<view :class="index==0?'item1':index==1?'item2':index==2?'item3':'item4'">{{index+1}}</view>
						<image :src="item.headPhoto"></image>
						<view class="neiron">{{item.nickname}}</view>
					</view>
					<view>
						<image :src="phbstate==1?'../../static/huohua1.png':'../../static/huohua.png'"></image>
						<view>{{phbstate==1?item.numberInvitation:item.numberInvitation}}</view>
					</view>
				</view>
				<view v-if="paihb.length==0" style="color: #ffffff;text-align: center;margin: auto;">暂无排名</view>
			</view>
		</scroll-view>
	</view>
	<tabber selecttb='1'></tabber>
</template>

<script>
	import {
		progressionslideshow,
		progressionclassification,
		progressionnewWorks,
		progressioncriticism,
		progressioninvitation
	} from '@/api/user.js'
	import tabber from '../../components/tabber/tabber.vue'
	import LsSwiper from '../../components/ls-swiper/index.vue'
	import {
		reactive,
		ref
	} from 'vue'
	export default {
		components: {
			LsSwiper
		},
		onShow() {
			progressionslideshow({}).then(res => {
				console.log(res, '轮播');
				this.swiperList = res.data
			})
			progressionclassification({}).then(res => {
				// console.log(res);
				this.zuopin = res.data
				progressionnewWorks({
					id: res.data[this.scstate].id
				}).then(res => {
					console.log(res);
					this.zuopinlist = res.data.list
					let user=uni.getStorageSync('users')
					this.zuopinlist.map(item=>{
						if(item.state==2||item.state==3){
							let deadTime = new Date(item.timeSale.replace(/-/g, "/")).getTime()
							let nowTime = new Date().getTime()
							if(deadTime>nowTime){
								item.ismw=true
							}else{
								item.ismw=false
							}
						}else{
							item.ismw=false
						}
						item.tupian=item.surfacePlot
						let uti=new Date(res.data.utime.replace(/-/g, "/")).getTime()
						let tim=''
						if(user){
							tim=new Date(user.createdTime.replace(/-/g, "/")).getTime()
						}
						console.log(uti,'uti',tim,'tim');
						if(!user){
							item.sfgm=false
						}else if(item.newcomer&&uti>tim){
							item.sfgm=true
						}else{
							item.sfgm=false
						}
						item.timeSale=item.timeSale.substring(5)
						let riqi=item.timeSale.split(' ')
						let nry=riqi[0].split('-')
						let strrq=Number(nry[0])+'月'+Number(nry[1])+'日 '+riqi[1]
						item.timeSale=strrq
						return item
					})
					console.log();
				})
			})
		},
		onHide() {
			uni.hideLoading()
		},
		setup() {
			let scstate = ref(0) //市场状态
			let phbstate = ref(1) //排行榜状态
			function shichangset(value, item) {
				scstate.value = value
				progressionnewWorks({
					id: item.id
				}).then(res => {
					console.log(res);
					zuopinlist.value = res.data.list
					let user=uni.getStorageSync('users')
					zuopinlist.value.map(item=>{
						if(item.state==2||item.state==3){
							let deadTime = new Date(item.timeSale.replace(/-/g, "/")).getTime()
							let nowTime = new Date().getTime()
							if(deadTime>nowTime){
								item.ismw=true
							}else{
								item.ismw=false
							}
						}else{
							item.ismw=false
						}
							item.tupian=item.surfacePlot
						let uti=new Date(res.data.utime.replace(/-/g, "/")).getTime()
						let tim=''
						if(user){
							tim=new Date(user.createdTime.replace(/-/g, "/")).getTime()
						}
						// console.log(uti,'uti',tim,'tim');
						if(!user){
							item.sfgm=false
						}else if(item.newcomer&&uti>tim){
							item.sfgm=true
						}else{
							item.sfgm=false
						}
						item.timeSale=item.timeSale.substring(5)
						let riqi=item.timeSale.split(' ')
						let nry=riqi[0].split('-')
						let strrq=Number(nry[0])+'月'+Number(nry[1])+'日 '+riqi[1]
						item.timeSale=strrq
						return item
					})
				})
			}
			let paihb = ref([])

			function phbsset(value) {
				paihb.value = []
				phbstate.value = value
				paihbxx()
			}
			let page=1
			let sfyjzj=false
			function paihbxx() {
				page=1
				sfyjzj=false
				uni.showLoading({
					title:'加载中'
				})
				// if (phbstate.value == 1) {
				// 	progressioninvitation({pageNum:page,pageSize:10}).then(res => {
				// 		// console.log(res);
				// 		uni.hideLoading()
				// 		paihb.value = res.data
				// 		paihb.value.map((item,index)=>{
				// 			item.nickname=item.nickname.replace(/梵/g, "*")
				// 			item.nickname=item.nickname.replace(/核/g, "*")
				// 			item.nickname=item.nickname.replace(/v/g, "*")
				// 			item.nickname=item.nickname.replace(/拉/g, "*")
				// 			item.nickname=item.nickname.replace(/cm/g, "**")
				// 			item.nickname=item.nickname.replace(/55/g, "**")
				// 			item.nickname=item.nickname.replace(/00/g, "**")
				// 			return item
				// 		})
				// 	})
				// } 
				// else if (phbstate.value == 2) {
				// 	progressioncriticism({pageNum:page,pageSize:10}).then(res => {
				// 		// console.log(res);
						uni.hideLoading()
				// 		paihb.value = res.data
				// 		paihb.value.map((item,index)=>{
				// 			item.nickname=item.nickname.replace(/梵/g, "*")
				// 			item.nickname=item.nickname.replace(/核/g, "*")
				// 			item.nickname=item.nickname.replace(/v/g, "*")
				// 			item.nickname=item.nickname.replace(/拉/g, "*")
				// 			item.nickname=item.nickname.replace(/cm/g, "**")
				// 			item.nickname=item.nickname.replace(/55/g, "**")
				// 			item.nickname=item.nickname.replace(/00/g, "**")
				// 			return item
				// 		})
				// 	})
				// }
			}
			
			function jiazai(){
				page++
				uni.showLoading({
					title:'加载中'
				})
				if(sfyjzj){
					return
				}
				sfyjzj=true
				// if (phbstate.value == 1) {
				// 	progressioninvitation({pageNum:page,pageSize:10}).then(res => {
				// 		sfyjzj=false
				// 		uni.hideLoading()
				// 		if(res.data==null){
				// 			uni.showToast({
				// 				title:'已经到底啦',
				// 				icon:'none',
				// 				duration:2000
				// 			})
				// 			page--
				// 			return
				// 		}
				// 		res.data.map(item=>{
				// 			paihb.value.push(item)
				// 		})
				// 		paihb.value.map((item,index)=>{
				// 			item.nickname=item.nickname.replace(/梵/g, "*")
				// 			item.nickname=item.nickname.replace(/核/g, "*")
				// 			item.nickname=item.nickname.replace(/v/g, "*")
				// 			item.nickname=item.nickname.replace(/拉/g, "*")
				// 			item.nickname=item.nickname.replace(/cm/g, "**")
				// 			item.nickname=item.nickname.replace(/55/g, "**")
				// 			item.nickname=item.nickname.replace(/00/g, "**")
				// 			return item
				// 		})
				// 	})
				// }
				//  else if (phbstate.value == 2) {
				// 	progressioncriticism({pageNum:page,pageSize:10}).then(res => {
				// 		sfyjzj=false
						uni.hideLoading()
				// 		if(res.data==null){
				// 			uni.showToast({
				// 				title:'已经到底啦',
				// 				icon:'none',
				// 				duration:2000
				// 			})
				// 			page--
				// 			return
				// 		}
				// 		res.data.map(item=>{
				// 			paihb.value.push(item)
				// 		})
				// 		paihb.value.map((item,index)=>{
				// 			item.nickname=item.nickname.replace(/梵/g, "*")
				// 			item.nickname=item.nickname.replace(/核/g, "*")
				// 			item.nickname=item.nickname.replace(/v/g, "*")
				// 			item.nickname=item.nickname.replace(/拉/g, "*")
				// 			item.nickname=item.nickname.replace(/cm/g, "**")
				// 			item.nickname=item.nickname.replace(/55/g, "**")
				// 			item.nickname=item.nickname.replace(/00/g, "**")
				// 			return item
				// 		})
				// 	})
				// }
			}
			paihbxx()
			//banner
			let swiperList = ref([{
					imgUrl: '../../static/banner.png',
					id: 1,
					state: 0
				},
				{
					imgUrl: '../../static/banner.png',
					id: 1,
					state: 0
				},
				{
					imgUrl: '../../static/banner.png',
					id: 1,
					state: 0
				},
			])
			
			//作品分类
			let zuopin = ref([])
			let zuopinlist = ref([])
			

			function godateils(item) {
				uni.navigateTo({
					url: '../details/details?id=' + item.id
				})
			}

			function golist() {
				uni.navigateTo({
					url: '../liebiao/liebiao'
				})
			}

			function xuanzhong(item) {
				console.log(item);
				if (item.state == 6) {
					let user = uni.getStorageSync('users')
					console.log(user == '');
					if (user == '') {
						uni.navigateTo({
							url: '../login/login'
						})
						return
					}
					if (user.realNameState) {
						uni.navigateTo({
							url: '../realname/realname?issm=true'
						})
					} else {
						uni.navigateTo({
							url: '../realname/realname?issm=false'
						})
					}
				}else if(item.state == 4){
					uni.navigateTo({
						url: '../details/details?id=' + item.objectId
					})
				}else if(item.state==1||item.state==2||item.state==3){
					uni.navigateTo({
						url:'../wzxq/wzxq?id='+item.id+'&state='+item.state
					})
				}
			}
			return {
				jiazai,
				swiperList,
				godateils,
				golist,
				shichangset,
				scstate,
				phbsset,
				phbstate,
				zuopin,
				zuopinlist,
				paihb,
				xuanzhong,
				paihbxx
			}
		}
	}
</script>

<style lang="scss">
	.beijin {
		background-image: url('@/static/beijintua.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	page {
		padding-bottom: 120upx;
	}

	.paihangbang {
		display: flex;
		flex-direction: column;
		margin-bottom: 40upx;

		>.paihangbang_top {
			display: flex;
			color: #FFFFFF;

			>view {
				width: 50%;
				padding: 16upx 0;
				display: flex;
				align-items: center;
				position: relative;
				justify-content: center;
				box-sizing: border-box;

				// border-bottom: 1upx solid #373737;
				>image {
					width: 34upx;
					height: 34upx;
					margin-right: 8upx;
				}
			}

			.ddd {
				position: absolute;
				bottom: -2upx;
				left: 0;
				width: 100%;
				height: 2upx;
				background: #373737;
			}

			.xz {
				background: linear-gradient(351deg, #9735DC 0%, #570CDC 100%) !important;
			}
		}

		>.paihangbang_scrv {
			width: 686upx;
			height: 778upx;
			background: #23262F;
			border-radius: 32upx;
			margin: auto;
			margin-top: 35upx;
			padding: 40upx 34upx;
			box-sizing: border-box;

			.paiminglist {
				display: flex;
				flex-direction: column;

				>view {
					display: flex;
					justify-content: space-between;
					margin-bottom: 44upx;

					>view {
						display: flex;
						align-items: center;

						.item1 {
							font-size: 28upx;
							font-family: Arial-Bold, Arial;
							font-weight: bold;
							color: #FCA31E;
						}

						.item2 {
							font-size: 28upx;
							font-family: Arial-Bold, Arial;
							font-weight: bold;
							color: #949494;
						}

						.item3 {
							font-size: 28upx;
							font-family: Arial-Bold, Arial;
							font-weight: bold;
							color: #3772FF;
						}

						.item4 {
							font-size: 28upx;
							font-family: Arial-Bold, Arial;
							font-weight: bold;
							color: #8D8C9F;
						}

						.neiron {
							font-size: 32upx;
							font-weight: bold;
							color: #FFFFFF;
						}

						&:nth-of-type(1) {
							>view:nth-of-type(2) {
								font-size: 32upx;
								font-weight: bold;
								color: #FFFFFF;
							}

							>image {
								width: 80upx;
								height: 80upx;
								margin: 0 22upx;
								border-radius: 50%;
							}
						}

						&:nth-of-type(2) {
							font-size: 28upx;
							font-weight: 500;
							color: #FFFFFF;

							>image {
								width: 32upx;
								height: 32upx;
								margin-right: 6upx;
							}
						}
					}
				}
			}
		}
	}

	.HotCollections {
		display: flex;
		flex-direction: column;
		margin-top: 50upx;
		margin-bottom: 50upx;
		padding: 3upx 30upx;

		>.HotCollections_top {
			display: flex;
			justify-content: space-between;

			>view {
				display: flex;
				align-items: center;
				color: #ffffff;
				font-size: 40upx;
				font-weight: bold;

				>.img1 {
					width: 48upx;
					height: 48upx;
					margin-left: 8upx;
				}

				>.img2 {
					width: 36upx;
					height: 36upx;
				}
			}
		}

		>.HotCollections_content {
			width: 686upx;
			height: 840upx;
			background: #23262F;
			border-radius: 32upx;
			padding: 24upx;
			box-sizing: border-box;
			margin-top: 40upx;

			>image {
				width: 640upx;
				height: 640upx;
			}

			.HotCollections_content_title {
				font-size: 32upx;
				font-weight: bold;
				color: #FFFFFF;
				margin-top: 25upx;
			}

			.HotCollections_content_kehu {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 25upx;

				>view:nth-of-type(1) {
					display: flex;
					align-items: center;
					font-size: 28upx;
					font-weight: 400;
					color: #FFFFFF;

					image {
						width: 48upx;
						height: 48upx;
						margin-right: 18upx;
					}
				}

				>view:nth-of-type(2) {
					width: 168upx;
					height: 56upx;
					background: #3772FF;
					border-radius: 12upx;
					opacity: 1;
					border: 2upx solid #3772FF;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #ffffff;
					font-size: 28upx;
					font-weight: bold;
				}
			}
		}
	}

	.Collections {
		display: flex;
		flex-direction: column;
		margin-top: 50upx;
		padding: 3upx 30upx;
		margin-bottom: 30upx;

		>.Collections_top {
			display: flex;
			justify-content: space-between;

			>view {
				display: flex;
				align-items: center;
				color: #ffffff;
				font-size: 32upx;
				font-weight: bold;

				>.img1 {
					width: 48upx;
					height: 48upx;
					margin-right: 8upx;
				}

				>.img2 {
					width: 36upx;
					height: 36upx;
				}
			}
		}

		>.Collections_biaoqian {
			width: 100%;
			display: flex;
			margin-top: 35upx;
			white-space: nowrap;
			.xz {
				background: linear-gradient(351deg, #9735DC 0%, #570CDC 100%) !important;
			}

			.neir {
				// width: 144upx;
				padding: 10upx 30upx;
				// height: 56upx;
				border-radius: 44upx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28upx;
				color: #ffffff;
				background-color: #23262F;
				margin-right: 22upx;

				&:nth-last-child(1) {
					margin-right: 0;
				}
			}
		}

		>.Collections_content {
			// display: flex;
			width: 100%;
			white-space: nowrap;
			margin-top: 32upx;

			// display:none;
			// overflow-x: hidden;
			// overflow-y: auto;
			.items {
				display: flex;

				>view {
					width: 352upx;
					height: 380upx;
					position: relative;
					// overflow: hidden;
					margin-right: 20upx;
					.daojis{
						position: absolute;
						left: 10upx;
						top: 10upx;
						z-index: 10;
						padding: 4upx 10upx;
						background-color: #000000e0;
						color: #ffffff;
						font-size: 25upx;
						display: flex;
						align-items: center;
						border-radius: 20upx;
						>image{
							width: 20upx;
							height: 20upx;
							margin-right: 10upx;
						}
					}
					>image {
						width: 352upx;
						height: 380upx;
						border-radius: 24upx;
					}

					>view {
						position: absolute;
					}

					.neiron {
						width: 352upx;
						height: 108upx;
						position: absolute;
						bottom: 0;
						z-index: 100;
						display: flex;
						flex-direction: column;
						align-items: center;
						background-color: #FFFFFF60;
						justify-content: space-evenly;
						backdrop-filter: blur(10px);
						-webkit-backdrop-filter: blur(10px);
						border-radius: 24upx;

						.myl {
							background: #8D8C9F !important;
						}

						>view:nth-of-type(1) {
							font-size: 24upx;
							font-weight: 500;
							color: #333333 !important;
						}

						>view:nth-of-type(2) {
							width: 144upx;
							height: 40upx;
							background: linear-gradient(351deg, #9735DC 0%, #570CDC 100%);
							border-radius: 12upx;
							font-size: 24upx;
							font-weight: 400;
							color: #FFFFFF;
							display: flex;
							align-items: center;
							justify-content: center;
						}

					}

					.waicheng {
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						height: 108upx;
						overflow: hidden;
						border-radius: 24upx;
					}

					.maoboli {
						position: absolute;
						bottom: 0;
						left: 0;
						width: 100%;
						height: 108upx;
						background: rgba(255, 255, 255, 0.4);
						// border-radius: 24upx;
						opacity: 1;
						// filter: blur(8upx);
						box-sizing: border-box;
						// filter: blur(15px);
						filter: blur(8upx);
						// overflow: hidden;
					}
				}
			}
		}
	}

	.lunbo {
		margin-top: 50upx;
	}

	.toplogin {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		padding-top: 40upx;
		font-size: 35upx;
		font-weight: bold;
		color: #FFFFFF;
		
		>image {
			width: 150upx;
			height: 30upx;
		}
	}
</style>
