<script lang="ts" setup>
import { thumbnailImg } from "@/utils/utils";
import { conversionMobile } from "@/utils";
import {appUserUserInviteInviteListPost} from "@/service";

const { t } = useI18n();

const { paging, dataList, queryList, loading } = usePage<any>(
  (pageNum: number, pageSize: number) =>
      appUserUserInviteInviteListPost({
        params: {
          pageNum,
          pageSize,
        }
      })
);

function navigateTo(url: string) {
  uni.navigateTo({
    url,
  });
}
function handleClickLeft() {
  uni.navigateBack()
}
</script>

<template>
  <view>
    <z-paging ref="paging" v-model="dataList" @query="queryList">
      <template #top>
        <wd-navbar
            safeAreaInsetTop
            :fixed="true"
            :placeholder="true"
            :bordered="false"
            custom-class="!bg-transparent"
            @click-left="handleClickLeft"
        >
          <template #left>
            <view class="shrink-0">
              <view class="i-carbon:chevron-left text-50rpx text-#3D3D3D ml-[-10rpx]"></view>
            </view>
          </template>
          <template #title>
            <view class="invite-navbar-title-wrap">
              <text class="invite-navbar-title">{{ t('pages.mine.the-person-invited') }}</text>
              <text class="invite-navbar-count">({{ dataList.length }})</text>
            </view>
          </template>
        </wd-navbar>
      </template>
      <view class="px-18rpx">
        <view
          class="animate-in fade-in animate-ease-in animate-duration-300"
          v-show="!loading"
        >
          <view
            class="py-28rpx px-20rpx bg-#fff rounded-16rpx"
            :class="[index > 0 && 'mt-20rpx']"
            v-for="(item, index) in dataList"
            :key="item.id"
          >
            <view class="flex items-center justify-between">
              <view class="flex items-center shrink-0 mr-30rpx">
                <image
                  class="w-106rpx h-106rpx rounded-full"
                  :src="thumbnailImg(item.avatar)"
                ></image>
              </view>
              <view class="flex-1">
                <view class="text-28rpx text-primary lh-42rpx font-bold"
                  >
                  {{ item?.firstName }} {{ item?.surname }}
                </view>
                <view class="mt-25rpx flex items-center">
                  <!-- <image class="w-28rpx h-28rpx shrink-0 mr-2prx" src="@img-user/1479@2x.png"></image> -->
                  <text class="text-24rpx text-#999 lh-34rpx font-bold">{{
                    conversionMobile(item.phone)
                  }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>

        <view
          class="animate-in fade-in animate-ease-in-out animate-duration-300"
          v-show="loading"
        >
          <view
            class="py-28rpx px-20rpx bg-#fff rounded-16rpx"
            :class="[i > 1 && 'mt-20rpx']"
            v-for="i in 10"
            :key="i"
          >
            <view class="flex items-center justify-between">
              <wd-skeleton
                animation="gradient"
                :row-col="[{ size: '106rpx', type: 'circle' }]"
              />
              <view class="flex-1 ml-30rpx">
                <wd-skeleton
                  animation="gradient"
                  :row-col="[
                    { width: '94rpx', margin: '0px' },
                    { width: '354rpx' },
                  ]"
                />
              </view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<style lang="scss" scoped>
.invite-navbar-title-wrap {
  display: flex;
  align-items: baseline;
  align-items: center;
  align-content: center;
  height: 100%;
  justify-content: center;
  width: 100%;
  padding-left: 8rpx;
  gap: 8rpx;
}

.invite-navbar-title {
  font-size: 34rpx;
  line-height: 42rpx;
  font-weight: 700;
  color: #333;
}

.invite-navbar-count {
  font-size: 28rpx;
  line-height: 34rpx;
  font-weight: 600;
  color: #666;
}
</style>
