<template>
	<view class="content">
		<view class="p-rel flex ai_center">
			<input shape="circle" fontSize="14" class="flex1 h-60 mgl-30 radio-60"
			style="background-color: #eeeeee;padding: 0 80rpx;" v-model="keyWord"
			 :placeholder="descWord">
			</input>
			<uni-icons customPrefix="iconfont" class="p-abs top-10 left-40" type="icon-sousuo" color="#797a82" size="18" />
			<uni-icons v-if="searched" @click="clearSearch" customPrefix="iconfont" class="p-abs top-10 right-100" type="icon-shanchu" color="#797a82" size="22" />
			<view @click="searchFn" class="w-80 text-right text-32">搜索</view>
		</view>
		<template v-if="!searched">
			<view class="flex mgt-50 jc_between">
				<view class="text-32">搜索历史</view>
				<view class="text-999" @click="clear">
					<uni-icons customPrefix="iconfont" class="mgr-10" type="icon-shanchu1" color="#b9b7c1" size="16" />
					清空
				</view>
			</view>
			<view class="history_box">
				<view class="history_item"
				@click="keyWord = item;searchFn()"
				 v-for="(item,index) in historyList" :key="index">
					 {{ item }}
				</view>
			</view>
			<view class="flex mgt-50 jc_between">
				<view class="text-32">
					<uni-icons customPrefix="iconfont" class="mgr-10" type="icon-yushouhuore" color="#b9b7c1" size="16" />
					大家都在搜
				</view>
			</view>
			<view class="history_box">
				<view class="history_item"
				 @click="keyWord = item;searchFn()"
				 v-for="(item,index) in historyList" :key="index">
					 {{ item }}
				</view>
			</view>
			<view class="flex mgt-50 jc_between ai_center mgb-30">
				<view class="text-32">
					<uni-icons customPrefix="iconfont" class="mgr-10" type="icon-huangguan" size="26" />
					热门排行榜
				</view>
				<view class="text-999 flex ai_center" @click="navTo('/pages/tabBar/bookMall/bookRanking')">
					查看全部榜单
					<uni-icons customPrefix="iconfont" class="mgr-10" type="icon-youjiantou" color="#b9b7c1" size="12" />
				</view>
			</view>
			<view class="book_item flex ai_center"
			   @click="navTo('/pages/bookDetail/index')"
			   v-for="(book,index) in bookList" :key="index">
				<view class="flex jc_center fd_c w-100">
					<uni-icons v-if="index==0" customPrefix="iconfont" class="mgr-10" type="icon-no1" size="28" />
					<uni-icons v-else-if="index==1" customPrefix="iconfont" class="mgr-10" type="icon-dierming" size="28" />
					<uni-icons v-else-if="index==2" customPrefix="iconfont" class="mgr-10" type="icon-disanming" size="28" />
					<text v-else class="text-32 mgl-20">{{ index + 1 }}</text>
				</view>
				<view class="">
					<image class="w-100 h-160 radio-20" src="/static/logo.png"></image>
				</view>
				<view class="mgl-30">
					<view class="text-32">
						{{ book.title }}
					</view>
					<view class="line_1 text-24 mgt-10 mgb-20 text-666">
						{{ book.desc }}
					</view>
					<view class="flex jc_between">
						<view class="text-30">
							<text class="mgr-10 text-999">
								{{ book.status == 1 ?'已完结':'未完结' }} | 
							</text> 
							{{ book.author }}
						</view>
						<view class="text-24 text-999">
							{{ book.readNum }}万人阅读
						</view>
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<view class="book_item flex ai_center"
			 @click="navTo('/pages/bookDetail/index')"
			 v-for="(book,index) in searchList" :key="index">
				<view class="">
					<image class="w-160 h-200 radio-20" src="/static/logo.png"></image>
				</view>
				<view class="mgl-30">
					<view class="text-32">
						{{ book.title }}
					</view>
					<view class="line_2 text-24 mgt-10 mgb-20 text-666">
						{{ book.desc }}
					</view>
					<view class="flex jc_between">
						<view class="text-28">
							<text class="mgr-10 text-EE8030">
								{{ book.status == 1 ?'已完结':'未完结' }} | 
							</text> 
							{{ book.author }}
						</view>
						<view class="text-24 text-999">
							{{ book.readNum }}万人阅读
						</view>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import { onShow,onLoad } from "@dcloudio/uni-app";
	export default {
		components: {},
		data(){
			return{
				keyWord:'',
				descWord:'赘婿',//默认关键词
				searched:false,//搜索
				historyList:['重生','极品','总裁','都市','娇妻','第一','萌宝'],
				searchList:[
					{
						title:'天降神豪',
						desc:'描述描述描述描述描述描述描述描述描述描述描述描述描述描述',
						status:1,//完结
						author:'城南花开',
						readNum:'85.7',
					},
					{
						title:'天降神豪',
						desc:'描述描述描述描述描述描述描述描述描述描述描述描述描述描述',
						status:1,//完结
						author:'城南花开',
						readNum:'85.7',
					},
					{
						title:'天降神豪',
						desc:'描述描述描述描述描述描述描述描述描述描述描述描述描述描述',
						status:1,//完结
						author:'城南花开',
						readNum:'85.7',
					},
					{
						title:'天降神豪',
						desc:'描述描述描述描述描述描述描述描述描述描述描述描述描述描述',
						status:1,//完结
						author:'城南花开',
						readNum:'85.7',
					},
					{
						title:'天降神豪',
						desc:'描述描述描述描述描述描述描述描述描述描述描述描述描述描述',
						status:1,//完结
						author:'城南花开',
						readNum:'85.7',
					},
				],
				bookList:[
					{
						title:'天降神豪',
						desc:'描述描述描述描述描述描述描述描述描述描述描述描述描述描述',
						status:1,//完结
						author:'城南花开',
						readNum:'85.7',
					},
					{
						title:'天降神豪',
						desc:'描述描述描述描述描述描述描述描述描述描述描述描述描述描述',
						status:1,//完结
						author:'城南花开',
						readNum:'85.7',
					},
					{
						title:'天降神豪',
						desc:'描述描述描述描述描述描述描述描述描述描述描述描述描述描述',
						status:1,//完结
						author:'城南花开',
						readNum:'85.7',
					},
					{
						title:'天降神豪',
						desc:'描述描述描述描述描述描述描述描述描述描述描述描述描述描述',
						status:1,//完结
						author:'城南花开',
						readNum:'85.7',
					},
					{
						title:'天降神豪',
						desc:'描述描述描述描述描述描述描述描述描述描述描述描述描述描述',
						status:1,//完结
						author:'城南花开',
						readNum:'85.7',
					},
					{
						title:'天降神豪',
						desc:'描述描述描述描述描述描述描述描述描述描述描述描述描述描述',
						status:1,//完结
						author:'城南花开',
						readNum:'85.7',
					}
				]
			}
		},
		onShow(){
			
		},
		onLoad(){
			
		},
		methods: {
			clear(){
				uni.showModal({
					title: '温馨提示',
					content: '确定删除历史搜索',
					success: res => {
						console.log('res',res)
						if(res.confirm){
							this.historyList = []
							uni.showToast({
								title:'删除成功',
								icon:'none'
							})
						}
					},
				});
			},
			clearSearch(){
				this.keyWord = ''
				this.searched = false
			},
			searchFn(){
				this.searched = true
				uni.showLoading({
					title:'加载中'
				})
				setTimeout(()=>{
					uni.hideLoading()
				},200)
			},
			navTo(url){
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style lang='scss' scoped>
	.content{
		padding: 28rpx;
		.history_box{
			display: flex;
			flex-wrap: wrap;
			gap: 20rpx;
			margin: 20rpx 0 60rpx;
			.history_item{
				padding: 18rpx 28rpx;
				border-radius: 20rpx;
				background-color: #eee;
			}
		}
		.book_item{
			margin-top: 20rpx;
			display: flex;
		}
	}
</style>