<template>
  <div class="record">
    <div v-if="historyArr.length" class="record-item">
      <div class="Sr-item-header">
        <span>历史搜索</span>
        <span class="iconfont icon-trash" @click="clearHistroy" />
      </div>
      <div class="Sr-item-body ">
        <span
          v-for="item in historyArr"
          :key="item"
          class="ellipsis"
          @click="selectKeywords(item, '历史搜索')"
          >{{ item }}</span
        >
      </div>
    </div>
    <div v-if="termsArray.length" class="record-item">
      <div class="Sr-item-header">
        <span>大家都在搜</span>
      </div>
      <div class="Sr-item-body">
        <span v-for="item in termsArray" :key="item" @click="selectKeywords(item, '大家都在搜')">{{
          item
        }}</span>
      </div>
    </div>
  </div>
</template>

<script>
const CLEAR_HISTROY = 'clear';
const SELECT_KEY_WORD = 'select';
export default {
  props: {
    termsArray: {
      type: Array,
      default: () => []
    },
    historyArr: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    clearHistroy() {
      this.$emit(CLEAR_HISTROY);
    },
    selectKeywords(keyWords, type) {
      this.$track.registeredEvents('H5_2B_SearchPageTextClick', {
        category: type,
        search_term: keyWords
      });
      this.$emit(SELECT_KEY_WORD, keyWords);
    }
  }
};
</script>
<style lang="less" scoped>
.record {
  overflow-y: scroll;
  height: 90%;
  &-item {
    margin: @padding-x @padding-md @padding-lg @padding-md;
    .Sr-item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: @padding-md - 2;
      .text-size(14);
      color: @black;
      .icon-trash {
        color: @gray-4;
      }
    }
    .Sr-item-body {
      display: flex;
      flex-wrap: wrap;
      span {
        width: auto !important;
        padding: 0 @padding-sd;
        display: inline-block;
        .text-size(13);
        color: @black;
        margin: @padding-x + 2 @padding-x + 2 @padding-x + 2 0;
        height: 25px;
        line-height: 25px;
        border-radius: @border-radius-max;
        background: @gray-1;
      }
    }
  }
}
</style>
