<template>
  <div class="goods-search-con">
    <div class="search-bar-con flex-default">
      <div class="search-bar flex-default">
        <m-icon icon="icon-search2" :size="14" className="search-logo" />
        <input
          v-model="searchContent"
          placeholder="搜索数字藏品"
          @keyup.enter="handleSearch(searchContent)"
          confirm-type="search"
          type="text"
          autocomplete="off"
          enterkeyhint="search"
          :autofocus="searchFocus"
        />
        <!-- <div class="del-logo" /> -->
      </div>
      <div
        class="submit"
        @click="handleSearch(searchContent)"
        :style="{ color: submitColor }"
      >
        搜索
      </div>
    </div>
    <div class="history">
      <div class="header flex-default">
        <span class="title">搜索历史</span>
        <span class="del" @click="clearSearchHistory" v-show="showDel">
          删除
        </span>
      </div>
      <div class="list flex-default">
        <div
          class="item"
          v-for="(item, index) of searchHistory"
          :key="'history-item-' + index"
          @click="handleSearch(item)"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <!-- <div class="discovery">
      <div class="title">搜索发现</div>
      <div class="list flex-default">
        <div
          class="item"
          v-for="(item, index) of discoveryList"
          :key="'discovery-item-' + index"
          @click="handleSearch(item)"
        >
          {{ item }}
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from "vuex";
export default {
  data() {
    return {
      searchContent: "",
      searchFocus: true,
      historyList: [],
      discoveryList: [],
    };
  },
  computed: {
    ...mapState(["searchHistory"]),
    ...mapGetters(["hasLogin"]),
    showDel() {
      return this.searchHistory && this.searchHistory.length > 0;
    },
    submitColor() {
      if (
        this.searchContent &&
        this.searchContent.trim() &&
        this.searchContent.trim().length >= 0
      ) {
        return "#2b2b3a";
      }
      return "#aeaeae";
    },
  },
  methods: {
    ...mapMutations(["addSearchHistory", "clearSearchHistory"]),
    requestHistory() {
      this.historyList = this.searchHistory;
    },
    handleSearch(val) {
      if (val && val.trim() && val.trim().length != 0) {
        val = val.trim();
        this.searchContent = val;
        this.addSearchHistory(val);

        let query = { searchKey: val };
        this.$router.replace({ name: "search-result", query });
      } else {
        this.$toast("请输入搜索内容");
      }
    },
  },
  onLoad(option) {
    this.searchContent = option.searchKey;
  },
  mounted() {
    this.searchFocus = true;
  },
  onShow() {
    this.requestHistory();
    this.searchFocus = false;
    setTimeout(() => {
      this.searchFocus = true;
    }, 0);
  },
};
</script>

<style lang="less">
.goods-search-con {
  background: #f5f7fb;
  width: 100%;
  height: 100%;
  position: absolute;
  > .search-bar-con {
    background: #ffffff;
    padding: 7px 16px;
    align-items: center;
    .search-bar {
      flex: 1;
      margin-right: 15px;
      width: 100%;
      height: 30px;
      border-radius: 15px;
      background: #f1f1f1;
      padding: 0 15px;
      align-items: center;
    }
    .search-bar input {
      flex: 1;
      height: 100%;
      font-size: 14px;
    }
    .search-bar .search-logo {
      margin-right: 9px;
    }
    .submit {
      color: #aeaeae;
      font-size: 14px;
    }
  }

  > .history {
    padding: 16px;
    margin-bottom: 20px;
    background: #ffffff;

    .header {
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }

    .header .title {
      color: #2b2b3a;
      font-weight: bold;
      font-size: 15px;
    }

    .header .del {
    }

    .list {
      flex-wrap: wrap;
    }

    .list .item {
      padding: 5px 17px;
      background: #f1f1f1;
      border-radius: 18px;
      margin-right: 10px;
      margin-bottom: 10px;
      font-size: 13px;
      font-weight: 400;
    }
  }

  > .discovery {
    padding: 0 10px;

    .title {
      font-weight: bold;
      font-size: 16px;
      margin-bottom: 10px;
    }

    .list {
      flex-wrap: wrap;
    }

    .list .item {
      padding: 5px 10px;
      background: #e5e5e5;
      border-radius: 20px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }
}
</style>
