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

import { IcomoonCoin } from '@vben/icons'
import { useUserStore } from '@vben/stores'

import { spLearnMoneyService } from '#/api/service/sp/learn-money'
import MjTable, { mj_form_select } from '#/components/mj/mj-table'
import num from '#/utils/num'
import obj from '#/utils/obj'

import { useSearchSp } from '../hooks/search'
import TopUp from './top-up.vue'
import Withdraw from './withdraw.vue'

const gridRef = ref()
// 是否为超管
const { userInfo } = storeToRefs(useUserStore())
const spData = ref({})
const spRender = useSearchSp({
  getData: () => spData.value,
})

const direction_add = 1
// const direction_sub = 2
// const directionList = [
//   {
//     value: direction_add,
//     label: '增加',
//   },
//   {
//     value: direction_sub,
//     label: '减少',
//   },
// ]

const type_offline_charge = 0
const type_online_charge = 1
const type_withdraw = 2
const type_sell = 3
const type_buy = 4
const type_fee = 5
const typeMap = {
  [type_offline_charge]: '线下充值',
  [type_online_charge]: '线上充值',
  [type_withdraw]: '提现',
  [type_sell]: '出售乐贝',
  [type_buy]: '购买乐贝',
  [type_fee]: '平台手续费',
} as any
const typeList = obj.map2options(typeMap)

// 搜索表单
const searchForm = {
  titleWidth: 65,
  items: obj.joinObjs<any>(
    userInfo.value.isSpStaff || {
      title: '服务商',
      field: 'providerId',
      span: 8,
      itemRender: spRender,
    },
    {
      title: '类型',
      field: 'type',
      itemRender: {
        name: mj_form_select,
        options: typeList,
        props: { clearable: true },
      },
    },
    {
      title: '时间',
      field: 'timeRange',
      itemRender: {
        name: 'VxeDateRangePicker',
        props: { clearable: true, type: 'datetime' },
      },
    },
  ),
} as MjFormProps

// 表格
const grid = {
  columns: obj.joinObjs<any>(
    { type: 'seq' },
    !userInfo.value.isSuperAdmin || {
      field: 'providerName',
      title: '服务商',
    },
    {
      field: 'amount',
      title: '变化',
      formatter({ row }: any) {
        const val = num.formatMoney(row.amount)
        if (row.direction === direction_add) {
          return `+${val}`
        }
        return `-${val}`
      },
    },
    { field: 'balance', title: '余额', formatter: 'money' },
    {
      field: 'type',
      title: '类型',
      formatter({ row }: any) {
        return typeMap[row.type]
      },
    },
    { field: 'remark', title: '备注' },
    { field: 'bizDate', title: '时间' },
  ),
  cellClassName({ column, row }) {
    if (column.field === 'amount' || column.field === 'type') {
      if (row.direction === direction_add) {
        return 'progress-100'
      }
      return 'progress-1'
    }
  },
  beforeLoadData(params) {
    // 拆分时间参数
    if (params.timeRange) {
      const times = params.timeRange.split(',')
      params.startTime = times[0]
      params.endTime = times[1]
      delete params.timeRange
    }
    // 如果是服务商人员
    if (userInfo.value.isSpStaff) {
      params.providerId = userInfo.value.providerId
    }
    return params
  },
} as MjGridProps

// 刷新
function reload() {
  gridRef.value.reload()
}

// 显示充值
const topUpVisible = ref(false)
function showTopUp() {
  topUpVisible.value = true
}

// 显示提现
const withdrawVisible = ref(false)
function showWithdraw() {
  withdrawVisible.value = true
}
</script>

<template>
  <div class="learn-money g-container">
    <MjTable
      ref="gridRef"
      :grid="grid"
      :service="spLearnMoneyService"
      hide-remove
      :search-form="searchForm"
      :hide-toolbar="userInfo.isSuperAdmin"
    >
      <template v-if="!userInfo.isSuperAdmin" #toolbarButtonsExtra>
        <el-button type="success" @click="showTopUp" :icon="IcomoonCoin">
          充值
        </el-button>
        <el-button type="primary" @click="showWithdraw" :icon="IcomoonCoin">
          提现
        </el-button>
      </template>
    </MjTable>
    <TopUp v-model="topUpVisible" @refresh="reload" />
    <Withdraw v-model="withdrawVisible" />
  </div>
</template>

<style lang="scss" scoped></style>
