<!-- eslint-disable unicorn/prefer-ternary -->
<script setup lang="ts" name="replace-mgr">
import type { MjGridProps } from '#/components/mj/mj-table'

import { parentCoinDetailService } from '#/api/service/parent/coin-detail'
import MjTable, { mj_form_date_range } from '#/components/mj/mj-table'
import { parentTypeMap, useCoin } from '#/hooks/coin'
import obj from '#/utils/obj'

const { getTypeClass, getAmount } = useCoin()

// 搜索表单
const searchForm = {
  items: obj.joinObjs<any>({
    title: '时间',
    field: 'timeRange',
    span: 12,
    itemRender: {
      name: mj_form_date_range,
      props: { clearable: true, type: 'datetime' },
    },
  }),
} as any

// 表格
const gridRef = ref()
const grid = {
  columns: [
    { type: 'seq' },
    {
      title: '名称',
      field: 'userName',
      formatter: 'redaction',
    },
    {
      title: '手机',
      field: 'userPhone',
      formatter: 'redactionPhone',
    },
    {
      title: '头像',
      slots: {
        default: 'userAvatar',
      },
    },
    {
      title: '变化',
      slots: {
        default: 'amount',
      },
    },
    {
      title: '余量',
      field: 'balance',
      formatter: 'money',
    },
    {
      title: '类型',
      slots: {
        default: 'typeCode',
      },
    },
    { field: 'bizDate', title: '时间' },
    { field: 'remark', title: '备注', formatter: 'redactionRemark' },
  ],
  beforeLoadData(params) {
    // 拆分时间参数
    if (params.timeRange) {
      const times = params.timeRange.split(',')
      params.startTime = times[0]
      params.endTime = times[1]
      delete params.timeRange
    }
    return params
  },
} as MjGridProps
</script>

<template>
  <div class="coin-detail g-container">
    <MjTable
      ref="gridRef"
      hide-toolbar
      hide-remove
      :grid="grid"
      :service="parentCoinDetailService"
      :search-form="searchForm"
    >
      <template #typeCode="{ row }">
        <span :class="getTypeClass(row)">{{
          parentTypeMap[row.typeCode]
        }}</span>
      </template>
      <template #userAvatar="{ row }">
        <div class="avatar">
          <img v-if="row.userAvatar" :src="row.userAvatar" />
        </div>
      </template>
      <template #amount="{ row }">
        <span :class="getTypeClass(row)">{{ getAmount(row) }}</span>
      </template>
    </MjTable>
  </div>
</template>

<style lang="scss" scoped>
.coin-detail {
  height: 100% !important;

  .avatar {
    display: flex;
    justify-content: center;

    img {
      width: 40px;
      height: 40px;
    }
  }
}
</style>
