<template>
  <view class="search">
    <view class="search-item">
      <u-search
        v-model="search_text"
        :clearabled="true"
        @custom="handlerSearchBtn"
        @search="handlerSearchBtn"
        :actionStyle="{ color: '#215EBE' }"
      />
      <!-- <button class="search-btn" @click="handlerSearchBtn">搜索</button> -->
    </view>

    <!-- 搜索历史 -->
    <view class="history" v-show="search_list.length != 0">
      <view class="history-top">
        <view class="title">搜索历史</view>
        <view class="history-right" @click="handlerAllSearchRecord">
          <u-icon name="trash" />
          <!-- <text>删除记录</text> -->
        </view>
      </view>
      <view class="label">
        <u-tag
          v-for="(item, index) of search_list"
          :key="index"
          :text="item.name"
          plain
          closable
          borderColor="#F5F6F8"
          :show="close2"
          color="#0C1223"
          bgColor="#F5F6F8"
          :closable="false"
          @close="handlerCloseSearchItem(item, index)"
          @click="handlerSelctHistItem(item)"
        />
      </view>
    </view>
    <!-- 热门搜索 -->
    <view class="history">
      <view class="history-top">
        <view class="title">热门搜索</view>
      </view>
      <view class="label">
        <u-tag
          v-for="(item, index) in popular_search_list"
          :text="item.name"
          :key="index"
          borderColor="#F5F6F8"
          :show="close2"
          :color="
            index == 0 ? '#EB1010' : index == 1 ? '#FF5219' : index == 2 ? '#FDA50C' : '#0C1223'
          "
          bgColor="#F5F6F8"
          :closable="false"
          class="label-item"
          v-if="index < 8"
          @click="$Router.push(`/pagesHome/marketer/index?id=${item.id}`)"
        />
      </view>
    </view>
    <u-divider text="猜你喜欢"></u-divider>
    <!-- 列表 -->
    <view class="popular-box">
      <view class="popular-item">
        <view
          class="item-box layered"
          v-for="(item, index) of favorite_list"
          :key="index"
          @click="$Router.push(`/pagesHome/marketer/index?id=${item.id}`)"
        >
          <view class="item-left">
            <image class="img" :src="item.logo" mode="aspectFill"></image>
          </view>
          <view class="item-right">
            <view class="item-title">{{ item.name }}</view>
            <view class="item-score">
              <u-rate count="5" size="20" :value="item.score" active-color="#FFA033" readonly />
              <span class="rate-text" v-if="item.score">( {{ item.score.toFixed(1) }} )</span>
            </view>
            <view class="item-address"> {{ item.address }} </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { listHotMerchant, likeMerchant } from '@/api/client/home.js';
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      count: 5,
      value: 4,
      close2: true,
      radios: [
        {
          checked: true,
        },
      ],
      checkboxs: [
        {
          checked: true,
        },
      ],
      search_text: '', // 搜索text
      search_list: [], // 搜索列表

      popular_search_list: [], //热门搜索列表
      favorite_list: [], // 猜你喜欢列表
    };
  },
  computed: {
    ...mapGetters(['location']),
  },
  watch: {
    // 搜索历史 > 8 删除最后一项
    search_list(newValue) {
      if (newValue.length > 8) {
        this.search_list.splice(newValue.length - 1, 1);
        uni.setStorageSync('searchItem', this.search_list);
      }
    },
  },
  onShow() {
    this.search_text = '';
    if (uni.getStorageSync('searchItem')) {
      this.search_list = uni.getStorageSync('searchItem');
    }
  },
  mounted() {
    this.handlerInitList();
  },
  methods: {
    // 初始化热门搜索 猜你喜欢列表
    handlerInitList() {
      listHotMerchant({ ...this.location }).then(res => {
        this.popular_search_list = res.data;
      });

      // 猜你喜欢列表
      likeMerchant({ ...this.location }).then(res => {
        this.favorite_list = res.data;
      });
    },
    // 点击搜索按钮
    handlerSearchBtn() {
      let params = {
        name: this.search_text,
      };
      this.search_list.unshift(params);
      uni.setStorageSync('searchItem', this.search_list);
      uni.navigateTo({
        url: `/pagesHome/category/categoryStoreList?keyword=${this.search_text}`,
      });
    },
    // 删除搜索记录按钮
    handlerCloseSearchItem(item, index) {
      this.search_list.splice(index, 1);
      uni.setStorageSync('searchItem', this.search_list);
    },
    // 点击搜索历史按钮
    handlerSelctHistItem(item) {
      this.search_text = item.name;
      uni.navigateTo({
        url: `/pagesHome/category/categoryStoreList?keyword=${this.search_text}`,
      });
    },
    // 删除所有搜索记录按钮
    handlerAllSearchRecord() {
      uni.removeStorageSync('searchItem');
      this.search_list = [];
    },
  },
};
</script>

<style lang="scss" scoped>
.search {
  min-height: 100vh;
  background-color: #fff;
}

/* 搜索样式 */
.search-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20rpx;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #fff;
  margin-bottom: 10rpx;

  .search-btn {
    width: 160rpx;
    height: 70rpx;
    font-size: 28rpx;
    line-height: 70rpx;
  }
}

/* 搜索历史样式 */
.history {
  padding: 20rpx 30rpx;

  .history-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    .title {
      color: #0c1223;
      font-size: 30rpx;
      font-weight: bold;
    }
    .history-right {
      margin-top: 15rpx;
      display: flex;
      font-size: 12px;
    }
  }
}

.label {
  display: flex;
  flex-wrap: wrap;
}

.label-item {
  margin-bottom: 20rpx;
}

.popular-box {
  padding: 20rpx;

  .item-box {
    display: flex;
    margin-bottom: 20rpx;
    border-radius: 20rpx;
    padding: 20rpx;

    .item-left {
      margin-right: 20rpx;

      .img {
        width: 160rpx;
        height: 160rpx;
        border-radius: 20rpx;
      }
    }

    .item-right {
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .item-title {
        color: #0c1223;
        font-weight: bold;
        font-size: 28rpx;
      }
      .item-score {
        display: flex;
        align-items: center;
        .rate-text {
          color: #9fa0a6;
          font-size: 24rpx;
          margin-left: 10rpx;
        }
      }
      .item-address {
        color: #999999;
        font-size: 24rpx;
      }
    }
  }

  .layered {
    box-shadow: 0 1px 1px hsla(0deg, 0%, 0%, 0.075), 0 5px 10px hsla(0deg, 0%, 0%, 0.075),
      0 4px 4px hsla(0deg, 0%, 0%, 0.075), 0 -1px 0px hsla(0deg, 0%, 0%, 0.075),
      0 6px 8px hsla(0deg, 0%, 0%, 0.025);
  }
}

::v-deep view.data-v-1481d46d,
scroll-view.data-v-1481d46d,
swiper-item.data-v-1481d46d {
  margin: 0 4rpx;
}

::v-deep view.data-v-39e33bf2,
scroll-view.data-v-39e33bf2,
swiper-item.data-v-39e33bf2 {
  margin-bottom: 10rpx !important;
}
</style>
