<template>
	<view class="searchRecord_content">
		<view class="searchRecord_content_header">
			<view class="_header_title">
				{{searchRecordTitle}}
			</view>
			<view class="_header_right">
				<view class="_header_right_delete_icon" v-if="headerRightDelete" @tap="handelDelSearch">
					<!-- delete_icon.png -->
					<image class="is_image" src="/static/images/delete_icon.png"></image>
				</view>
			</view>
		</view>
		<view class="searchRecord_list">
			<view class="searchRecord_list_item" v-for="m in dataList" :key="m.id" :data-title="m.title" @tap="handelSearchRecord">
				<text>{{m.title}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			searchRecordTitle: {
				type: String,
				default: '热门搜索'
			},
			headerRightDelete: {
				type: Boolean,
				default: false
			},
			dataList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {

			}
		},
		methods: {
			handelDelSearch() {
				this.$emit('handelDel')
			},
			handelSearchRecord(e) {
				this.$emit('handelSearchRecord',e) 
			}
		}
	}
</script>

<style lang="scss" scoped>
	.is_image {
		display: flex;
		width: 100%;
		height: 100%;
	}

	.searchRecord_content {
		width: 100%;

		.searchRecord_content_header {
			width: 100%;
			display: flex;
			justify-content: space-between;

			._header_title {
				font-size: 30rpx;
				color: #666666;
			}

			._header_right_delete_icon {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.searchRecord_list {
			display: flex;
			flex-wrap: wrap;
			width: 100%;

			.searchRecord_list_item {
				height: 56rpx;
				line-height: 56rpx;
				padding: 0 16rpx;
				background-color: #F3F4F6;
				color: #333333;
				font-size: 28rpx;
				border-radius: 12rpx;
				margin-top: 30rpx;
				margin-right: 30rpx;
			}
		}
	}
</style>