<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>

</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>