<template>
  <view class="Sr">
    <view class="Sr-header">
      <text>{{ title }}</text>
      <text v-if="delIcon" class="iconfont icon-trash" @click="clearHistroy" />
    </view>
    <view class="Sr-body">
      <button
        v-for="(item, index) in recordList"
        :key="index"
        class="Sr-body-text"
        :class="textClass"
        @click.stop="selectKeywords(item)"
      >
        <template v-if="textKey">
          {{ item[textKey] }}
        </template>
        <template v-else>{{ item }}</template>
      </button>
    </view>
  </view>
</template>
<script>
const SELECT_KEY_WORD = "select";
const CLEAR_HISTROY = "clear";
export default {
  props: {
    recordList: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: "历史搜索"
    },
    delIcon: {
      type: Boolean,
      default: false
    },
    textKey: {
      type: String,
      default: ""
    },
    textClass: {
      type: String,
      default: ""
    }
  },
  methods: {
    clearHistroy() {
      this.$emit(CLEAR_HISTROY);
    },
    selectKeywords(item) {
      console.log("==============>", this.textKey);
      console.log("===============>", this.historyArr);
      this.$emit(SELECT_KEY_WORD, item);
    }
  }
};
</script>
<style lang="scss" scoped>
.Sr {
  margin: $margin-1 $margin-lg $margin-1;
  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: $margin-lg;
    font-family: PingFangSC-Medium;
    font-size: $font-base;
    color: $text-color-n5;
  }
  &-body {
    display: flex;
    flex-wrap: wrap;
    &-text {
      padding: 0 $padding-md;
      display: inline-block;
      font-size: $font-md;
      color: $text-color-n5;
      margin: $margin-md $margin-md $margin-md 0;
      height: 50rpx;
      line-height: 50rpx;
      border-radius: $border-radius-1;
      background: $bg-color-g1;
    }
    &-text__red {
      color: $uni-color-primary;
      background-color: #fff3f3;
    }
  }
}
</style>
