<template>
	<scroll-view style="height: 100%" scroll-y>
		<view class="history-container">
			<view class="history-keyword">
				<view class="title-box justify-between align-center">
					<text class="title">搜索历史</text>
					<uni-icons type="trash" color="#fff" size="24" @click="clearHistory"></uni-icons>
				</view>
				<view class="keyword-tags flex-row">
					<view v-for="(item, index) in history" :key="index" class="keyword-tags-item">
						<u-tag :text="item" bgColor="#f8f8f8" borderColor="#f8f8f8" closable :show="true"
							@close="clearHistory(item)" color="#000000" plain shape="circle" @click="click(item)">
						</u-tag>
					</view>

				</view>
			</view>
			<scroll-view v-if="list" scroll-x scroll-with-animation :scroll-animation-duration="300"
				:disable-programmatic-animation="true">
				<view class="history-list">
					<view v-if="item.list" v-for="(item, index) in list" :key="index" class="list-item">
						<view class="">
							<view class="header-bg-upper"></view>
						</view>
						<view class="title">
							{{item.name}}
						</view>
						<view class="toplist">
							<!-- <navigator v-for="(vod, vodIndex) in item.list" :key="vodIndex" :url="'/pages/video/video?id='+vod.vod_id" hover-class="none" class="vod-item"> -->
							<view v-for="(vod, vodIndex) in item.list" :key="vodIndex" @click="navTo(vod.vod_id)"
								class="vod-item">
								<view class="num" :class="vodIndex < 3 && 'num-'+(vodIndex+1)">{{vodIndex+1}}</view>
								<vod-image :src="vod.vod_pic" />	
								<view>
									<view class="name">{{vod.vod_name}}</view>
									<view class="vod-tag">
										<!-- opacity: 0.1; -->
										<view class="vod-pingfen">
											<text>评分{{vod.vod_score}}</text>
										</view>
										<view class="vod-pingfen">
											<text>热度值{{vod.vod_hits_day}}</text>
										</view>
									</view>
									<view class="vod-msg ">
										<view class="">
											{{vod.vod_year}}<text v-if="vod.type_name_1">/{{vod.type_name_1}}</text>
										</view>
										<view style="width: 300rpx;overflow: hidden;
    text-overflow: ellipsis;" v-if="vod.vod_actor">/{{vod.vod_actor}}</view>
									</view>
								</view>

								<!-- <uni-icons v-if="vod.vod_hits_day > 0" type="arrow-up" color="#eb8260"
									size="24"></uni-icons>
								<uni-icons v-else  type="arrow-down" color="#09a96a" size="14"></uni-icons> -->
							</view>

							<!-- </navigator> -->
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</scroll-view>
</template>

<script>
	import {
		app
	} from '@/utils/api'
	import vodImage from "@/components/vod-image.vue"
	export default {
		components:{
			vodImage
		},
		data() {
			return {
				history: [],
				list: []
			}
		},
		created() {
			this.getHistory()
			this.hotSearch()
		},
		methods: {
			async navTo(id) {
				this.openVideo(id)
			},
			hotSearch() {
				app.hotSearch().then(res => {
					console.log("res: ", res);
					this.list = res.data
				})
			},
			getHistory() {
				uni.getStorage({
					key: 'search_history',
					success: (res) => {
						if (res.data) {
							this.history = JSON.parse(res.data)
						}
					}
				})
			},
			clearHistory(item = '') {
				if (item) {
					console.log("this.history: ", this.history);
					for (var i = 0; i < this.history.length; i++) {
						if (item == this.history[i]) {
							this.history.splice(i, 1); // Remove the matching item
							uni.setStorage({
								key: 'search_history',
								data: JSON.stringify(this.history)
							})
							break;
						}
					}
				} else {
					uni.removeStorage({
						key: 'search_history',
						success: (res) => {
							this.history = []
						}
					})
				}

			},
			click(value) {
				this.$emit('item-click', value)
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff !important;
	}
	.u-tag-wrapper {
		opacity: 0.1;
		
	}
	
	.history-container {
		padding: 10px 0 15px;

		.history-keyword {
			padding-bottom: 10px;

			.title-box {
				padding: 0 15px;

				.title {

					font-size: 16px;
					font-weight: 700;
					color: #fff;
				}
			}

			.keyword-tags {
				padding: 10px;
				flex-wrap: wrap;

				.keyword-tags-item {
					margin: 5px;
				}
			}
		}

		.history-list {
			white-space: nowrap;

			.list-item {
				width: 320px;
				margin: 0 5px;
				padding: 10px 0px;
				padding-left: 20rpx;
				position: relative;
				display: inline-block;
				overflow: hidden;

				&:first-child {
					margin-left: 15px;
				}

				&:last-child {
					margin-right: 15px;
				}

				.header-bg {
					height: 100px;
					position: absolute;
				}

				.title {
					font-size: 16px;
					font-weight: 500;
					line-height: 50px;
					padding-left: 20rpx;
					margin: 0 !important;
					color: #FFF;
					position: relative;
					width: 310px;
					height: 50px;
					background: linear-gradient(124deg, #FC5667 0%, #FC8484 100%);
					border-radius: 10px;
				}

				.toplist {
					margin-top: 10px;
					position: relative;

					.vod-tag {
						display: flex;
						margin-bottom: 4px;

						.vod-pingfen {
							padding: 6rpx;
							font-size: 10px;
							margin-right: 5px;
							font-weight: 400;
							color: #FC5667;
							line-height: 13px;
							border-radius: 2px;

							background-color: rgba(252, 100, 114, 0.1);
						}

					}

					.vod-msg {
						color: rgba(0, 0, 0, 0.5);
						font-size: 10px;
						display: flex;
					}

					.vod-item {
						margin: 15px 0;
						display: flex;
						align-items: center;
						// justify-content: space-between;

						image {
							width: 43px;
							margin-right: 10px;
							height: 60px;
							border-radius: 5px;
						}

						.num {
							position: relative;
							top: -22px;
							left: 14px;
							z-index: 99;
							width: 15px;
							height: 17px;
							text-align: center;
							background: #D8D8D8 linear-gradient(136deg, #EB9429 0%, #FC5667 100%);
							border-radius: 7px 0px 7px 0px;
							font-size: 10px;
							color: #ffffff;

							// &.num-1 {
							//   color: #f23986;
							// }
							// &.num-2 {
							//   color: #fb6d2c;
							// }
							// &.num-3 {
							//   color: #feb345;
							// }
						}




						.name {
							margin: 2px 0px;
							flex: 1 1 0%;
							font-size: 14px;
							color: #fff;
							font-weight: 500;
							width: 300rpx;overflow: hidden;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}
			}
		}
	}
</style>