
<template>
  <div style="margin-top:10px;padding: 10px;" v-if="list.length > 0" >
    <el-table :data="list" :stripe="true" :show-overflow-tooltip="true">
      <el-table-column label="来源" align="center" prop="consumptionStatusName" />

      
      <el-table-column label="变动额度" align="center" prop="consumptionPoints">
        <template #default="scope">
          {{ scope.row.consumptionPoints>0 ?  "+" + pointsToPoint(scope.row.consumptionPoints || 0) : pointsToPoint(scope.row.consumptionPoints || 0)}}
        </template>
      </el-table-column>

      <el-table-column label="消费分余额" align="center" prop="afterConsumptionPoints">
        <template #default="scope">
          {{ pointsToPoint(scope.row.afterConsumptionPoints || 0) }}
        </template>
      </el-table-column>
      
      <el-table-column label="时间" align="center" prop="createTime" width="180">
        <template #default="scope">
          {{ formatDate(scope.row.createTime,"YYYY-MM-DD HH:mm") }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="来源" align="center" prop="" /> -->
      
    </el-table>
    <!-- 分页 -->
    <Pagination
:total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
      @pagination="getUserInfo" />
  </div>
  <div style="text-align: center;margin-top: 50px;font-size: 14px;" v-else>
    暂无消费分记录
  </div>
</template>

<script setup>
  import { formatDate } from '@/utils/formatTime'
  import { pointsToPoint } from '@/utils'
  import * as UserApi from '@/api/member/user'


  // 列表的总页数
  const total = ref(0)
  const props = defineProps({
    userId: {
      type: Number,
      default: 0
    },
  });
  const list = ref([])
  const queryParams = reactive({
    pageNo: 1,
    pageSize: 10,
    userId:undefined
  })
  const getUserInfo = async () => {
    const res = await UserApi.getUserConsumption(queryParams);
    list.value = res.list
    total.value = res.total
  };
  onMounted(() => {
    // props.userId
    queryParams.userId = props.userId;
    getUserInfo();
  });

  

</script>