<template>

  <div class="receivable">

    <div class="application-header flex-betweenCenter" @click="goBack">

      <img

        class="prod-header-navImg"

        src="../../assets/images/icon_back.png"

        alt=""

      />

      <div class="font18 hy_color weightBold">登录日志</div>

      <div></div>

    </div>

    <div class="receivable-main">

        <li class="log-ul-li" v-for="item in list" :key="item.id">

          <div>

            <div>{{ item.type }}</div>

            <div class="log-color">{{ item.create_time }}</div>

          </div>

          <div>{{ item.operate }}</div>

        </li>

        <div class="bottom-tishi">{{loadingText}}</div>

      </ul>

      <div v-if="is_number == 2">

        <div class="emptaype-box">

          <img src="../../assets/images/empty_order.png" alt="" />

          <p>暂无数据哦！~</p>

        </div>

      </div>

    </div>

    <div class="receivable-footer"></div>

  </div>

</template>

<script>

import { storage } from "@/utils/storage";

export default {

  name: "Receivable",

  data() {

    return {

      is_number: 1，

      p: 1,

      list: [],

      timer: null,

      loadingText:'',

      clientHeight: null

    };

  },

  created() {this._getUserLoginLog();

    this.clientHeight = +document.documentElement.clientHeight -60

  },

  methods: {

    goBack() {

      this.$router.go(-1);

    },

    _getUserLoginLog() {

      let data = {

        token: this.token,

        p: 1,

      };

      this.$api.getUserLoginLog(data).then((res) => {

        if (res.data.length > 0) {

          this.list = res.data;

          this.is_number = 1;

          this.p++

        } else {

          this.is_number = 2;

        }

      });

    },

    handleScroll(e) {

      //这里使用个延时加载，不然滑动屏幕的时候会不断触发方法，去计算高度，浪费性能

      let that = this

        clearTimeout(this.timer)

        that.timer = setTimeout(function () {

          let clientHeight = e.target.clientHeight;

          let scrollTop = e.target.scrollTop;

          let scrollHeight = e.target.scrollHeight;

          console.log(clientHeight,scrollTop,scrollHeight)

          if (clientHeight + scrollTop >= scrollHeight - 10) {

             that.getUserLoginLogMeuns()

          }

        }, 500);

    },

    getUserLoginLogMeuns() {

      this.loadingText = '加载更多'

      let data = {

        token: this.token,

        p: this.p,

      };

      this.loadingText = '加载中...'

      this.$api.getUserLoginLog(data).then((res) => {

        if (res.data.length > 0) {

          this.list = this.list.concat(res.data)

           this.is_number = 1

        } else if(res.data.length==0){

            this.loadingText = '没有更多了'

        }

        this.p++

      });

    },

  },

};

</script>