<template>
	<view>
		<u-sticky :enable="true">
			<view class="search-box">
				<u-search bg-color="#f2f2f2" style="width: 100%;" placeholder="搜索更多资源" :show-action="true"
					:animation="true" action-text="取消" v-model="datas.keyword" @custom="goBack()"
					@search="doSearch()"></u-search>
			</view>
		</u-sticky>
	</view>
	<view class="search-keyword" v-if="datas.isSearch">
		<view class="keyword-block" v-if="datas.hotKeywordList.length != 0">
			<view class="keyword-list-header">
				<view>热搜</view>
			</view>
			<view class="keyword">
				<view v-for="(keyword, index) in datas.hotKeywordList" @tap="doSearchs(keyword)" :key="index">
					{{ keyword }}
				</view>
			</view>

		</view>
	</view>

	<view class="search-list" v-else>
		<view class="search-list-box">
			<videoList @success="posterSuccess" :list="datas.keywordList" />
		</view>

	</view>
	<view style="display: flex;flex-direction: column;align-items: center;" v-if="!datas.isSearch&&datas.keywordList.length==0">
		<image src="/static/index/none.png" style="width: 341rpx;height: 341rpx;" mode=""></image>
		<text style=";">暂无数据</text>
	</view>
</template>

<script setup>
	import {
		selectCourseTitles
	} from '@/api/index/index.js'
	import videoList from './videoList.vue'
	import {
		reactive
	} from 'vue';
	import {
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app'
	let datas = reactive({
		hotKeywordList: [], //热搜
		keywordList: [], // 搜索列表
		keyword: "", // 搜索关键字
		page: 1,
		isSearch: true,
	})
	onShow(() => {
		getList()
	})

	function posterSuccess() {

	}

	function getList() {
		if (uni.getStorageSync('moreSearch')) {
			datas.hotKeywordList = (uni.getStorageSync('moreSearch')).split(',')
		} else {
			datas.hotKeywordList = []
		}
	}
	onReachBottom(() => {
		++datas.page
		doSearch()
	})

	function doSearchs(keyWord) {
		datas.keyword = keyWord
		doSearch()
	}
	// 搜索
	async function doSearch() {
		datas.isSearch = false
		let res = await selectCourseTitles({
			title: datas.keyword,
			limit: 20,
			page: datas.page,
		})
		if (datas.page == 1) {
			datas.keywordList = res.list
		} else {
			datas.keywordList = [...datas.keywordList, ...res.list]
		}

	}

	// 取消返回首页
	function goBack() {
		uni.navigateBack()
	}
</script>

<style scoped lang="scss">
	.search-box {
		width: 100%;
		/* background-color: rgb(242, 242, 242); */
		padding: 15upx 2.5%;
		display: flex;
		justify-content: space-between;
		// position: sticky;
		// top: 0;
		background-color: #ffffff;
	}

	.search-keyword {
		width: 100%;
	}

	.keyword-block {
		padding: 10rpx 0;
	}

	.keyword {
		width: 94%;
		padding: 3px 3%;
		display: flex;
		flex-flow: wrap;
		justify-content: flex-start;

		>view {
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 60upx;
			padding: 0 20upx;
			margin: 10upx 20upx 10upx 0;
			height: 60upx;
			font-size: 28upx;
			// background-color: rgb(242, 242, 242);
			background: #E6EBFF;
			color: #6b6b6b;
		}
	}

	.keyword-block .keyword-list-header {
		width: 94%;
		padding: 10rpx 3%;
		font-size: 27rpx;
		color: #333;
		display: flex;
		justify-content: space-between;
	}

	.keyword-block .keyword-list-header image {
		width: 40rpx;
		height: 40rpx;
	}

	.search-list {
		width: 100%;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.search-list-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			width: 686rpx;
			height: 100%;
		}
	}
</style>