<template>
  <view class="xd-search-history">
    <template v-if="historyList.length">
      <view class="header">
        <view class="title">搜索历史</view>
        <view v-if="isEdit" class="clear_edit">
          <view class="clear_all" @click="clearAll">全部清空</view> | <view class="clear_comp" @click="isEdit=false">完成</view>
        </view>
        <view v-else class="clear" @click="clearHistory">清空</view>
      </view>
      <view class="content">
        <view class="history_item" v-for="(item,index) in historyList" :key="index"
          @click="handleClick(item)">
          <view class="text">{{item}}</view>
          <xd-font-icon v-show="isEdit" icon="icondanchuangguanbi_xian" size="18"></xd-font-icon>
        </view>
      </view>
    </template>
  </view>
</template>
<script>

/**
 *  XdSearchHistory
 * @description 搜索历史
 * @property {String} saveKey  保存的key
 * @property {Number} saveLength  保存的长度
 * @event {Function} onClick  点击事件
 * @example
 * <xd-search-history ref="searchHistory" :saveKey="saveKey" :saveLength="saveLength" @onClick="handleClick"></xd-search-history>
 * 添加搜索历史
 * this.$refs.searchHistory.addHistory(this.keyword)
 */
import XdFontIcon from "@/components/XdFontIcon/XdFontIcon.vue"
import storage from "@/common/storage";
export default {
  name: "XdSearchHistory",
  components: {
    XdFontIcon
  },
  props:{
    saveKey: {
      type: String,
      default: 'searchHistory'
    },
    saveLength: {
      type: Number,
      default: 10
    }
  },
  data(){
    return {
      historyList: [],
      isEdit: false
    }
  },
  created(){
    this.historyList = storage.get(this.saveKey) || [];
  },
  methods:{
    clearHistory(){
      this.isEdit = true;
    },
    handleClick(item){
      if(this.isEdit){
        this.historyList.splice(this.historyList.indexOf(item), 1);
        if(this.historyList.length === 0){
          this.isEdit = false;
        }
        storage.set(this.saveKey, this.historyList);
      }else{
        this.$emit("onClick", item);
      }
    },
    clearAll(){
      this.historyList = [];
      this.isEdit = false;
      storage.set(this.saveKey, this.historyList);
    },
    addHistory(keyWord){
      if(!keyWord) return;
      if(!Array.isArray(this.historyList)){
        this.historyList = [];
      }
      //如果不在记录，则添加
      if(this.historyList.indexOf(keyWord) === -1){
        this.historyList.unshift(keyWord);
      }else{
        //如果在记录中，则删除原来的，添加到第一条
        this.historyList.splice(this.historyList.indexOf(keyWord), 1);
        this.historyList.unshift(keyWord);
      }

      //如果超过10条，则删除最后一条
      if(this.historyList.length > this.saveLength){
        this.historyList.pop();
      }

      storage.set(this.saveKey, this.historyList);
    }
  }
}
</script>
<style lang="less" scoped>
  .xd-search-history{
    .header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 30rpx;
      height: 100rpx;
      background-color: #fff;
      .title{
        font-size: 30rpx;
        color: #333;
      }
      .clear_edit{
        display: flex;
        font-size: 28rpx;
        color: #999;
        .clear_all{
          margin-right: 20rpx;
        }
        .clear_comp{
          margin-left: 20rpx;
        }
      }
      .clear{
        font-size: 28rpx;
        color: #999;
      }
    }
    .content{
      padding: 0 30rpx;
      background-color: #fff;
      display: flex;
      flex-wrap: wrap;
      .history_item{
        display: flex;
        padding: 8rpx 24rpx;
        border-radius: 30rpx;
        border: 1px solid #DDD;
        font-size: 28rpx;
        margin: 0 20rpx 20rpx 0;
      }
      .text{
        margin-right: 8rpx;
      }
    }
  }
</style>
