<script setup lang="ts">
import { selfCoinDetailService } from '@/api/service/self-coin-detail'
import type { MjGridProps } from '@/components/mj/mj-table'
import num from '@/utils/num'
import { useRoute } from 'vue-router'

defineOptions({ name: 'SelfCoinDetail' })

const route = useRoute()
const { userId, userName } = route.query
const operation_add = 1
// const operation_sub = 2

const grid = {
  columns: [
    {
      title: '数量',
      slots: {
        default: 'amount',
      },
    },
    {
      title: '余量',
      field: 'balance',
      formatter: 'money',
    },
    {
      field: 'reason',
      title: '说明',
      formatter({ cellValue, row }) {
        if (row.userId !== row.operatorId && row.operatorName) {
          return `[${row.operatorName}]${cellValue}`
        }
        return cellValue
      },
    },
    {
      field: 'bizDate',
      title: '时间',
    },
  ],
  beforeLoadData(params) {
    return {
      userId,
      ...(params || {}),
    }
  },
} as MjGridProps

function getAmountClass(coin: any) {
  if (Number(coin.amount) === 0) {
    return 'progress-0'
  }
  if (coin.operation === operation_add) {
    return 'progress-100'
  }
  return 'progress-1'
}

function getAmount(coin: any) {
  if (Number(coin.amount) === 0) {
    return 0
  }
  const val = num.formatMoney(coin.amount)
  if (coin.operation === operation_add) {
    return `+${val}`
  }
  return `-${val}`
}
</script>

<template>
  <div class="self-coin-detail">
    <div class="top">
      <BackBar :leftText="`${userName ? `【${userName}】` : '个人'}乐贝明细`" />
    </div>
    <mj-table
      ref="gridRef"
      class="coin-table"
      :service="selfCoinDetailService"
      :grid="grid"
      hide-remove
      hide-search
      hide-toolbar
    >
      <template #amount="{ row }">
        <span :class="getAmountClass(row)">{{ getAmount(row) }}</span>
      </template>
    </mj-table>
  </div>
</template>

<style lang="scss" scoped>
.self-coin-detail {
  @include main_bg;
  height: 100%;
  padding: $space-4_h $space-6;
  display: flex;
  flex-direction: column;

  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .coin-table {
    margin-top: 2vh;
  }
}
</style>
