<template>
	<view class="top">
		<u-search :showAction="true" actionText="搜索" :clearabled="true" v-model="ktext" @custom="onsouch(ktext)">
		</u-search>
		<view class="main">
			<view class="title" v-if="hostlist.length">
				<text>历史搜索</text>
				<image src="../../static/ic-delete-false.png" mode="" @click="delhostily"></image>
			</view>
			<view class="schbox">
				<view class="schitem" v-for="(item,index) in hostlist" :key="index" @click="onsouch(item.keyword)">
					{{item.keyword}}
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		search_list,
		search_clear
	} from '@/api/index.js'
	export default {
		data() {
			return {
				hostlist: [],
				ktext: "",
			};
		},
		onLoad() {
		},
		onShow() {
			this.search_list()
		},
		methods: {
			delhostily() {
				let that=this
				uni.showModal({
					content:"是否删除历史搜索记录",
					success(res) {
						if (res.confirm) {
							that.search_clear()
							that.search_list()
						}
					}
				})
			},
			onsouch(e) {
				uni.navigateTo({
					url: "/pages/index/product?ktext=" + e
				})
			},
			//清除历史搜索记录
			async search_clear() {
				try {
					const res = await search_clear()
					this.search_list()
					console.log('search_clear', res)
					// 保存数据
				} catch (err) {
					uni.showToast({
						title: err,
						icon: 'none'
					})
					console.log('search_clear', err)
				}
			},
			// 历史搜索记录
			async search_list() {
				try {
					const res = await search_list()
					console.log('search_list', res)
					this.hostlist = res.list
					// 保存数据
				} catch (err) {
					uni.showToast({
						title: err,
						icon: 'none'
					})
					console.log('search_list', err)
				}
			},
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.top {
		padding: 12rpx 32rpx;

		.main {
			padding: 34rpx 32rpx;
			color: rgba(50, 50, 51, 1);
			font-size: 28rpx;
			font-weight: 600;
			box-sizing: border-box;

			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;

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

			.schbox {
				display: flex;
				flex-wrap: wrap;
				margin-top: 32rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 0.9);
				font-size: 24rpx;

				.schitem {
					padding: 8rpx 12rpx;
					border-radius: 154rpx;
					opacity: 1;
					background: rgba(247, 248, 250, 1);
					margin-right: 36rpx;
				}
			}
		}

	}
</style>