<template>
	<view>
		<view class="title">
			<view class="title-sreach">
				<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}">
					<uni-icons type="left" size="28"></uni-icons>
				</view>
				<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}">
					兼职中心
				</view>
			</view>
		</view>
		<uni-notice-bar show-icon scrollable text="送单奖励活动开启：截止到当日24时，送单量前五名有额外奖励，奖励金额从高到低为20元/10元/8.8元/6.6元/5元，抓紧送单的奖励吧！" />
		<uni-datetime-picker style="margin-bottom:10px;" v-model="range" @change="searchList" type="daterange" />
		
		<view class="paiming">
			<view style="width: 200rpx;height: 100rpx;position: absolute;bottom: 30%;left: 6%;text-align: center;color: #fff;font-size: 34rpx;font-weight: bold;">
				<view>
					{{fireList[2].productName == undefined?'':fireList[2].productName}}
				</view>
				<view style="line-height: 60rpx;">
					{{fireList[2].totalSold == undefined?'':fireList[2].totalSold}}
				</view>
			</view>
			<view style="width: 200rpx;height: 100rpx;position: absolute;top: 50%;left: 37%;text-align: center;color: #fff;font-size: 34rpx;font-weight: bold;">
				<view>
					{{fireList[0].productName == undefined?'':fireList[0].productName}}
				</view>
				<view style="line-height: 60rpx;">
					{{fireList[0].totalSold == undefined?'':fireList[0].totalSold}}
				</view>
			</view>
			<view style="width: 200rpx;height: 100rpx;position: absolute;bottom: 27%;right: 6%;text-align: center;color: #fff;font-size: 34rpx;font-weight: bold;">
				<view>
					{{fireList[1].productName == undefined?'':fireList[1].productName}}
				</view>
				<view style="line-height: 60rpx;">
					{{fireList[1].totalSold == undefined?'':fireList[1].totalSold}}
				</view>
			</view>
		</view>
		<view class="content-list">
			<view v-for="(item,index) in fireList" :key="index" class="content-item">
				<view v-if="index == 0" style="justify-content: center;align-items: center;display: flex;">
					<uni-icons type="medal-filled" size='22' color="#fcdb56"></uni-icons>
				</view>
				<view v-if="index == 1" style="justify-content: center;align-items: center;display: flex;">
					<uni-icons type="medal-filled" size='22' color="#dedee0"></uni-icons>
				</view>
				<view v-if="index == 2" style="justify-content: center;align-items: center;display: flex;">
					<uni-icons type="medal-filled" size='22' color="#f6bf6f"></uni-icons>
				</view>
				<view v-if="index != 0 && index != 1 && index != 2" style="width: 44rpx;justify-content: center;align-items: center;display: flex;">{{index + 1}}</view>
				<view class="box-left" @tap.stop="largeImg(item)">
					<img :src="item.productPicture" alt="" v-if="item.productPicture">
					<view class="noPic" v-else>暂无图片</view>	
				</view>
				<view class="box-right">
					<view class="box-right-num">{{item.productName == null?'暂无':item.productName}}</view>
					<view class="box-right-name">{{item.totalSold}}单</view>
				</view>
			</view>
			<u-loadmore :status="status" />
		</view>
		<!-- 弹出多图轮播 -->
		<uni-popup ref="imgPopup" background-color="#fff">
			<view class="showImg-box">
				<swiper indicator-dots class="swiper-box" @change="lunbochange" circular autoplay :current="swiperDotIndex">
					<swiper-item v-for="(item, index) in bigImg" :key="index">
						<view class="swiper-item">
							<image mode='aspectFit' show-menu-by-longpress :src="item.productPicture" alt="" style="width: 100%;height: 100%;border-radius: 10px;" /></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuButtonInfo: {},
				range:[],
				status: 'loadmore',
				fireList:[],
				pageNum:1,
				pages:1,
				indexList: [],
				bigImg:[],
				swiperDotIndex:0,
				
			};
		},
		onShow(){
			this.getMonth()
			this.getFireList()
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		},
		onReachBottom() {
			if (this.pageNum >= this.pages) return;
			this.status = 'loading';
			this.pageNum ++;
			this.getFireList();
			
		},
		methods: {
			lunbochange(e) {
				this.current = e.detail.current
			},
			getFireList(){ 
				this.tui.request("/app/product/getShareList", "POST", {
					categoryId: "",
					searchStr: "",
					pageNum: this.pageNum,
					pageSize: '10',
					sortField:"totalSold",
					startDate:this.range[0],
					endDate:this.range[1]
				}, false, false).then((res) => {
					if (res.code == 200) {
							this.status = 'nomore';
							if (this.pages == 1) {
								this.fireList = res.result.records
							} else {
								this.fireList = [...this.fireList, ...res.result.records]
							}
							this.pages = res.result.pages
					} else {
						this.tui.toast(res.message)
					}
				}).catch((res) => {})
			},
			searchList(res) {
				this.pageNum = 1;
				this.fireList = [];
				this.getFireList()
			},
			//获取当月1日到当前时间
			getMonth() {
				let date = new Date()
				let year = date.getFullYear().toString()   //'年'
				let month = date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1).toString():(date.getMonth()+1).toString()  //'月'
				let da = date.getDate() < 10 ? '0'+date.getDate().toString():date.getDate().toString()  //'日'
				let end = year + '-' + month + '-' + da  //当天
				let beg = year + '-' + month + '-01'    //当月第一天
				this.range = [beg,end]
			},
			largeImg(img) {
				if((img.productPicture == null &&img.productPictures == null) || (img.productPicture == '' &&img.productPictures == '') || (img.productPicture == null &&img.productPictures == '') || (img.productPicture == '' &&img.productPictures == null)){
					this.tui.toast("暂无可展示的图片",300)
					return
				}
				this.bigImg = []
				if(img.productPicture != null){
					let data = {
						productPicture:img.productPicture
					}
					this.bigImg.push(data)
				}
				if(img.productPictures != null){
					for(let i=0;i<img.productPictures.length;i++){
						this.bigImg.push(img.productPictures[i])
					}
				}
				this.$refs.imgPopup.open()
			},
			back() {
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="scss">
	.paiming{
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/a07b86e1b1c74c88ac42dcc8a592980c.jpg') no-repeat;
		width: 100%;
		height: 680rpx;
		background-size: 100%;
		position: relative;
		z-index: 97;
	}
	.content-list{
		width: 90%;
		overflow: scroll;
		border-radius: 20rpx;
		background: #fff;
		margin: -50rpx auto 0;
		position: relative;
		z-index: 98;
	}
	.content-item{
		height: 180rpx;
		width: 100%;
		padding: 0 20rpx;
		font-size: 32rpx;
		border-bottom: 1px solid #eee;
		display: flex;
	}
	.box-left {
		width: 130rpx;
		height: 131rpx;
		background-size: 100%;
		margin: 25rpx 30rpx 25rpx 10rpx;
	}
	
	.box-left img {
		width: 100%;
		height: 100%;
		border-radius: 131rpx;
	}
	
	.box-right {
		margin-top: 17rpx;
		padding-top:30rpx;
	}
	
	.box-right-price {
		display: flex;
		font-size: 25rpx;
	}
	.noPic{
		border-radius: 10px;
		width: 140rpx;
		height: 140rpx;
		// margin: 30rpx 0 0 30rpx;
		text-align: center;
		line-height: 140rpx;
		color: #777;
		background: #f5f5f5;
	}
	.box-right-num {
		padding: 5rpx 0;
		color: #000;
		font-weight: bold;
		font-size: 30rpx;
	}
	.box-right-name {
		font-size: 26rpx;
		height: 50rpx;
		line-height: 50rpx;
	}
	.showImg-box{
		width: 700rpx;
		height: 1000rpx;
		border-radius: 10px;
	}
	.swiper-box {
		height: 1000rpx;
	}
	.swiper-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 1000rpx;
		color: #fff;
		background-color: #cee1fd;
		border-radius: 10px;
	}
	.title {
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
		width: 100%;
		height: 20%;
	}
	
	.title-sreach {
		width: 100%;
		display: flex;
		height: 200rpx;
		position: relative;
	}
	
	.back-btn {
		position: absolute;
		bottom: 0;
		left: 0;
	}
	
	.title-name {
		padding-top: 110rpx;
		font-size: 36rpx;
		font-weight: 700;
		flex: 1;
		text-align: center;
	}
</style>