<template>
	<view class="page">
		<!-- #ifndef H5 -->
		<view :style="{height:pageHeight+'px'}"></view>
		<view class="tab">
			<text v-for="v in tabs" :key="v.key" :class="{'tab-active' : v.key === current}" @click="tabChange(v)">
				{{v.name}}
			</text>
		</view>
		<!-- #endif -->

		<view class="ranking">
			<view class="rangking-title">
				<text>排名</text>
				<text>资源名称</text>
				<text style="margin-right: 17rpx;">热度</text>
			</view>
			<view class="ranking-list">
				<view @click="toSearch(item)" class="ranking-list-item" v-for="(item, key) in filteredDataList" :key="key">
					<view v-if="key < 3" class="ranking-list-number">
						<image :src="'/static/page6/' + (key + 1) + '.png'"></image>
					</view>
					<view v-else class="ranking-list-number">
						<text>{{key + 1}}</text>
					</view>
					<view class="ranking-list-nickname">
						<!-- <image :src="'/static/avatar/' + (key % 7) + '.png'"></image> -->
						<text class="name">{{item.resourceName}}</text>
					</view>
					<text class="ranking-list-score">{{million(item.copyNumber)}}</text>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view style="border-radius: 30rpx;" class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view style="color: black;font-size: 38rpx;margin-top: 50rpx;" class="content">提示</view>
				</view>
				<view class=" bg-white">
					<view style="font-size: 33rpx;color: #6a6a6a;padding: 40rpx 60rpx 60rpx 60rpx;">
						观看链接已复制到您的粘贴板中，请复制到浏览器中获取，链接中的资源可能存在排序混乱，画质模糊和观看时长限制，建议您转存至自己的网盘中使用即可解决此等问题<!-- (链接有效期为30分钟) -->
					</view>

					<button @tap="hideModal" style="margin-bottom: 50rpx;width: 55%;height: 90rpx;font-size: 38rpx;"
						class="cu-btn bg-green">知道了</button>
				</view>
			</view>
		</view>
		<view class="no-list-data">
			-- 温馨提示 --
		</view>
		<view class="no-list-data2">
			点击排行榜内容可快速跳转此热门资源
		</view>
	</view>
</template>

<script>
	import {
		listDuanju,
		duanjuNumber,
		getConfigKey,
		updateDuanju,
		getNotice,
		getRanking
	} from "@/api/app/index.js"
	export default {
		data() {
			return {
				current: 1,
				tabs: [
					// {
					// 	name: '日榜',
					// 	key: 1
					// },
					// {
					// 	name: '周榜',
					// 	key: 2
					// },
					{
						name: '排行榜',
						key: 1
					}
				],
				pageHeight: null,
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					resourceName: null,
					isShow: 1,
					orderByDesc: 'copy_number'
				},
				dataList: [],
				modalName: ""
			}
		},
		computed: {
			filteredDataList() {
				return this.dataList.slice(0, 10);
			}
		},
		onShow() {
			uni.getSystemInfo({
				success: (res) => {
					// 状态栏的高度
					this.pageHeight = res.statusBarHeight;
				}
			});
			this.getDataList()

		},
		methods: {
			toSearch(val){
				uni.setStorageSync("searchValue",val.resourceName) 
				uni.switchTab({
					url: '/pages/index'
				});
			},
			copy(val) {
				var that = this;
				uni.setClipboardData({
					data: val.resourceUrl,
					showToast: false,
					success: function() {
						that.modalName = "Modal"
					}
				});
			},
			toUrl(val) {
				uni.showModal({
					title: '提示',
					content: '保存到网盘，可无限制看 !',
					showCancel: false,
					success: function(res) {
						if (res.confirm) {
							// 执行确认后的操作
							window.location.href = val.resourceUrl
						} else {
							// 执行取消后的操作
						}
					}
				})
			},
			hideModal() {
				this.modalName = null
			},
			getDataList() {
				var that = this;
				getRanking().then(response => {
					that.dataList = response.data || []
				}).catch(err => {
					console.error('获取排行榜失败', err);
					that.dataList = []
				});
			},
			tabChange(e) {
				this.current = e.key;
				console.log(e);
			},
			million(value){//过万处理
			  let num;
			 if(value > 9999){//大于9999显示x.xx万
			    num=(Math.floor(value/1000)/10) + ' w';
			 }else if( value < 9999 && value>-9999){
			   num=value
			 }else if(value<-9999){//小于-9999显示-x.xx万
			
			    num = -(Math.floor(Math.abs(value)/1000)/10)+' w'
			 }
			 return num;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #5471f4;
	}

	.no-list-data {
		text-align: center;
		margin-bottom: 100rpx;
		color: #b3b3b3;
		font-size: 24upx;
		margin: 0rpx 40rpx 0rpx 40rpx;
	}

	.no-list-data2 {
		text-align: center;
		margin-bottom: 100rpx;
		color: #b3b3b3;
		font-size: 24upx;
		margin: 10rpx 40rpx 20rpx 40rpx;
	}

	.name {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		width: 60%;
	}

	.page {
		padding-bottom: 20rpx;

		.tab {
			width: 700rpx;
			margin: auto;
			display: flex;
			justify-content: center;
			align-items: flex-end;
			padding: 25rpx;

			text {
				display: block;
				width: 120rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				color: #fff;
				font-size: 14px;
			}

			.tab-active {
				font-size: 16px;
				font-weight: bold;
				position: relative;

				&::after {
					content: '';
					width: 40rpx;
					height: 6rpx;
					border-radius: 4rpx;
					background: #fff;
					position: absolute;
					left: 40rpx;
					bottom: 0;
				}
			}

		}

		.ranking {
			width: 700rpx;
			border-radius: 30rpx;
			margin: auto;
			box-sizing: border-box;
			padding: 20rpx;

			.rangking-title {
				display: flex;
				font-size: 12px;
				color: #f0f0f0;
				height: 50rpx;
				line-height: 50rpx;

				text {
					display: block;
					width: 100rpx;
					text-align: center;

					&:nth-child(2) {
						box-sizing: border-box;
						padding-left: 20rpx;
						text-align: left;
						width: calc(100% - 200rpx);
					}
				}
			}

			.ranking-list-item {
				height: 110rpx;
				border-radius: 20rpx;
				display: flex;
				align-items: center;
				font-size: 14px;
				background: rgba(255, 255, 255, 0.7);
				margin: 16rpx 0;

				&:nth-child(1) {
					background: #efb300;
				}

				&:nth-child(2) {
					background: #b4b0b0;
				}

				&:nth-child(3) {
					background: #e37d19;
				}

				.ranking-list-number {
					width: 100rpx;
					color: #777;
					display: flex;
					justify-content: center;

					image {
						width: 50rpx;
						height: 50rpx;
					}
				}

				.ranking-list-score {
					display: block;
					width: 23%;
					color: #555;
					font-size: 16px;
					text-align: right;
				}

				.ranking-list-nickname {
					display: flex;
					align-items: center;
					width: 58%;
					box-sizing: border-box;
					padding-left: 20rpx;

					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}

					text {
						width: auto;
					}
				}
			}
		}
	}
</style>