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

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

import { spCoinDetailService } from '#/api/service/sp/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 {
  operationList,
  spTypeList,
  spTypeMap,
  transTypeMap,
  useCoin,
} from '#/hooks/coin'
import obj from '#/utils/obj'

import { useSearchSp } from '../hooks/search'
import TopUp from './top-up.vue'
import TransferToSp from './transfer-to-sp.vue'

const gridRef = ref()

// spRender的数据
const providerData = reactive({})

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

const { getTypeClass, getAmount } = useCoin()
const spRender = useSearchSp({
  prepare: { gridRef },
  getData: () => [gridRef.value.getEditFormData(), providerData],
})

// 表单
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: 'providerName',
        title: '服务商',
        span: 12,
        itemRender: {
          name: mj_form_text,
          props: {
            linkedRender: spRender,
          },
        },
      },
    ],
    data: {},
  },
  addFields: ['providerId', 'bizDate', 'money', 'amount'],
} as any)

// 搜索表单
const searchForm = {
  titleWidth: 65,
  items: obj.joinObjs<any>(
    userInfo.value.isSpStaff || {
      title: '服务商',
      field: 'providerId',
      span: 8,
      itemRender: spRender,
    },
    {
      title: '增减',
      field: 'operation',
      span: userInfo.value.isSpStaff ? 4 : 5,
      itemRender: {
        name: mj_form_select,
        options: operationList,
        props: { clearable: true },
        events: {
          change: () => {
            gridRef.value.reload()
          },
        },
      },
    },
    {
      title: '类型',
      field: 'typeCode',
      span: userInfo.value.isSpStaff ? 4 : 5,
      itemRender: {
        name: mj_form_select,
        options: spTypeList,
        props: { clearable: true },
        events: {
          change: () => {
            gridRef.value.reload()
          },
        },
      },
    },
    {
      title: '时间',
      field: 'timeRange',
      span: userInfo.value.isSpStaff ? 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.isSpStaff || {
      field: 'providerName',
      title: '服务商',
    },
    {
      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
    }
    return params
  },
} as MjGridProps

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

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

// 转让
const transferVisible = ref(false)
function showTransfer() {
  transferVisible.value = true
}

function getTypeText(row: any) {
  let subType = transTypeMap[row.transType]
  subType = subType ? `[${subType}]` : ''
  return `${spTypeMap[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="spCoinDetailService"
      :hide-add="userInfo.isSpStaff"
    >
      <template #typeCode="{ row }">
        <span :class="getTypeClass(row)">{{ getTypeText(row) }}</span>
      </template>
      <template #amount="{ row }">
        <span :class="getTypeClass(row)">{{ getAmount(row) }}</span>
      </template>
      <template #toolbarButtonsExtra>
        <el-button type="warning" @click="showTransfer" :icon="IcomoonCoin">
          转让
        </el-button>
        <el-button
          v-if="userInfo.isSpStaff"
          type="success"
          @click="topUp"
          :icon="IcomoonCoin"
        >
          充值
        </el-button>
      </template>
    </MjTable>
    <TopUp v-model="topUpVisible" @refresh="refresh" />
    <TransferToSp
      v-model="transferVisible"
      @refresh="refresh"
      :sp-render="spRender"
      :provider-data="providerData"
    />
  </div>
</template>

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

  .type-reward {
    color: #f00a0a;
  }

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