<template>
	<view class="">
		<!--S 搜索 -->
		<u-navbar leftText="返回" title="88888" :safeAreaInsetTop="true" :bgColor="bgColor" :placeholder="true">
			<view class="u-nav-slot" slot="left">
				<image src="/static/ic-back.png" mode="" style="width: 32rpx;height: 32rpx;" @click="toIndex()">
					<u-search :animation='false' placeholder="请输入商品名称" @search="search" v-model="keywords"
						@focus="focus" :showAction="false" :bgColor="bg"></u-search>
			</view>
		</u-navbar>
		<!--S 分类 -->
		<view class="cate">
			<u-tabs :list="list1" @click="click" lineColor='#641BFD' lineWidth='40'></u-tabs>
		</view>
		<!-- S 版心 -->
		<view class="mainBox" v-if="status2==1">
			<!--S 历史搜索 -->
			<view class="history" v-if="historyList.length">
				<view class="histop">
					<view class="topleft">历史搜索</view>
					<image src="../../static/ic_trash.png" mode="" @click="delHistroy"></image>
				</view>
				<view class="hisbot">
					<view class="" v-for="(item,index) in historyList" :key="index" @click="tohis(item)">{{item}}</view>
				</view>
			</view>

			<!--S 热门搜索 -->
			<view class="hotsearch">
				<view class="hot">
					<image src="/static/ic_hot.png" mode=""></image>热门搜索
				</view>
				<!--S 热门搜索列表 -->
				<view class="hotlist">
					<view class="leftlist">
						<view class="listitem" v-for="(item,idx) in hotlist1" :key="idx" @click="hot(item)">
							<view class="index"
								:style="{background:idx==0?'#F33F2E':idx==1?'#F4B740':idx==2?'#A3B4E0':'#C8C9CC'}">
								{{idx+1}}
							</view>
							<view class="listtext">{{item.name}}</view>
						</view>
					</view>
					<view class="line">
					</view>
					<view class="rightlist" @click="hot(item)">
						<view class="listitem" v-for="(item,idx) in hotlist2" :key="idx">
							<view class="index">{{idx+6}}</view>
							<view class="listtext">{{item.name}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 瀑布流 -->
		<view class="water">
			<waterfallsFlow :list="list">
				<template v-slot:default="item">
					<!-- 此处添加插槽内容 -->
					<view class="cnt">
						<view class="title">{{item.title}}</view>
						<view class="text">{{item.text}}</view>
					</view>
				</template>
			</waterfallsFlow>
		</view>
		<!--S 提示框 -->
		<u-modal :show="show" title="提示" content='您确定要删除历史记录吗？删除后不可恢复' :showCancelButton='true' @cancel="cancelDel"
			@confirm="confirmDel"></u-modal>
	</view>
</template>

<script>
	import {
		searchList,
		getlist
	} from '@/api/index.js'
	import waterfallsFlow from "@/components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue";
	export default {
		components: {
			waterfallsFlow
		},
		data() {
			return {
				bgColor: '#fff',
				bg: '#F6F8FA',
				keywords: '',
				historyList: [],
				show: false,
				//热门搜索
				hotList: [],
				hotlist1: [],
				hotlist2: [],
				order: 1,
				page: 1,
				rows: 10,
				type_id: 1, //论坛类型
				bqstatus: 1,
				status2: 1,
				list1: [{
					name: '美容美发',
				}, {
					name: '长发造型',
				}, {
					name: '电影'
				}, {
					name: '科技'
				}, {
					name: '音乐'
				}, {
					name: '美食'
				}, {
					name: '文化'
				}, {
					name: '财经'
				}, {
					name: '手工'
				}],
				list: []
			};
		},
		onShow() {
			uni.setStorageSync('token', '781bb514-342d-4a67-9086-758b4e6477c0')
			this.searchList()
			let historyList1 = []
			if (uni.getStorageSync('histroyList')) {
				historyList1 = uni.getStorageSync('histroyList')
			}
			this.historyList = historyList1
		},
		onLoad() {

		},

		methods: {
			//搜索
			async getlist() {
				try {
					const res = await getlist(this.type_id, this.keywords, this.order, this.page, this.rows)
					this.list = res.data
					// 保存数据
				} catch (err) {
					uni.showToast({
						title: err,
						icon: 'none'
					})
					console.log('getlist', err)
				}
			},
			//热门搜索
			async searchList() {
				try {
					const res = await searchList(this.order, this.page, this.rows)
					this.hotList = res.data
					this.hotlist1 = this.hotList.slice(0, 5)
					this.hotlist2 = this.hotList.slice(5)
					// 保存数据
				} catch (err) {
					uni.showToast({
						title: err,
						icon: 'none'
					})
					console.log('searchList', err)
				}
			},
			focus() {
				this.bqstatus = 1
			},
			search2(item) {
				this.keywords = item
				this.bqstatus = 2
				this.status2 = 2
				this.getlist()
			},
			hot(item) {
				this.keywords = item
				this.bqstatus = 2
				this.status2 = 2
				this.getlist()
			},
			toIndex() {

			},
			search(e) {
				// console.log(e)
				if (e.length) {
					this.historyList.push(e)
					this.historyList = [...new Set(this.historyList)]
					this.isSearch = 2
					this.getlist()
				}
				if (this.historyList.length > 10) {
					this.historyList.splice(0, 1)
				}
				uni.setStorageSync('histroyList', this.historyList)
			},

			delHistroy() {
				this.show = true
			},
			cancelDel() {
				this.show = false
			},
			//确认删除
			confirmDel() {
				this.historyList = []
				this.show = false
				uni.clearStorageSync('histroyList')
				uni.showToast({
					title: '删除成功'
				})

			},
			tohis(item) {
				this.keywords = item
				this.status2 = 2
				this.getlist()
			},
			click(item) {
				console.log('item', item);
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #FFFFFF;
	}

	.u-navbar__content__title.data-v-75dad532 {
		display: none !important;
	}

	.u-navbar {
		.u-nav-slot {
			display: flex;
			align-items: center;
		}
	}

	.u-search__content.data-v-1a326067 {
		margin-left: 20rpx;
	}

	.cate {
		background: white;
	}

	//版心内容
	.mainBox {
		margin: 34rpx auto 0;
		width: 686rpx;

		.history {
			.histop {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 34rpx;
				margin-bottom: 32rpx;
				color: rgba(50, 50, 51, 1);
				font-size: 28rpx;
				font-weight: 700;
				text-align: left;
				line-height: 36rpx;

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}

			.hisbot {
				display: flex;
				flex-wrap: wrap;

				view {
					padding: 0 12rpx;
					color: rgba(0, 0, 0, 0.9);
					font-size: 24rpx;
					line-height: 48rpx;
					border-radius: 154rpx;
					background-color: #F7F8FA;
					margin-right: 24rpx;
				}

				.hisbotitem {
					display: flex;

				}
			}
		}

		.hotsearch {
			margin-top: 64rpx;
			padding: 34rpx;
			box-sizing: border-box;
			height: 460rpx;
			border-radius: 20rpx;
			background: linear-gradient(180.1deg, rgba(254, 242, 240, 1) 0%, rgba(255, 251, 248, 1) 35%, rgba(255, 255, 255, 0) 100%);

			.hot {
				color: rgba(50, 50, 51, 1);
				font-size: 28rpx;
				font-weight: 700;
				margin-bottom: 40rpx;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;

				}
			}

			.hotlist {
				display: flex;
				align-items: center;

				.leftlist {
					.listitem {
						display: flex;
						align-items: center;
						color: rgba(50, 50, 51, 1);
						font-size: 26rpx;
						margin-bottom: 32rpx;

						.listtext {
							width: 246rpx;
							width: 246rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}

				.line {
					margin: 0 20rpx;
					width: 2rpx;
					height: 328rpx;
					background: #c7c9ca;
				}

				.rightlist {
					.listitem {
						display: flex;
						align-items: center;
						color: rgba(50, 50, 51, 1);
						font-size: 26rpx;
						margin-bottom: 32rpx;
					}

					.listtext {
						width: 246rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}

			.index {
				// text-align: center;
				font-size: 20rpx;
				margin-right: 16rpx;
				width: 24rpx;
				height: 24rpx;
				color: rgba(255, 255, 255, 1);
				border-radius: 8rpx;
				background: rgba(200, 201, 204, 1);
				text-align: center;
			}

		}
	}
</style>