<template>
  <!-- 搜索界面 -->
  <view class="">
    <u-navbar
      :is-back="true"
      :background="{ backgroundColor: '#F5F5F5' }"
      title=""
    >
      <view class="slot-wrap">
        <view class="search-wrap">
          <u-search
            @search="searchCli"
            bg-color="#fff"
            border-color="#d5aa7a"
            placeholder="请输入"
            :show-action="false"
            v-model="value"
          ></u-search>
        </view>
      </view>
    </u-navbar>
    <search-item :isbrowse="true" :list="list" @update="update"> </search-item>
    <view v-if="loadText" class="loadStyle">没有可用的数据了</view>
  </view>
</template>

<script>
import searchItem from "./components/searchItem.vue";
export default {
  components: { searchItem },
  data() {
    return {
      value: "",
      list: [],
      total: 0, //总页数
      current: 1,
      size: 5,
      //显示加载完毕后的文字
      loadText: false,
    };
  },
  methods: {
    //更新
    update() {
      this.searchFn(1, 10, this.value);
    },
    // 搜索按钮
    searchCli() {
      this.searchFn(1, 10, this.value);
    },
    //搜索接口
    searchFn(current, size, value) {
      let param = {
        current: current,
        size: size,
        styleTag: value,
      };
      this.$http("mobileBrand.selectAllStylePage", param).then((res) => {
        let { code, data } = res;
        if (code === 200) {
          if (current == 1) {
            this.list = data.records;
          } else {
            this.list.push(...data.records);
            console.log(this.list);
          }
          this.total = data.total;
        }
      });
    },
  },
  //上拉加载
  onReachBottom() {
    //判断当前页是否到达总页数
    if (this.current >= this.total) {
      this.loadText = true;
    } else {
      this.current++;
      this.searchFn(this.current, this.size);
    }
  },
};
</script>
<style lang="scss" scoped>
.slot-wrap {
  display: flex;
  align-items: center;
  flex: 1;
}
.search-wrap {
  margin: 0 20rpx;
  flex: 1;
}
// 上拉加载
.loadStyle {
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
}
</style>
