<template>
  <view>
    <!-- 顶部navbar -->
    <u-sticky bgColor="#fff">
      <u-navbar @leftClick="searchState = 2" 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>
      <!-- 粘性tabs -->
      <u-tabs
        v-if="searchState == 1"
        :list="list1"
        :lineWidth="40"
        lineColor="#6E16FF"
        :inactiveStyle="inactiveStyle"
        :activeStyle="activeStyle"
        :scrollable="false"
      ></u-tabs>
    </u-sticky>

    <!-- 清空历史记录模态框 -->
    <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> -->
      <view class="mainBox">
        <custom-waterfalls-flow :value="searchList1" ref="waterfallsFlowRef" imageKey="image" :seat="2" @imageClick="toDetailHandler">
          <view class="item" v-for="(item, index) in searchList1" :key="index" slot="slot{{index}}">
            <view class="title flexC">{{ item.title }}</view>
            <view class="flexJ">
              <view class="flexA headerBox">
                <image :src="item.user.avatar" mode="scaleToFill" />
                <view>{{ item.user.user_name }}</view>
              </view>
              <view class="flexA">
                <u-rate activeIcon="heart-fill" inactiveIcon="heart" :count="count" v-model="value"></u-rate>
                <view class="numText">{{ item.id }}</view>
              </view>
            </view>
          </view>
        </custom-waterfalls-flow>
      </view>
    </template>

    <!-- <view @click="toListHandler">跳转列表搜索</view> -->
  </view>
</template>

<script>
import { getList } from '@/api'
export default {
  data() {
    return {
      list1: [
        {
          name: '美容美发',
        },
        {
          name: '长发造型',
        },
        {
          name: '好物分享',
        },
        {
          name: '吹风机',
        },
        {
          name: '好物评测',
        },
      ],
      list: [],
      // 未选择样式
      inactiveStyle: {
        color: 'rgba(0,0,0,0.4)',
        fontSize: '27rpx',
      },
      // 选择样式
      activeStyle: {
        color: 'rgba(50, 50, 51, 1)',
        fontSize: '27rpx',
        fontWeight: '700',
      },
      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: [],
      curPage: 1,
      count: 1,
      value: 1,
    }
  },
  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
    //     setTimeout(() => {
    //       this.searchList1 = data.data
    //     this.searchList1.forEach((item, index) => {
    //       item.image = JSON.parse(data.data[index].file).imgList[0]
    //     })
    //     },600)
    //   }
    // },
    async getList(val) {
      const { data } = await getList({
        type_id: '', //	integer	否	论坛类型
        keywords: val || '', //	string	否	关键词
        order: 1, //	string	是	排序，1:评论，0:时间
        page: this.curPage, //	integer	是	页码
        rows: 13, //	integer	是	条数
      })
      console.log(data)
      if (data.data.length == 0) {
        this.searchState = 0
      } else {
        this.searchState = 1
        setTimeout(() => {
          this.last_page = data.last_page
          // this.list = this.list.concat(data.data)
          this.searchList1 = data.data
          this.searchList1.forEach((item, index) => {
            item.image = JSON.parse(data.data[index].file).imgList[0]
          })
        }, 300)
      }
    },
    // 确定清空历史搜索记录
    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.searchValue = 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)
    },
    toDetailHandler(e){
      // console.log(JSON.stringify(e.user))
      uni.navigateTo({ url: `/pages/index/detail?itemId=${e.id}&userInfo=${JSON.stringify(e.user)}` })
    },
    toListHandler() {
      uni.navigateTo({ url: '/pages/index/list' })
    },
  },
}
</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;
    }
  }
}

.title {
  color: rgba(0, 0, 0, 0.9);
  font-size: 28rpx;
  margin: 16rpx 0;
}
.headerBox {
  color: rgba(0, 0, 0, 0.6);
  font-size: 24rpx;
  image {
    width: 48rpx;
    height: 48rpx;
    border-radius: 50%;
    margin-right: 8rpx;
  }
}
.item {
  padding: 0 16rpx 16rpx;
  box-sizing: border-box;
}
.numText {
  color: rgba(0, 0, 0, 0.4);
  font-size: 24rpx;
  margin-left: 8rpx;
}
</style>