<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%;" v-model="topicName" @keypress.enter="getList"
				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 v-if="hotList.length > 0">
				<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>
			<list-empty v-else text="暂无匹配话题~"></list-empty>

		</view>

	</view>
</template>

<script>
	import {
		hotTopicRanking
	} from '@/api/api.js';
	import ListEmpty from '@/components/ListEmpty.vue'
	export default {
		data() {
			return {
				hotList: [],
				topicName: ''
			}
		},
		components: {
			ListEmpty
		},
		onShow() {
			this.getList()
		},
		onPullDownRefresh() {
			this.refreshContentList()
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000)
		},
		methods: {
			// 话题热搜榜
			getList() {
				let params = {
					name: this.topicName
				}
				hotTopicRanking(params).then(res => {
					console.log(res)
					this.hotList = res.data
				})
			},
			// 下拉刷新
			refreshContentList() {
				this.hotList = [];
				this.getList();
			},
			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>