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

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

import { coinDetailService } from '#/api/service/org/coin'
import MjTable, {
  mj_form_date_range,
  mj_form_input,
  mj_form_money,
  mj_form_select,
  mj_form_text,
} from '#/components/mj/mj-table'
import {
  coin_type_charge,
  operationList,
  transTypeMap,
  typeList,
  typeMap,
  useCoin,
} from '#/hooks/coin'
import obj from '#/utils/obj'

import { useSearchSchool } from '../hooks/search'
import TopUp from './top-up.vue'

const gridRef = ref()

// 是否为超管
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)

const { getTypeClass, getAmount } = useCoin()
const schoolRender = useSearchSchool({
  prepare: { gridRef },
})

// 表单
const editForm = reactive({
  modal: {
    width: 720,
  },
  form: {
    items: [
      {
        required: true,
        field: 'money',
        title: '人民币',
        span: 12,
        itemRender: {
          name: mj_form_money,
        },
      },
      {
        required: true,
        field: 'amount',
        title: '乐贝',
        span: 12,
        itemRender: {
          name: mj_form_money,
          props: { showPrefix: false },
        },
      },
      {
        required: true,
        field: 'bizDate',
        title: '时间',
        span: 12,
        itemRender: {
          name: mj_form_input,
          props: { type: 'datetime' },
        },
      },
      {
        required: true,
        field: 'schoolName',
        title: '学校',
        span: 12,
        itemRender: {
          name: mj_form_text,
          props: {
            linkedRender: schoolRender,
          },
        },
      },
    ],
    data: {},
  },
  addFields: ['schoolId', 'bizDate', 'money', 'amount'],
} as any)

// 搜索表单
const searchForm = {
  titleWidth: 55,
  items: obj.joinObjs<any>(
    userInfo.value.isOnlyStaff || {
      title: '学校',
      field: 'schoolId',
      span: 8,
      itemRender: schoolRender,
    },
    {
      title: '增减',
      field: 'operation',
      span: userInfo.value.isOnlyStaff ? 4 : 5,
      itemRender: {
        name: mj_form_select,
        options: operationList,
        props: { clearable: true },
      },
    },
    {
      title: '类型',
      field: 'typeCode',
      span: userInfo.value.isOnlyStaff ? 4 : 5,
      itemRender: {
        name: mj_form_select,
        options: typeList,
        props: { clearable: true },
      },
    },
    {
      title: '时间',
      field: 'timeRange',
      span: userInfo.value.isOnlyStaff ? 10 : 14,
      itemRender: {
        name: mj_form_date_range,
        props: { clearable: true, type: 'datetime' },
      },
    },
  ),
} as MjFormProps

// 表格
const grid = {
  columns: obj.joinObjs<any>(
    { type: 'seq' },
    userInfo.value.isOnlyStaff || {
      field: 'schoolName',
      title: '学校',
    },
    {
      title: '名称',
      formatter(params: any) {
        if (!params.row.userName) {
          return ''
        }
        if (params.row.className) {
          return `${params.row.className} - ${params.row.userName}`
        }
        if (
          obj.isEqualIgnoreNumberString(params.row.typeCode, coin_type_charge)
        ) {
          return `用户[${params.row.userName}]充值`
        }
        return params.row.userName
      },
    },
    {
      title: '变化',
      slots: {
        default: 'amount',
      },
    },
    {
      title: '余量',
      field: 'balance',
      formatter: 'money',
    },
    {
      title: '类型',
      slots: {
        default: 'typeCode',
      },
    },
    {
      field: 'remark',
      title: '备注',
      formatter: 'redactionRemark',
    },
    { field: 'bizDate', title: '时间' },
  ),
  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
    } else if (userInfo.value.isStaff) {
      // 如果是学校人员
      params.schoolId = userInfo.value.schoolId
    }
    return params
  },
} as MjGridProps

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

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

function getTypeText(row: any) {
  let subType = transTypeMap[row.transType]
  subType = subType ? `[${subType}]` : ''
  return `${typeMap[row.typeCode]}${subType}`
}
</script>

<template>
  <div class="coin-detail g-container">
    <MjTable
      ref="gridRef"
      :edit-form="editForm"
      hide-edit
      hide-remove
      :search-form="searchForm"
      :grid="grid"
      :service="coinDetailService"
      :hide-add="!userInfo.isSuperAdmin"
    >
      <template #typeCode="{ row }">
        <span :class="getTypeClass(row)">{{ getTypeText(row) }}</span>
      </template>
      <template #amount="{ row }">
        <span :class="getTypeClass(row)">{{ getAmount(row) }}</span>
      </template>
      <template v-if="userInfo.isOnlyStaff" #toolbarButtonsExtra>
        <el-button type="success" @click="topUp" :icon="IcomoonCoin">
          充值
        </el-button>
      </template>
    </MjTable>
    <TopUp v-model="topUpVisible" @refresh="refresh" />
  </div>
</template>

<style lang="scss" scoped>
.coin-detail {
  .type-charge {
    color: #07cc89;
  }

  .type-reward {
    color: #f00a0a;
  }

  .type-punish {
    color: #3894ff;
  }
}
</style>
