<template>
  <div class="fullPage">
    <div class="bg">
      <!-- 顶部导航 -->
      <GeneralHeader
        :showLanguageList="true"
        :title="t('my_linked_recharge_agent')"
        color="black"
        style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
      />

      <!-- 主要内容 -->
      <div
        style="
          padding: 12px;

          display: flex;
          flex-direction: column;
          gap: 12px;
        "
      >
        <!-- 这个月总充值 -->
        <div
          style="
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

            padding: 12px;
            border: 1px solid #e5e7eb;
          "
        >
          <div style="font: 0.8em; font-weight: 500; color: rgba(0, 0, 0, 0.4)">
            {{ t('my_total_income') }}
          </div>
          <div style="font: 0.9em; font-weight: 600; color: rgba(0, 0, 0, 0.8)">
            ${{ totalRechargeDetail?.totalIncome || 0 }}
          </div>
          <div style="font: 0.8em; font-weight: 500; color: rgba(0, 0, 0, 0.4)">
            {{ t('this_period_recharge') }}
          </div>
          <div style="font: 0.9em; font-weight: 600; color: rgba(0, 0, 0, 0.8)">
            ${{ totalRechargeDetail?.currentMonthRecharge || 0 }}
          </div>
        </div>

        <div style="font-weight: 700">{{ t('recharge_agency_list') }}</div>

        <div
          v-for="(agency, aIndex) in agencyList"
          :key="aIndex"
          style="
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

            padding: 12px;
            border: 1px solid #e5e7eb;

            margin-bottom: 10px;
            transition: all 0.3s ease-out;
          "
          @click="showAgencyInfo(aIndex)"
        >
          <div style="width: 100%; display: flex; justify-content: space-between">
            <!-- 基本信息 -->
            <div
              style="
                flex: 1;
                min-width: 0;
                align-self: stretch;

                display: flex;
                align-items: center;

                gap: 4px;
              "
            >
              <img
                :src="agency.userAvatar"
                alt=""
                style="display: block; object-fit: cover; width: 3em; border-radius: 50%"
              />
              <div
                style="
                  flex: 1;
                  min-width: 0;

                  display: flex;
                  flex-direction: column;
                  justify-content: space-around;
                  gap: 4px;
                "
              >
                <div
                  style="
                    font-weight: 700;

                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  "
                >
                  {{ agency.userNickname }}
                </div>
                <div style="font-weight: 700; color: rgba(0, 0, 0, 0.4)">
                  {{ t('user_id_prefix') }}{{ agency.account }}
                </div>
              </div>
            </div>

            <!-- 展开按钮 -->
            <div
              style="
                width: auto;
                min-width: 0;
                align-self: stretch;

                display: flex;
                align-items: center;
              "
            >
              <img
                src="../../assets/icon/arrow.png"
                alt=""
                style="
                  width: 24px;
                  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
                "
                :class="{ rotated: aIndex == selectedAgencyIndex }"
              />
            </div>
          </div>

          <!-- 展示信息 -->
          <transition name="info-fade">
            <div style="display: flex" v-show="aIndex == selectedAgencyIndex">
              <div style="flex: 1">
                <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">
                  {{ t('this_month') }}:
                </div>
                <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
                  ${{ formatPrice(agency.thisMonth) || 0 }}
                </div>
              </div>
              <div style="flex: 1">
                <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">
                  {{ t('last_month') }}:
                </div>
                <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
                  ${{ formatPrice(agency.lastMonth) || 0 }}
                </div>
              </div>
            </div>
          </transition>
        </div>
        <!-- 触发加载功能 -->
        <div ref="Agloadmore" v-if="showAgLoading"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useThrottle } from '@/utils/useDebounce'

import { getAgencyList, getAgencyTotalRecharge } from '@/api/userInfo'

import GeneralHeader from '@/components/GeneralHeader.vue'

const router = useRouter()
const { t, locale } = useI18n()

const selectedAgencyIndex = ref(-1) //选中的agency用户下标
const showAgencyInfo = (index) => {
  selectedAgencyIndex.value = selectedAgencyIndex.value != index ? index : -1
} //选中的agency用户

const send = async () => {
  router.push({ path: '/item-distribution' })
}

const totalRechargeDetail = ref({}) //代理消费金额
const agencyList = ref([]) // 代理列表
const agencyCurrent = ref(1) //代理列表第几页
const showAgLoading = ref(true) //触底加载功能

onMounted(async () => {
  getAgencise() // 获取代理列表
  getAgencyMonthsRecharge() //获取代理总支付

  // 开始监听底部元素
  if (Agloadmore.value) {
    observer.observe(Agloadmore.value)
  }
})

// 获取代理列表
const getAgencyMonthsRecharge = async () => {
  const resTotalRecharge = await getAgencyTotalRecharge()
  console.log('resTotalRecharge:', resTotalRecharge)
  if (resTotalRecharge.status && resTotalRecharge.body) {
    totalRechargeDetail.value = resTotalRecharge.body
  }
}

// 获取代理列表
const getAgencise = async () => {
  let data = {
    cursor: agencyCurrent.value,
    limit: 20,
  }
  const resagencyList = await getAgencyList(data)
  console.log('resagencyList:', resagencyList)
  if (resagencyList.status && resagencyList.body) {
    agencyList.value.push(...resagencyList.body.records)
    if (resagencyList.body.total <= resagencyList.body.current * resagencyList.body.size) {
      showAgLoading.value = false
    }
  }
}

const Agloadmore = ref(null)

const debouceGetAgList = useThrottle(getAgencise, 1000)

// IntersectionObserver配置
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.intersectionRatio > 0) {
      console.log('监控')
      if (entry.target == Agloadmore.value && agencyList.value.length != 0) {
        agencyCurrent.value++
        debouceGetAgList()
      }
    }
  })
})

const formatPrice = (value) => {
  if (value && value != 0) {
    return Number(value).toFixed(2)
  }
  return 0
}
</script>

<style scoped>
* {
  color: black;
}

.fullPage {
  background-color: #ffffff;
  min-height: 100vh;
  position: relative;
}

.bg {
  width: 100vw;
  min-height: 100vh;
  background-image: url(../../assets/images/secondBg.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.tabName {
  color: #00000066;
}

.tabName-active {
  color: black;
  font-weight: 500;
}

.info-fade-enter-from,
.info-fade-leave-to {
  transform: translateY(-10px);
  opacity: 0;
}

.info-fade-enter-active {
  transition: all 0.5s ease-out;
}

.info-fade-leave-active {
  transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
}

.rotated {
  transform: rotate(90deg);
}

@media screen and (max-width: 360px) {
  * {
    font-size: 10px;
  }
}

@media screen and (min-width: 360px) {
  * {
    font-size: 12px;
  }
}

@media screen and (min-width: 768px) {
  * {
    font-size: 24px;
  }
}

@media screen and (min-width: 1024px) {
  * {
    font-size: 32px;
  }
}
</style>
