<script setup lang="ts">
import type { MjGridProps } from '#/components/mj/mj-table'

import { coinAccountsService } from '#/api/service/org/coin-accounts'

defineOptions({ name: 'CoinAccounts' })

const props = withDefaults(
  defineProps<{
    modelValue?: boolean
    userId: any
    userName: any
  }>(),
  {
    modelValue: false,
  },
)

const emits = defineEmits(['update:modelValue', 'success'])

// type CoinAccount = {
//   id: any
//   totalCurrency: number
//   type: number
//   typeId: any
//   typeName: string
//   userId: any
// }

const show = computed({
  get() {
    return props.modelValue
  },
  set(newVal) {
    emits('update:modelValue', newVal)
  },
})

// 总乐贝
const totalCurrency = ref(0)

// 表格
const grid = {
  pagerConfig: {
    pageSize: 1000,
    autoHidden: true,
  },
  columns: [
    { type: 'seq' },
    {
      field: 'typeName',
      title: '来源',
    },
    { field: 'currency', title: '乐贝' },
  ],
  beforeLoadData(params: any) {
    params.userId = props.userId
    return params
  },
  afterLoadData(data: any) {
    if (data?.length) {
      totalCurrency.value = data[0].totalCurrency
    }
    return {
      rows: data,
      totalRows: data?.length || 0,
    }
  },
} as MjGridProps
</script>

<template>
  <mj-modal
    v-model="show"
    :options="{
      title: `【${userName}】乐贝余额：${totalCurrency}`,
      width: 800,
      height: 500,
    }"
  >
    <MjTable
      hide-search
      hide-toolbar
      hide-remove
      :grid="grid"
      :service="coinAccountsService"
    />
  </mj-modal>
</template>

<style lang="scss" scoped>
.total-currency {
  display: flex;
  justify-content: center;
}
</style>
