<template>
  <view>
    <view v-if="data.length > 0">
      <view
        class="card-list"
        v-for="(item, index) in (data as any[])"
        :key="index"
      >
        <view class="left">
          <image :src="item.avatarUrl" />
          <view class="text">
            <view>{{ item.nickName }}</view>
            <view>{{ item.phone }}</view>
          </view>
        </view>
        <view class="right"></view>
      </view>
      <nut-pagination
        v-model="page.PageNum"
        :total-items="page.ItemCount"
        :items-per-page="page.PageSize"
        @change="pageChange"
      />
    </view>
    <view v-else>
      <nut-empty description="暂无明细"></nut-empty>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useLoad, showToast } from "@tarojs/taro";
import { getTGUserList } from "../../../../api/user";

useLoad(() => {
  getData();
});

const data = ref([]);

const page = ref({ PageNum: 1, PageSize: 10, ItemCount: 0 });

const pageChange = (e: number) => {
  page.value.PageNum = e;
  getData();
};

const getData = async () => {
  try {
    const res = await getTGUserList({
      PageNum: page.value.PageNum,
      PageSize: page.value.PageSize,
    });
    data.value = res.data.data || [];
    page.value.ItemCount = res.data.count;
  } catch (error) {
    showToast({ title: error.msg, icon: "none" });
  }
};
</script>

<style lang="scss">
.nut-pagination {
  position: absolute;
  margin-top: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.card-list {
  width: 700px;
  background-color: #fff;
  margin: 10px auto;
  border-radius: 10px;
  padding: 20px;

  .left {
    display: flex;
    align-items: center;
    image {
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }

    .text {
      margin-left: 20px;
    }
  }
}
</style>
