<template>
    <div>
          <div>
            <el-button type="primary"  @click="handleBtnGetJoke">請(qǐng)求數(shù)據(jù)</el-button>
            <el-button type="danger" @click="handleBtnClearData" v-if="aDatas.length > 0?true:false">清空數(shù)據(jù)</el-button>
          </div>  
          <div>
            <ul v-if="aDatas.length > 0?true:false">
                <li class="joke-list" v-for="item in aDatas"
                                    :key="item.hashId">{{ item.content }}
                </li>
                <div class="loading" v-if="aDatas.length > 0?true:false"> 
                    <el-button size="mini"  type="primary" @click="handleBtnLoading" >加載</el-button>
                </div>
            </ul> 
          </div>
    </div>
</template>

<script setup>
import axios from "axios";
import { ref,onMounted,onUnmounted  } from "vue";

let aDatas = ref([]);
let page = ref(1);
let pagesize = ref(20);

onMounted(() => {
    // 獲取數(shù)據(jù)
    handleBtnGetJoke();
    window.addEventListener('scroll', debounce(handleScroll,500));
})

onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll);
})

// 事件處理函數(shù)
function handleScroll() {
    // 變量scrollTop是滾動(dòng)條滾動(dòng)時(shí)，距離頂部的距離
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    // 變量scrollHeight是滾動(dòng)條的總高度
    const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
     // 變量clientHeight是滾動(dòng)條可視區(qū)域的高度
    const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
     // 當(dāng)滾動(dòng)條到達(dá)底部，并且距離底部小于10px時(shí)，加載數(shù)據(jù)   
    if (scrollTop + clientHeight - scrollHeight <= 10) {
        page.value++;
        handleBtnGetJoke();
    }
}

// 函數(shù)的防抖
function  debounce(method, duration) {
         var timer = null;
         return function(){
            var that = this,
                args = arguments;
            // 在本次調(diào)用之間的一個(gè)間隔時(shí)間內(nèi)若有方法在執(zhí)行,則終止該方法的執(zhí)行
            if(timer) {
              clearTimeout(timer);
            }
            // 開(kāi)始執(zhí)行本次調(diào)用
            timer = setTimeout(function(){
              method.apply(that,args);
            }, duration)
          }

  }


async function handleBtnGetJoke() {
    const params = {
        key: 'aa1b7ad08be2a09a4e0d2d46897e2dc8',
        page: page.value,
        pagesize:pagesize.value,
        time: 1418816972
    }

    const response =  await axios.get('/api/joke/content/text.php',{params})
    console.log(response);
    if(response.status == 200) {
        const { data } = response.data.result;
        console.log(data);
        aDatas.value = aDatas.value.concat(data);
        if(page.value*pagesize.value >= data.length) {
            alert("沒(méi)有更多數(shù)據(jù)了")
        }

    }
}

// 加載數(shù)據(jù),疊加
function handleBtnLoading() {
    page.value++;
    handleBtnGetJoke(); 
}

// 清空數(shù)據(jù)
function handleBtnClearData() {
    aDatas.value = [];
}


</script>

<style scoped>
.joke-list {
    list-style-type: decimal;
    list-style-position: outside;
    padding: 5px 0;
    border-bottom: dashed 1px #ccc;
}

.loading {
    margin: 0 auto;
    text-align:center;
}
</style>

// 函數(shù)的防抖
function  debounce(method, duration) {
         var timer = null;
         return function(){
            var that = this,
                args = arguments;
            // 在本次調(diào)用之間的一個(gè)間隔時(shí)間內(nèi)若有方法在執(zhí)行,則終止該方法的執(zhí)行
            if(timer) {
              clearTimeout(timer);
            }
            // 開(kāi)始執(zhí)行本次調(diào)用
            timer = setTimeout(function(){
              method.apply(that,args);
            }, duration)
          }

  }

if(page.value*pagesize.value >= data.length) {
            alert("沒(méi)有更多數(shù)據(jù)了")
}