<template>

	<view>

		<view style="display: flex; width: 100vw;">

			<uni-search-bar style="width: calc(100vw - 52px);margin-top: 20px;padding: 10px;" bgColor="#FFFFFF"
				:placeholder="searchPlaceHolder" ref="searchBar" radius="100" v-model="searchText"
				cancelButton="none" />
			<view style="width: 52px; line-height: 60px;" @click="goSearchClick()"> 搜索 </view>


		</view>

		<view style="display: flex; margin-top: -6px;" v-if="hisSeen">
			<view class="hotSearchTitV"> 历史记录 </view>
			<image @click="deleteHisClick()"
				style="margin-left: calc(100vw - 222px);width: 30px;height: 30px;margin-top: 6px;"
				src="./delete_icon.png"></image>
		</view>

		<view class="upView" v-if="hisSeen"
			style="overflow: hidden; flex: 1; flex-wrap: wrap;  width: calc(100vw - 20px);  margin-top:2px;">

			<!-- 自定义了一个data-id的属性,可以通过js获取到它的值!  hover-class 指定按下去的样式类-->
			<view class="cellView" v-for="(tagItem, index) in hisList" :key="index" @click="selHisClick(tagItem)">
				{{tagItem}}
			</view>

		</view>

	</view>

</template>

<script>
	// import uniSearchBar from './uni-search-bar/uni-search-bar.vue';
	import data from './data.json'
	export default {
		components: {

			// uniSearchBar
		},
		props: {

			searchPlaceHolder: {
				type: String,
				default: ""
			},
			keyStr: {
				type: String,
				default: ""
			},
			focus: {
				type: Boolean,
				// default: true
			}
		},
		data() {
			return {
				hisList: [],
				hisSeen: false,
				searchText: '',
				resultList: [],
				dataList: data
			}
		},

		mounted() {

			let hisArrStr = uni.getStorageSync(this.keyStr);
			console.log('hisArrStr = ' + hisArrStr);

			this.hisSeen = (hisArrStr.length > 0);
			this.hisList = hisArrStr.split(',');
		},
		methods: {
			onblur() {
				this.focus = false
			},
			selHisClick(item) {
				this.$emit('hisClick', item)
			},
			deleteHisClick() {
				let myThis = this;
				uni.showModal({
					confirmText: '清空',
					cancelText: '忽略',
					content: '清空后将无法恢复',
					title: "确认清空所有历史记录",
					success: function(res) {
						if (res.confirm) {

							console.log('清理数据');
							uni.removeStorageSync(myThis.keyStr);
							myThis.hisSeen = false;
							myThis.hisList = [];

						} else if (res.cancel) {

							console.log('用户点击取消');
						}
					}
				});


			},
			goSearchClick(item) {
				this.searchText = String(this.searchText)
				console.log('搜索值 = ' + this.searchText);
				if (this.searchText == undefined || this.searchText == '') {
					return;
				}

				this.$emit('searchClick', this.searchText)

				//  存储历史记录
				let hisArrStr = uni.getStorageSync(this.keyStr);
				let hisArr = hisArrStr.split(',');

				let selIndex = hisArr.indexOf(this.searchText);
				if (selIndex < 0) {

					if ((hisArrStr).length > 0) {

						uni.setStorageSync(this.keyStr, this.searchText + ',' + hisArrStr);

					} else {

						uni.setStorageSync(this.keyStr, this.searchText);

					}

				} else {
					hisArr.splice(selIndex, 1);
					hisArrStr = hisArr.join(",");
					uni.setStorageSync(this.keyStr, this.searchText + ',' + hisArrStr);

				}

			},

		}
	}
</script>

<style scoped>
	uni-view {
		box-sizing: content-box;
	}

	.hotSearchTitV {
		margin-left: 14px;
		margin-top: 4px;
		width: 170px;
		height: 22px;
		font-size: 14px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #161616;
		line-height: 22px;
	}

	.upView {
		display: flex;
		flex-direction: row;
		height: auto;
		margin-left: 4px;
	}

	.cellView {

		height: 16px;
		line-height: 16px;
		text-align: center;

		padding: 6px 10px !important;
		margin-top: 10px;
		font-size: 12px;
		margin-left: 10px;
		border-radius: 2px;
		background-color: white;
	}
</style>