<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>