<template>
  <view class="flex-1 px-30">
    <view
      class="search-content flex-row"
      style="align-items: center;"
    >
      <view class="search-center flex-row">
        <u-search
          v-model="keyword"
          bg-color="transparent"
          class="flex-1"
          :show-action="false"
          height="80rpx"
          placeholder="输入你想看的剧名"
          @search="searchHandler"
        />
        <view
          class="search-btn flex-center"
          @click="searchHandler"
        >
          <text class="search-btn-text">
            搜索
          </text>
        </view>
      </view>
    </view>
    <view
      v-if="status === 2"
      class="searchResult"
    >
      <text class="searchResult-title">
        搜索结果
      </text>
      <view
        v-if="searchList.length !== 0"
        class="flex-row"
        style="flex-wrap: wrap;"
      >
        <GpursueItem
          v-for="(item, index) in searchList"
          :key="index"
          :class="{'mr-26':(index + 1) % 3 !==0}"
          :data="item"
        />
      </view>
      <GNoData
        v-else
        image="no-search"
        text="没有搜到相关短剧~"
      />
    </view>
    <view
      v-else
      class="search-history"
    >
      <view
        class="search-history-title flex-row"
        style="align-items: center;justify-content: space-between;"
      >
        <text class="search-history-title-text">
          历史搜索
        </text>
        <u-icon
          name="/static/icon/delete.png"
          size="40rpx"
          @click="clearHistoryList"
        />
      </view>
      <view
        class="historyData flex-row py-20"
        style="flex-wrap: wrap;"
      >
        <view
          v-for="(item, index) in historySearch"
          :key="index"
          class="historyItem"
          @click="navigator(item)"
        >
          <text class="historyItem-text">
            {{ item }}
          </text>
        </view>
      </view>
    </view>


    <GModal ref="modal" />
  </view>
</template>

<script>
import { searchFilm } from '@/api/index.js';
export default {
	data() {
		return {
			status: 0, // 状态 0 未搜索  1 搜索中 2 搜索结果
			keyword: '',
			historySearch: [],
			searchList: []
		};
	},
	onLoad() {
		this.historySearch = uni.getStorageSync('historySearch') || [];
	},
	methods: {
	
		setHistorySearch(historySearch = []) {
			this.historySearch = historySearch;
			uni.setStorageSync('historySearch', this.historySearch);
		},
		clearHistoryList() {
			this.$refs.modal.open('你确定要删除历史记录吗').then(() => {
				this.setHistorySearch([]);
			});
		},
		searchHandler() {
		
			if (this.keyword.trim()) {
				
				this.navigator(this.keyword);
			} else {
				uni.showToast({
					title: '搜索内容不能为空',
					icon: 'none'
				});
			}
		},
		navigator(item) {
			const index = this.historySearch.indexOf(item);
			this.keyword = item;
			this.status = 2;
			uni.hideKeyboard();
			if (index !== -1) {
				this.historySearch.splice(index, 1);
				this.historySearch.unshift(item);
			} else if (this.historySearch.length >= 10) {
				this.historySearch.pop();
				this.historySearch.unshift(item);
			} else {
				this.historySearch.unshift(item);
			}

			uni.setStorageSync('historySearch', this.historySearch);
			uni.hideKeyboard();
			searchFilm({ keyword: this.keyword }).then(res => {
				this.searchList = res || [];
			});
		}
	}
};
</script>

<style lang="scss">
.search-content {
	height: 144rpx;
}
.search-center {
	width: 690rpx;
	height: 80rpx;
	background: #f3f4f6;
	border-radius: 52rpx;
	align-items: center;
}
.search-btn {
	width: 136rpx;
	height: 72rpx;
	background: linear-gradient(158deg, #ff8197 0%, #ff3364 100%);
	border-radius: 36rpx;
	.search-btn-text {
		font-size: 36rpx;
		font-weight: 400;
		color: #ffffff;
	}
}
.search-history-title-text {
	font-size: 32rpx;
	font-weight: bold;
	color: #1a1a1a;
}
.historyItem {
	padding: 8rpx 20rpx;
	background: #f3f3f3;
	border-radius: 58rpx;
	margin-right: 20rpx;
	margin-bottom: 20rpx;
}
.historyItem-text {
	font-size: 28rpx;
	font-weight: 400;
	color: #1a1a1a;
}
.inTheSearch-img {
	width: 244rpx;
	height: 136rpx;
	border-radius: 16rpx;
}
.inTheSearch-title {
	font-size: 36rpx;
	font-weight: 400;
	color: #1a1a1a;
}
.inTheSearch-num {
	font-size: 28rpx;
	font-weight: 400;
	color: #999999;
}
.searchResult-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #1a1a1a;
	margin-bottom: 20rpx;
}
</style>
