<template>
  <view>
    <!-- 顶部navbar -->
    <u-navbar @rightClick="rightClick" placeholder :autoBack="true">
      <template #center>
        <view class="topSearchBox">
          <u-search
            placeholder="请输入商家名称"
            :clearabled="true"
            :showAction="false"
            v-model="searchValue"
            @search="searchHandler1"
          ></u-search>
        </view>
      </template>
    </u-navbar>

    <!-- 清空历史记录模态框 -->
    <u-modal
      :show="historyListShow"
      showCancelButton
      @cancel="() => (this.historyListShow = false)"
      @confirm="confirmRemoveHistorySearchHandler"
      :content="content"
    ></u-modal>

    <!-- 版心 -->
    <template v-if="searchState == 2">
      <view class="mainBox">
        <view class="flexJ" v-if="historyGoodsSearchList.length !== 0">
          <view class="historyText">历史搜索</view>
          <u-icon name="trash" @click="() => (this.historyListShow = true)"></u-icon>
        </view>

        <!-- 搜索记录 -->
        <view class="flexA historySearchBox">
          <view
            class="historySearchText flexC"
            v-for="item in historyGoodsSearchList"
            :key="item"
            @click="hotSearchHandler(item)"
          >
            {{ item }}
          </view>
        </view>

        <!-- 热门搜索 -->
        <view class="hotSearchBox">
          <view class="flexA" style="margin-bottom: 32rpx">
            <image style="width: 32rpx; height: 32rpx" src="/static/hotsearch.png" mode="scaleToFill" />
            <view class="hotsearchText">热门搜索</view>
          </view>

          <!-- 热门搜索内容 -->
          <view class="hotCentent">
            <view class="leftHotList">
              <view
                class="flexA"
                style="margin-bottom: 32rpx"
                v-for="item in firstList"
                :key="item.id"
                @click="hotSearchHandler(item.title)"
              >
                <view
                  class="index"
                  :style="{ background: item.id == 1 ? '#f03f30' : item.id == 2 ? '#f2b738' : item.id == 3 ? '#a3b5e1' : '' }"
                >
                  {{ item.id }}
                </view>
                <text>{{ item.title }}</text>
              </view>
            </view>
            <view class="line"></view>
            <view class="rightHotList">
              <view
                class="flexA"
                style="margin-bottom: 32rpx"
                v-for="item in secondList"
                :key="item.id"
                @click="hotSearchHandler(item.title)"
              >
                <view class="index">{{ item.id }}</view>
                <text>{{ item.title }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </template>
    <template v-if="searchState == 0">
      <view style="margin-top: 300rpx">
        <u-empty />
      </view>
      <!-- <u-empty mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png"></u-empty> -->
    </template>
    <template v-if="searchState == 1">
      <view v-for="item in searchList1" :key="item.id">
        {{ item.title }}
        <image style="width: 200rpx; height: 300rpx" :src="item.image" mode="scaleToFill" />
        {{ item.content }}
      </view>
    </template>
  </view>
</template>

<script>
import { getList } from '@/api'
export default {
  data() {
    return {
      hotList: [
        { id: 1, title: '小米春季新款吹风机' },
        { id: 2, title: 'Dyson黑色吹风机' },
        { id: 3, title: '便宜好用的吹风机' },
        { id: 4, title: '小米春季新款吹风机' },
        { id: 5, title: '高端吹风机' },
        { id: 6, title: '小米春季新款吹风机' },
        { id: 7, title: 'supersonic吹风机' },
        { id: 8, title: '超低价吹风机' },
        { id: 9, title: '明星同款吹风机' },
        { id: 10, title: '万能吹风机' },
      ],
      firstList: [],
      secondList: [],
      // 清空历史记录参数
      historyListShow: false,
      content: '您确定要清空历史记录吗？',
      // 搜索结果 0 有结果 1没有结果
      searchState: 2,
      historyGoodsSearchList: [],
      searchList: [],
      // 搜索框值
      searchValue: '',
      // 热门搜索数据
      hotSearchList: [],
      // 搜索出来的内容
      searchList1: [],
    }
  },
  onLoad(options) {
    this.firstList = this.hotList.slice(0, 5)
    this.secondList = this.hotList.slice(5)
    this.historyGoodsSearchList = uni.getStorageSync('historySearchList', this.historyGoodsSearchList) || []
  },
  methods: {
    async getList(val) {
      const { data } = await getList({
        type_id: '', //	integer	否	论坛类型
        keywords: val, //	string	否	关键词
        order: 1, //	string	是	排序，1:评论，0:时间
        page: 1, //	integer	是	页码
        rows: 4, //	integer	是	条数
      })
      console.log(data)
      if (data.data.length == 0) {
        this.searchState = 0
      } else {
        this.searchState = 1
        this.searchList1 = data.data
        this.searchList1.forEach((item, index) => {
          item.image = JSON.parse(data.data[index].file).imgList[0]
        })
      }
    },
    // 确定清空历史搜索记录
    confirmRemoveHistorySearchHandler() {
      uni.removeStorageSync('historySearchList')
      this.historyGoodsSearchList = []
      this.historyListShow = false
      uni.showToast({
        title: '清空历史记录成功',
        icon: 'success',
      })
    },
    // 搜索
    searchHandler1(val) {
      this.historyGoodsSearchList.indexOf(this.searchValue) == '-1'
        ? (() => {
            this.historyGoodsSearchList.push(this.searchValue)
            uni.setStorageSync('historySearchList', this.historyGoodsSearchList)
            if (this.historyGoodsSearchList.length > 10) {
              this.historyGoodsSearchList.shift()
            }
            // 调接口
            this.getList(val)
          })()
        : // : ''
          // 调接口
          this.getList(val)
    },
    // 热门搜索
    hotSearchHandler(val) {
      console.log(val)
      this.historyGoodsSearchList.indexOf(val) == '-1'
        ? (() => {
            this.historyGoodsSearchList.push(val)
            uni.setStorageSync('historySearchList', this.historyGoodsSearchList)
            if (this.historyGoodsSearchList.length > 10) {
              this.historyGoodsSearchList.shift()
            }
            // 调接口
            this.getList(val)
          })()
        : // : ''
          // 调接口
          this.getList(val)
    },
  },
}
</script>

<style lang="scss">
page {
  background: #fff;
}
.topSearchBox {
  margin-right: 118rpx;
}
.mainBox {
  padding: 34rpx 32rpx 0;
  box-sizing: border-box;
}
.historyText {
  color: rgba(50, 50, 51, 1);
  font-size: 28rpx;
  font-weight: 700;
  margin-bottom: 32rpx;
}
.historySearchBox {
  flex-wrap: wrap;
}
.u-search__content {
  min-width: 426rpx !important;
}
/* .noSearchList {
  height: 100vh;
  background: #f6f8fa;
} */
.historySearchText {
  padding: 8rpx 12rpx;
  box-sizing: border-box;
  border-radius: 154rpx;
  background: rgba(247, 248, 250, 1);
  margin-right: 24rpx;
  margin-bottom: 24rpx;
  color: rgba(0, 0, 0, 0.9);
  font-size: 24rpx;
}
.hotsearchText {
  color: rgba(50, 50, 51, 1);
  font-size: 28rpx;
  font-weight: 700;
  margin-left: 10rpx;
}
.hotSearchBox {
  margin-top: 40rpx;
  border-radius: 20rpx;
  padding: 32rpx;
  box-sizing: border-box;
  background: linear-gradient(180.1deg, rgba(254, 242, 240, 1) 0%, rgba(255, 251, 248, 1) 35%, rgba(255, 255, 255, 0) 100%);
}
.hotCentent {
  display: flex;
  > .line {
    height: 328rpx;
    width: 2rpx;
    background: #e5e8ec;
    margin-right: 24rpx;
  }
  > .leftHotList {
    width: 286rpx;
    height: 40rpx;
    .index {
      width: 24rpx;
      height: 24rpx;
      border-radius: 8rpx;
      background: rgba(200, 201, 204, 1);
      color: rgba(255, 255, 255, 1);
      font-size: 20rpx;
      text-align: center;
      margin-right: 16rpx;
    }
    text {
      color: rgba(50, 50, 51, 1);
      font-size: 26rpx;
    }
    > .flexB {
      margin-bottom: 32rpx;
    }
  }
  > .rightHotList {
    width: 286rpx;
    height: 40rpx;
    .index {
      width: 24rpx;
      height: 24rpx;
      border-radius: 8rpx;
      background: rgba(200, 201, 204, 1);
      color: rgba(255, 255, 255, 1);
      font-size: 20rpx;
      text-align: center;
      margin-right: 16rpx;
    }
    text {
      color: rgba(50, 50, 51, 1);
      font-size: 26rpx;
    }
    > .flexB {
      margin-bottom: 32rpx;
    }
  }
}
</style>