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

      <!-- 粘性tabs -->
      <u-tabs
        :list="list1"
        keyName="type_name"
        :lineWidth="40"
        lineColor="#6E16FF"
        :inactiveStyle="inactiveStyle"
        :activeStyle="activeStyle"
        @click="toggleTabsHandler"
      >
        <view slot="right" style="padding-left: 4px" @tap="rightCate = true">
          <view class="rightBox">
            <!-- <u-icon name="list" size="21" bold></u-icon> -->
            <image style="width: 32rpx; height: 32rpx; margin-right: 18rpx" src="/static/toggle.png" mode="scaleToFill" />
          </view>
        </view>
      </u-tabs>
    </u-sticky>
    <view class="xia" v-if="rightCate">
      <view class="flexC" @click="sortHandler(0)">时间排序</view>
      <view class="flexC" @click="sortHandler(1)">热度排序</view>
    </view>

    <!-- 列表版心 -->
    <template v-if="list2.length">
      <view class="mainBox">
        <custom-waterfalls-flow :value="list2" :seat="2" @imageClick="toDetailHandler">
          <view class="item" v-for="(item, index) in list2" :key="item.id" 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-icon name="heart"></u-icon>
                <!-- <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>

    <template v-if="searchState == 0">
      <view style="margin-top: 300rpx">
        <u-empty />
      </view>
    </template>
    
    <!-- 添加按钮 -->
    <view class="incrBox flexC" @click="toIncrItemHandler">
      <image
        src="/static/add.png"
        mode="scaleToFill"
      />
    </view>
  </view>
</template>

<script>
import { getList, getTabsCate } from '@/api'
export default {
  data() {
    return {
      rightCate: false,
      list1: [],
      list2: [],
      // 未选择样式
      inactiveStyle: {
        color: 'rgba(0,0,0,0.4)',
        fontSize: '27rpx',
      },
      // 选择样式
      activeStyle: {
        color: 'rgba(50, 50, 51, 1)',
        fontSize: '27rpx',
        fontWeight: '700',
      },
      count: 1,
      value: 1,
      searchState: 1,
      //
      searchValue: '',
      searchList1: [],
      curPage: 1,
      last_page: 1,
      // 排序类型
      order: 1,
      // 商品列表 id
      goodlistId: 1,
    }
  },
  async created() {
    const { data } = await getTabsCate({
      page: 1,
      rows: 20,
    })
    this.list1 = data.data
    // this.list1.forEach((item,index) => item.name = data.data[index].type_name)
    
    console.log(
      JSON.parse(
        '{"video":"","imgList":["https:\\/\\/image.hairshop.vip\\/uploads\\/20220616\\/5998d3e20a0035e7874c4ae953659675.jpg"],"cover":"https:\\/\\/image.hairshop.vip\\/uploads\\/20220616\\/5998d3e20a0035e7874c4ae953659675.jpg"}'
      )
    )
  },
  onLoad(){
    this.getList()
  },
  onReachBottom() {
    console.log('到底了')
    if (this.curPage === this.last_page) {
      uni.showToast({
        title: '没有更多数据了~',
        icon: 'none',
        mask: true,
      })
    } else {
      this.curPage = this.curPage + 1
      this.getList()
    }
  },
  methods: {
    async getList(val) {
      
      const { data } = await getList({
        type_id: this.goodlistId, //	integer	否	论坛类型
        keywords: val || '', //	string	否	关键词
        order: this.order, //	string	是	排序，1:评论，0:时间
        page: this.curPage, //	integer	是	页码
        rows: 6, //	integer	是	条数
      })
      console.log(data)
      if (data.data.length == 0) {
        this.searchState = 0
      } else {
        this.searchState = 1
          this.last_page = data.last_page
          data.data.forEach(it=> it.image = JSON.parse(it.file).cover )
          this.list2 = this.list2.concat(data.data)
          // this.list2 = data.data
          // this.list2.forEach((item, index) => {
          //   item.image = JSON.parse(data.data[index].file).imgList[0]
          // })
          
      }
    },

    // 筛选排序
    sortHandler(type) {
      this.list2 = []
      this.rightCate = !this.rightCate
      this.order = type
      this.getList()
    },

    // 切换tabs
    toggleTabsHandler(e) {
      this.list2 = []
      this.curPage = 1
      this.goodlistId = e.id
      this.getList()
    },

    // 跳转详情
    toDetailHandler(e){
      // console.log(JSON.stringify(e.user))
      uni.navigateTo({ url: `/pages/index/detail?itemId=${e.id}&userInfo=${JSON.stringify(e.user)}` })
    },
    toIncrItemHandler(){
      uni.navigateTo({ url: '/pages/index/addItem' })
    }
  },
}
</script>

<style lang="scss">
.topSearchBox {
  margin-right: 218rpx;
  z-index: 999;
}
page {
  background: #f7f8fa;
}
.u-search__content {
  min-width: 426rpx !important;
}
.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;
}
.mainBox {
  width: 100%;
  height: 100%;
  padding: 16rpx;
  box-sizing: border-box;
}
.rightBox {
  position: relative;
}
.xia {
  width: 256rpx;
  height: 188rpx;
  padding: 24rpx 32rpx;
  box-sizing: border-box;
  border-radius: 20rpx;
  /* flex-direction: column; */
  background: #fff;
  position: fixed;
  top: 17vh;
  right: 14rpx;
  view {
    color: rgba(50, 50, 51, 1);
    font-size: 28rpx;
  }
  :nth-child(1) {
    padding-bottom: 22rpx;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
  }
  :nth-child(2) {
    padding-top: 22rpx;
  }
}
.incrBox{
  position: fixed;
  bottom: 120rpx;
  right: 24rpx;
  width: 120rpx;
height: 120rpx;
border-radius: 50%;
opacity: 1;
background: linear-gradient(90deg, rgba(140,72,255,1) 0%, rgba(123,43,255,1) 100%);
box-shadow: 0 4rpx 24rpx 0 rgba(107,36,224,0.4);
image{
  width: 64rpx;
height: 64rpx;
}
}
</style>