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

      <!-- 粘性tabs -->

      <u-tabs
        :list="list1"
        :lineWidth="40"
        lineColor="#6E16FF"
        :inactiveStyle="inactiveStyle"
        :activeStyle="activeStyle"
        :scrollable="false"
      ></u-tabs>
    </u-sticky>

    <!-- 列表版心 -->
    <template v-if="searchState == 1">
      <view class="mainBox">
        <custom-waterfalls-flow :value="list" imageKey="image" :seat="2">
          <view class="item" v-for="(item, index) in list" :key="index" slot="slot{{index}}">
            <view class="title flexC">{{ item.title }}</view>
            <view class="flexJ">
              <view class="flexA headerBox">
                <image src="/static/headImg.jpg" mode="scaleToFill" />
                <view>桥志三</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>

    <template v-if="searchState == 0">
      <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 }}
        {{ item.id }}
        {{ item.content }}
      </view>
    </template> -->
  </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',
      },
      count: 1,
      value: 1,
      searchState: 1,
      //
      searchValue: '',
      searchList1: [],
    }
  },
  created() {
    this.getList()
    console.log(
      JSON.parse(
        '{"video":"","imgList":["https:\\/\\/image.hairshop.vip\\/uploads\\/20220616\\/5998d3e20a0035e7874c4ae953659675.jpg"],"cover":"https:\\/\\/image.hairshop.vip\\/uploads\\/20220616\\/5998d3e20a0035e7874c4ae953659675.jpg"}'
      )
    )
  },
  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.list = data.data
          this.list.forEach((item, index) => {
            item.image = JSON.parse(data.data[index].file).imgList[0]
          })
        }, 600)
      }
    },
  },
}
</script>

<style lang="scss">
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;
}
</style>