<template>
  <div class="trading">
    <div class="content-left">
      <OverView :overviewValue="overviewValue" @clickOverviewChild="overviewChild" />
      <StatusRadio :statusValue="statusValue" @clickStatusChild="statusChild" />
    </div>
    <div class="content-right">
      <div class="content-right-content">
        <div class="pages-horizontal">
          <Card :nftData="nftList" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, toRaw, watch } from "vue";
import OverView from "@/components/common/searchView/Overview.vue";
import StatusRadio from "@/components/common/searchView/statusRadio.vue";
import Card from "@/components/common/tradingCard.vue";
import { apiHistoryState, nftDetail } from "@/utils/marketplace"
import {walletStore} from "@/store/wallet";
import {useMarketplaceStore} from "@/store/marketplace";
import { parseTradeEvent } from "@/components/chain/utils"
const localWalletStore = walletStore()
const nftList = ref([])
const overviewValue = ref()
const statusValue = ref('0')

const cursorObj = ref()

const overviewChild = (val) => {
  overviewValue.value = val
  getHistoryList()
}

const statusChild = (val) => {
  statusValue.value = val
  nftList.value = []
  getHistoryList()
}

const next_cursor = ref({
  type: 0,
  page_size: '20',
  cursor: '',
  search_name: '',
  total_count: 0,
})
const getHistoryList = async () => {
  const myADdress = localWalletStore.address
  const data = {
    type: statusValue.value,
    page_size: '20',
    cursor: next_cursor.value.next_cursor,
    search_name: overviewValue.value,
  }
  if(myADdress) {
    let nftListBox
    let res = await apiHistoryState(myADdress,data)
    next_cursor.value = res.page
    nftList.value = [...nftList.value, ...res.rows]
    nftListBox = nftList.value.reduce((acc, obj) => {
        const existingObj = acc.find(item => item.nft.token_id == obj.nft.token_id)
        if(!existingObj) {
          acc.push(obj)
        }
        return acc
      },[])
    for (let sub of nftListBox) {
      if (sub.event?.data) {
        const _data = parseTradeEvent(sub.event)
        sub.event.icon = _data.icon
        sub.event.usd = _data.usd
        sub.event.currencyName = _data.currencyName
        sub.event.amount = _data.amount
        sub.event.decimals = _data.decimals
      }
    }
    console.log(nftListBox)
    nftList.value = nftListBox
  }
}

const handleScrollTrad = () => {
  var scrollTop =
  document.documentElement.scrollTop || document.body.scrollTop; //变量windowHeight是可视区的高度
  var windowHeight =
  document.documentElement.clientHeight || document.body.clientHeight; //变量scrollHeight是滚动条的总高度
  var scrollHeight =
  document.documentElement.scrollHeight || document.body.scrollHeight;
  if (scrollTop + windowHeight == scrollHeight) {
    //请求数据接口
    // this.seeMoreSchoolList();
    // console.log('scrollTop + windowHeight == scrollHeight请求接口',toRaw(marketplaceStore.cursorObj), scrollTop, windowHeight, scrollHeight)
    if(next_cursor.value.remaining != 0) {
      getHistoryList()
    }
    return false;
  }
}

watch(localWalletStore,() => {
  if(!localWalletStore.token) {
    nftList.value = []
  } else {
    getHistoryList()
  }
})

onMounted(() => {
  getHistoryList()
  window.addEventListener("scroll", handleScrollTrad, true);
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScrollTrad)
})
</script>

<style lang="scss" scoped>
.trading {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .content-left {
    width: 300px;
    height: 480px;
    padding: 0 35px;
    position: sticky;
    top: 140px;
  }
  .content-right {
    width: calc(100% - 300px);
    padding-right: 40px;
    .content-right-content {
      width: 1488px;
      margin-top: 30px;
      .pages-vertical {
        color: #fff;
      }
    }
  }
}
</style>