<template>
	<view class="container">
		<view class="searchBar" :style="`top:${statusBarHeight}px`">
			<image @tap="backHandler" class="btnback" :src="$baseUrl + 'searchpage/btnback.png'"></image>
			<view class="input-view">
				<view class="flexinput">
					<image :data-log="{
					xcxClick:'搜索页页面点击',
					pageName:`${step === 1?'搜索页':'搜索结果页'}`,
					buttonName:`放大镜-${searchValue}` }" @tap="searchHandler(searchValue,$event)" class="icon_search_yellow"
						:src="$baseUrl + 'searchpage/icon_search_yellow.png'">
					</image>
					<input confirm-type="search" maxlength="50" :value="searchValue" class="nav-bar-input" type="text"
						placeholder="输入搜索关键词" @confirm="confirm" />
				</view>
			</view>
		</view>
		<view class="topbox" :style="`margin-top:${statusBarHeight + 10}px`">
			<view v-if="step === 1 && recentTagsList.length > 0" class="recentbox">
				<image :data-log="{
					xcxClick:'搜索页页面点击',
					pageName:'搜索页',
					buttonName:'删除' }" @tap="historyClearHandler" class="icon_trash" :src="$baseUrl + 'searchpage/icon_trash.png'">
				</image>
				<view class="title">最近搜索</view>
				<view class="tagbox">
					<view :data-log="{
					xcxClick:'搜索页页面点击',
					pageName:'搜索页',
					buttonName:`最近搜索-${item}` }"  @tap="searchHandler(item,$event)" :key="index" v-for="(item, index) in recentTagsList" class="tag">
						{{ item }}</view>
				</view>

			</view>
			<view v-if="step === 1" class="recentbox">
				<view class="title">大家都在搜</view>
				<view class="tagbox">
					<view :data-log="{
					xcxClick:'搜索页页面点击',
					pageName:'搜索页',
					buttonName:`大家都在搜-${item}` }"  @tap="searchHandler(item,$event)" :key="index" v-for="(item, index) in oftenTagsList" class="tag">
						{{ item }}</view>
				</view>
			</view>

			<view v-if="step !== 1" class="tabbox">
				<van-tabs :color="`#d3a358`" line-width="15px" :active="tabIndex" @click="onTabChange">
					<van-tab title="内容" name="content"></van-tab>
					<van-tab title="工具" name="tool"></van-tab>
					<!-- <van-tab title="商品" name="product"></van-tab> -->
				</van-tabs>

			</view>
			<view v-if="step !== 1 && tabIndex === 'content'" class="bgbox">
			<view  class="cardbox">
				<view :data-log="{
					xcxClick:'搜索页页面点击',
					pageName:'搜索结果页',
					buttonName:`左侧内容信息流-${index+1}` }" @tap="jumpLink(item.link,item.videoUrl,$event)" class="card" v-for="(item, index) in resultList[tabIndex]" :key="index">
					<image mode="aspectFill" class="pic" :src="$baseUrl + item.bgUrl"></image>
					<view class="desc">
						{{ item.desc }}
					</view>
					<view class="timestr">{{ item.timeStr || "2025-06-10" }}</view>
				</view>
			</view>
		</view>
			<view  v-if="step !== 1 && tabIndex === 'tool'" class="bgbox">
				<view class="cardboxtool">
				<view :data-log="{
					xcxClick:'搜索页页面点击',
					pageName:'搜索结果页',
					buttonName:`右侧工具信息流-${index+1}` }" @tap="jumpLink(item.link,item.videoUrl,$event)" class="card" v-for="(item, index) in resultList[tabIndex]" :key="index">
					<image class="pic" :src="$baseUrl + item.bgUrl"></image>
					<!-- <view class="desc">
						{{ item.desc }}
					</view> -->
				</view>
			</view>
			</view>

		</view>

		<view v-if="showVideo" class="video-popup">
			<video :src="currentVideoUrl" controls autoplay style="width: 100vw; height: 56vw;"></video>
			<view class="close-btn-bottom" @tap="closeVideo">×</view>
		</view>
	</view>
</template>

<script>

import { historySearch, historyClear, search } from '../../api/search';
import { jump } from '../../utils';
import md from '../../md';
const oftenTagsList = ["婴幼儿奶粉", "权益", "奶酪棒", "星飞帆经典"]

