<template>
  <!-- 浏览记录
  isbrowse传给子组件判断是否需要爱心  默认false 
  editor 出现checkout的bool  默认false
  list传过去的数据  Array
  options 右边滑动出现删除的东西  Array
  -->
  <view>
    <browse-item :isbrowse="true" :list="browseList" @update="update">
      <!-- 头部插槽 -->
      <template v-slot:default="slots">
        <u-icon name="clock" class="browseicon"></u-icon>
        <text class="browseTime">{{ slots.title.viewTime }}</text>
      </template>
    </browse-item>

    <view v-if="loadText" class="loadStyle">没有可用的数据了</view>
  </view>
</template>

<script>
import browseItem from "./components/browseItem.vue";
export default {
  components: { browseItem },
  data() {
    return {
      list: [],
      total: 0, //总页数
      current: 1,
      size: 10,
      loadText: false,
    };
  },
  computed: {
    browseList() {
      let dataInfo = {};
      this.list.forEach((item, index) => {
        let { viewTime } = item;
        if (!dataInfo[viewTime]) {
          dataInfo[viewTime] = {
            viewTime,
            browseChild: [],
          };
        }
        dataInfo[viewTime].browseChild.push(item);
      });
      return Object.values(dataInfo);
    },
  },
  methods: {
    //更新
    update() {
      this.browseFn(1, 10);
    },
    // 浏览记录接口
    browseFn(current, size) {
      let param = {
        current: current,
        size: size,
      };
      this.$http("mobileBrand.historyViewPage", param).then((res) => {
        let { code, data } = res;
        if (code === 200) {
          this.list = data.records;
        }
        if (code === 200) {
          if (current == 1) {
            this.list = data.records;
          } else {
            this.list.push(...data.records);
          }
          this.total = data.hotStylePage.total;
        }
      });
    },
  },
  mounted() {
    this.browseFn(1, 10);
  },
  //上拉加载
  onReachBottom() {
    console.log("触发了");
    //判断当前页是否到达总页数
    if (this.current >= this.total) {
      this.loadText = true;
    } else {
      this.current++;
      (this.size = 5), this.browseFn(this.current, this.size);
    }
  },
};
</script>

<style lang="scss" scoped>
// 上拉加载
.loadStyle {
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
}
//组件头部时间图标
.browseicon {
  width: 32rpx;
  width: 32rpx;
  height: 32rpx;
  font-size: 32rpx;
  color: red;
}
//组件头部时间
.browseTime {
  width: 252rpx;
  height: 32rpx;
  font-size: 32rpx;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  margin-left: 10rpx;
}
</style>
