<template>
  <view class="Mall4j page-my-users">
    <view class="total-number">
      <view class="number">
        {{ totalInvite }}
      </view>
      <view class="text">
        {{ $t('distribution.totalPromotionUsers') }}
      </view>
    </view>

    <view class="user-box">
      <block v-if="totalInvite>0">
        <view class="title flex-sb">
          <view>{{ $t('distribution.userInformation') }}</view>
          <view>{{ $t('distribution.cumulativeIncomeRMB') }}</view>
        </view>

        <!-- 好友列表 -->
        <block
          v-for="(item, index) in records"
          :key="index"
        >
          <view
            class="flex-al-cen user-item"
            :class="{'item-bg': index%2 === 0}"
          >
            <view class="img">
              <image
                :src="item.pic ? util.addDomain(item.pic) : '/static/images/head-sculpture.png'"
                :data-inx="index"
                @error="imageError"
              />
            </view>
            <view class="user-info flex-sb">
              <view class="info-left">
                <view class="flex-al-cen">
                  <view
                    v-if="index < 3"
                    class="no"
                    :class="'no'+(index+1)+'-bg'"
                  >
                    NO.{{ index+1 }}
                  </view>
                  <view class="text-nowrap">
                    {{ item.nickName }}
                  </view>
                </view>
                <view class="join-time text-nowrap">
                  <text>{{ $t('distribution.accumulatedOrders') }}</text>
                  <text>{{ item.orderNumber }}</text>
                </view>
              </view>
              <view class="user-profit">
                {{ moneyFomat(item.money) }}
              </view>
            </view>
          </view>
        </block>
      </block>
    </view>

    <!-- 空列表或加载全部提示 -->
    <empty-all-tips
      v-if="isLoaded"
      :is-empty="!records.length"
      :empty-tips="$t('distribution.notDistributionUsers')"
    />
  </view>
</template>

<script setup>
import util from '@/utils/util.js'

onLoad(() => {
  loadPageData()
})

const moneyFomat = (money) => {
  money = money || 0
  return (+util.accuracyCount(money, 100, 3)).toFixed(2)
}
/**
 * 图片出错处理事件，使其显示默认图
 */
const imageError = (e) => {
  const { inx } = e.target.dataset
  records.value[inx].pic = null
}

// 加载用户数据
const records = ref([])
const totalInvite = ref(0)
const isLoaded = ref(false) // 列表是否加载完毕
const loadPageData = () => {
  isLoaded.value = false
  http.request({
    url: '/tmerclub_marketing/distribution_user_bind/bind_user_list',
    method: 'GET',
    data: {
      userType: 1
    }
  }).then(res => {
    isLoaded.value = true
    records.value = res
    totalInvite.value = res.length
  })
}

</script>

<style lang="scss" scoped>
@use "./my-users.scss";
</style>
