<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="85%">
    <!-- 列表 -->
    <ContentWrap style="margin-top: 10px; max-height: 550px; min-height: 550px; padding: 10px">
      <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
        <!-- <el-table-column label="编号" align="center" prop="consumptionErrorLogId" /> -->
        <el-table-column label="用户名" align="center" prop="userName" />
        <el-table-column label="累加消费分总额" align="center" prop="consumptionPointsTotal">
          <template #default="scope">
            <span>{{ pointsToPoint(scope.row.consumptionPointsTotal) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="目前消费分总额" align="center" prop="nowConsumptionPointsTotal">
          <template #default="scope">
            <span>{{ pointsToPoint(scope.row.nowConsumptionPointsTotal) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="可用消费分" align="center" prop="currentConsumptionPointsTotal">
          <template #default="scope">
            <span>{{ pointsToPoint(scope.row.currentConsumptionPointsTotal) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="已用消费分" align="center" prop="usedConsumptionPointsTotal">
          <template #default="scope">
            <span>{{ pointsToPoint(scope.row.usedConsumptionPointsTotal) }}</span>
          </template>
        </el-table-column>

        <el-table-column label="已转让消费分" align="center" prop="transferConsumptionPointsTotal">
          <template #default="scope">
            <span>{{ pointsToPoint(scope.row.transferConsumptionPointsTotal) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="异动消费分差额" align="center" prop="errorConsumptionPointsTotal">
          <template #default="scope">
            <span>{{ pointsToPoint(scope.row.errorConsumptionPointsTotal) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          align="center"
          prop="createTime"
          :formatter="dateFormatter"
          width="180px"
        />
      </el-table>
      <!-- 分页 -->
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </ContentWrap>
    <!-- 分页 -->
  </Dialog>
</template>
<script setup lang="ts">
import { ConsumptionTopUpLogApi, ConsumptionTopUpLogVO } from '@/api/system/distri/consumption'
import { dateFormatter } from '@/utils/formatTime'
import { pointsToPoint } from '@/utils'
import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()
const mobile = computed(() => appStore.getMobile)
/** 分区碰撞 表单 */
defineOptions({ name: 'PartitionCrashForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改

const loading = ref(true) // 列表的加载中
const list = ref([]) // 列表的数据
// 列表的总页数
const total = ref(0)
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  consumptionErrorLogId: 0
})

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await ConsumptionTopUpLogApi.getConsumptionNoticeUser(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}
/** 打开弹窗 */
const open = async (row) => {
  dialogVisible.value = true
  dialogTitle.value = '异动详情'
  queryParams.consumptionErrorLogId = row
  await getList()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>
<style src="@/styles/SearchIndex.css" lang="scss" scoped></style>