export default {

	data() {
		return {

			statusBarHeight: 38,
			recentTagsList: [],
			oftenTagsList: oftenTagsList,
			step: 1,
			resultList: { 'tool': [], 'content': [], 'product': [] },
			tabIndex: 'content',
			searchValue: '',
			currentVideoUrl:'',
			showVideo:false
		}
	},
	mounted() {
		const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
		this.statusBarHeight = menuButtonInfo.top;
		this.initHistorySearch();
		md.sensorLogTake({
			xcxPage:'搜索页浏览',
			pageName:'搜索页',
		});
	},
	methods: {
		initHistorySearch() {
			historySearch().then(res => {
				console.log(res);
				this.recentTagsList = res.data || [];
			});
		},
		historyClearHandler(evt) {
			if(evt){
				md.sensorLog(evt);
			}
			historyClear().then(res => {
				console.log(res);
				this.recentTagsList = []
			});
		},
		backHandler() {
			const pages = getCurrentPages();
			if (pages.length > 1) {
				uni.navigateBack();
			} else {
				uni.reLaunch({ url: '/pages/index/index' }); // 或跳到首页
			}
		},
		onTabChange(evt) {
		this.tabIndex = evt.detail.name;
			md.sensorLogTake({
				xcxClick:'搜索页页面点击',
				pageName:'搜索结果页',
				buttonName:`搜索${evt.detail.name}分类`
			});
			if(evt.detail.name === 'content'){
				md.sensorLogTake({
					xcxPage:'搜索结果页-首屏-内容浏览',
					pageName:'搜索结果页-首屏-内容'
				});
			}else{
				md.sensorLogTake({
					xcxPage:'搜索结果页-首屏-工具浏览',
					pageName:'搜索结果页-首屏-工具'
				});
			}

		},
		confirm(evt) {
			this.searchHandler(evt.detail.value);
		},
		searchHandler(_searchValue,evt) {
			if(evt){
				md.sensorLog(evt);
			}
			if (_searchValue) {
				this.searchValue = _searchValue;
			}
			this.step = 2;

			md.sensorLogTake({
				xcxPage:'搜索结果页-首屏-内容浏览',
				pageName:'搜索结果页-首屏-内容'
			});
			search({
				keyword: this.searchValue
			}).then(res => {
				console.log(res);

				this.resultList = res.data || { 'tool': [], 'content': [], 'product': [] };
				
			});
		},
		jumpLink(link,videoUrl,evt){
			if(evt){
				md.sensorLog(evt);
			}
			if(videoUrl){
				if(videoUrl.indexOf('http') === -1){
					videoUrl = this.$baseUrl + videoUrl;
				}
				this.currentVideoUrl = videoUrl;
				this.showVideo = true;
				return;
				
			}
			if(!link || link === ''){
				return;
			}
			if(typeof link === 'string'){
				jump(JSON.parse(link));
			}else{
				jump(link);
			}
		},
		closeVideo(){
			this.showVideo = false;
			this.currentVideoUrl = '';
		}
		
	}
}
</script>

<style lang="less" scoped>
@import '@/common.less';

:root {
	--tab-font-size: 28rpx;
	--tabs-line-height: 60rpx;
	--tab-active-text-color: #1d1e25;
	--tab-text-color: #a2a3a6;
}

.container {
	background-color: @color-gray-light;
	min-height: 100vh;
	.video-popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.7);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 9999;
	}

	.close-btn-bottom {
		margin: 32rpx auto 0 auto;
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.5);
		color: #fff;
		font-size: 44rpx;
		line-height: 64rpx;
		text-align: center;
		z-index: 10001;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.tabbox {
		width: 600rpx;
		margin: 0 auto;
	}



	.searchBar {
		display: flex;
		position: relative;
		align-items: center;

		.btnback {
			width: 50rpx;
			height: 50rpx;
			left: 38rpx;
			position: relative;
		}

		.flexinput {
			position: relative;
			left: 50rpx;
			height: 68rpx;
			line-height: 68rpx;
			width: 449rpx;
			border-radius: 33rpx;
			border: 2px solid @color-gold-main;
			display: flex;
			align-items: center;

			.icon_search_yellow {
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				left: 20rpx;

			}

			.nav-bar-input {
				padding: 0 5px;
				font-size: 28rpx;
				background-color: rgba(0, 0, 0, 0);
				position: absolute;
				left: 70rpx;
				color: black;

			}
		}



	}

	.recentbox {
		margin-top: 32rpx;
		padding-left: 32rpx;
		padding-right: 32rpx;

		.icon_trash {
			width: 36rpx;
			height: 36rpx;
			position: absolute;
			right: 32rpx;
		}

		.title {
			font-size: 28rpx;
			color: @color-black-deep;

		}

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

			.tag {
				background-color: white;
				padding: 10rpx 20rpx;
				border-radius: 27rpx;
				font-size: 24rpx;
				margin: 15rpx;
				color: @color-black-deep;
			}
		}
	}

	.cardbox {
		display: flex;
		width: 750rpx;
		padding-left: 24rpx;
		padding-right: 24rpx;
		background-color: white;
		flex-wrap: wrap;

		.card {
			margin-top: 25rpx;
			margin-right: 25rpx;

			.pic {
				width: 343rpx;
				height: 343rpx;
				border-radius: 32rpx;

			}

			.desc {
				font-size: 26rpx;
				width: 330rpx;
				color: @color-black-deep;
			}

			.timestr {
				font-size: 24rpx;
				color: @color-black-medium;
				margin-top: 10rpx;
			}
		}
	}

	.bgbox {
		background-color: white;
		min-height: 90vh;
		width: 750rpx;
		overflow-x: hidden;
	}

	.cardboxtool {
		display: flex;
		width: 750rpx;
		padding-left: 24rpx;
		padding-right: 24rpx;
		flex-wrap: wrap;



		.card {
			margin-top: 25rpx;
			margin-right: 25rpx;
			background-color: @color-gray-light;
			width: 330rpx;
			height: 278rpx;
			border-radius: 32rpx;

			.pic {
				width: 200rpx;
				height: 200rpx;
				margin-top: 20rpx;
				margin-left: 20rpx;

			}

		}
	}
}
</style>