<template>
	<view class="page-container topics-page">
		<view class="search-box-common">
			<image src="/static/images/search-icon.png" class="search-icon"></image>
			<input placeholder="搜索" style="width: 100%;" placeholder-class="placeholder-class" />
		</view>
		<view class="hot-container">
			<view class="hot-tag-box">
				<image src="/static/images/hot-searchs.png" class="tag"></image>
			</view>
			<view class="hot-item"  v-for="(item,index) in hotList" :class="{'first':index==0,'second':index==1,'third':index==2}">
				<view class="index">{{index + 1}}</view>
				<view class="text">{{item.name}}</view>
				<view class="more" @click="topTopicDetailPage(item)">
					<view>详情</view>
					<image src="/static/images/detail-icon.png" class="icon"></image>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {hotTopicRanking} from '@/api/api.js';
	export default {
		data() {
			return {
				hotList:[],
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			// 话题热搜榜
			getList(){
				hotTopicRanking().then(res=>{
					console.log(res)
					this.hotList = res.data
				})
			},
			topTopicDetailPage(item){
				uni.navigateTo({
					url:'/pages/topic-detail/topic-detail?topicId='+item.id+'&topicName='+item.name
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/styles/common.scss';
	.topics-page{
		background-color: white;
	}
		
	.search-box-common{
		background-color: rgba(244, 244, 244, 1);
	}
	.hot-container{
		padding: 0 34rpx;
		box-sizing: border-box;
		.hot-tag-box{
			margin-bottom: 32rpx;
			.tag{
				width: 120rpx;
				height: 30rpx;
			}
		}
		
		.hot-item{
			height: 76rpx;
			border-radius: 12rpx;
			background: linear-gradient(93.14deg, rgba(149,153,167,0.1) 3.32%,rgba(255,255,255,0) 98.5%);
			color: rgba(0, 0, 0, 1);
			font-size: 28rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 24rpx;
			box-sizing: border-box;
			.index{
				color: rgba(149, 153, 167, 1);
				font-size: 30rpx;
				width: 40rpx;
				line-height: 30rpx;
			}
			.text{
				font-size: 28rpx;
				width: calc(100% - 142rpx);
			}
			.more{
				width: 90rpx;
				color: rgba(187, 187, 187, 1);
				font-size: 24rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				.icon{
					width: 36rpx;
					height: 36rpx;
				}
			}
		}
		.first{
			background: linear-gradient(93.14deg, rgba(254,68,91,0.1) 3.32%,rgba(255,255,255,0) 98.5%);
			.index{
				color: #FE445B;
			}
		}
		.second{
			background: linear-gradient(93.14deg, rgba(255,122,31,0.1) 3.32%,rgba(255,255,255,0) 98.5%);
			.index{
				color: #FF7A1F;
			}
		}
		.third{
			background: linear-gradient(93.14deg, rgba(250,174,26,0.1) 3.32%,rgba(255,255,255,0) 98.5%);
			.index{
				color: #FAAE1A;
			}
		}
	}
	
</style>
