<script setup lang="ts">
import type { FormItemProp, IActionListProp, IColumList } from "@sud-web/vue-ui"
import type { IPayItem } from "@/api/recharge/types/recharge"
import useDialogOut from "@sud-web/vue-hooks/useDialogOut"
import useTablePage from "@sud-web/vue-hooks/useTablePage"
import { reactive } from "vue"
import { getPayList } from "@/api/recharge"
import { formatNumber } from "@/utils"
import DemoModal from "./components/DemoModal.vue"

defineOptions({ name: "DemoList" })

// 同时演示 PcSearch + PcTable + useTablePage（来自 @sud-web 公共库）
// useTablePage 统一管理 search / table 的引用并提供刷新方法
const { tableRef, searchRef, requestTable } = useTablePage()

// useDialogOut 统一管理新增 / 编辑 / 查看弹窗状态（用 reactive 后字段无需 .value）
const dialog = reactive(useDialogOut<IPayItem>())

// 搜索表单数据
const searchFormData = reactive({
  txType: "",
  status: ""
})

// 搜索表单项配置
const searchFormList: FormItemProp[] = [
  { prop: "txType", label: "交易类型", type: "input", width: 200 },
  {
    prop: "status",
    label: "状态",
    type: "select",
    width: 180,
    sources: [
      { label: "成功", value: "SUCCESS" },
      { label: "处理中", value: "READY" },
      { label: "已关闭", value: "CLOSED" }
    ]
  }
]

// 表格列配置
const columList: IColumList = [
  { label: "交易号", prop: "txId", minWidth: 160, align: "left" },
  { label: "时间", prop: "time", minWidth: 160, align: "left" },
  { label: "金额", prop: "amount", minWidth: 140, align: "left" },
  { label: "类型", prop: "txType", minWidth: 120, align: "left" },
  { label: "状态", prop: "status", minWidth: 120, align: "left" }
]

// 请求方法：分页参数由 PcTable 注入，搜索条件并入
function requestApi(params: any) {
  return getPayList({ ...params, ...searchFormData })
}

// PcSearch 工具栏按钮：直接配置进 actionList，渲染在搜索/重置旁，无需额外写 HTML
const actionList: IActionListProp[] = [
  { label: "新增", type: "primary", click: () => dialog.add() }
]
</script>

<template>
  <el-card shadow="never" class="rounded-[8px]!">
    <PcSearch
      ref="searchRef"
      :model-value="searchFormData"
      @update:model-value="Object.assign(searchFormData, $event)"
      :form-list="searchFormList"
      :action-list="actionList"
      @request="requestTable"
    />

    <PcTable
      ref="tableRef"
      :request-api="requestApi"
      :colum-list="columList"
      :action-width="160"
      type-index
    >
      <template #amount="{ row }">
        <span style="color: var(--el-color-success)">
          ¥ {{ formatNumber(Number(row.amount || 0).toFixed(2), { minimumFractionDigits: 2 }) }}
        </span>
      </template>

      <!-- 操作列：编辑 / 查看，传入行拷贝避免污染表格数据 -->
      <template #action="{ row }">
        <el-button link type="primary" @click="dialog.edit({ ...row })">编辑</el-button>
        <el-button link type="info" @click="dialog.check({ ...row })">查看</el-button>
      </template>
    </PcTable>

    <!-- 新增 / 编辑 / 查看弹窗：提交成功后刷新列表 -->
    <DemoModal
      v-model:visible="dialog.visible"
      :mode="dialog.mode"
      :data="dialog.row"
      :disabled="dialog.disabled"
      @submit="requestTable()"
    />
  </el-card>
</template>

<style scoped lang="scss">
:deep(.el-card__body) {
  padding: 24px;
  min-height: calc(100vh - 100px);
}
</style>
