<template>
  <div class="new-app-container layout-vertical">
    <YMTableSearch
      :loading="loading"
      :search-form="searchForm"
      @onValueChange="onValueChange"
      @submit="onSubmit"
    />
    <YMTable
      ref="table"
      :table-key="1"
      :index="true"
      :selection="true"
      :table-options="tableOptions"
      :columns="columns"
      :rows-actions="rowsActions"
      :show-summary="false"
      :apis="apis"
      :custom-style="{ height: 'calc(100vh - 150px)' }"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      queryData: {},

      // 搜索表单配置 (原 schema)
      searchForm: [
        {
          label: '会员ID',
          type: 'input',
          prop: 'member_id',
          clearable: true
        },
        {
          label: '会员昵称',
          type: 'input',
          prop: 'first_name',
          clearable: true
        },
  // {
  //         label: '日期范围',
  //         type: 'daterange',
  //         prop: 'dateRange',
  //         valueFormat: 'yyyy-MM-dd',
  //         startPlaceholder: '开始日期',
  //         endPlaceholder: '结束日期'
  //       }
      ],

      // 表格右侧操作列 (原 showAction: false，所以留空)
      rowsActions: [],

      // API 接口配置
      apis: {
        list: {
          url: 'operation/exchangeList', // 请将此处替换为实际的接口 URL 路径，原先为 api.operationExchangeList
          dataParam: 'data.data',
          resultParam: 'data',
          init: false
        }
      },

      // 表格整体配置
      tableOptions: {
        add: {
          show: false
        }
      },

      // 表格列配置 (原 columns)
      columns: [
       {
          label: '会员ID',
          prop: 'member_id',
          width: 120
        },
        {
          label: '会员昵称',
          prop: 'first_name', 
          width: 150
        },
        { prop: 'remarks', label: '用户备注' },
        { prop: 'recharge', label: '充值' },
        { prop: 'withdraw', label: '提现' },
        { prop: 'money', label: '余额' },
      ]
    }
  },
  mounted() {
    // 页面加载时自动请求数据 (对应原 immediate: true)
    this.onSubmit()
  },
  methods: {
    // 搜索条件变化时的回调
    onValueChange(val) {
      // 可以在此处处理额外的数据联动逻辑
    },

    // 提交搜索并刷新表格
    onSubmit(params = {}) {
      this.queryData = params
      this.$refs.table.getList(params)
    }
  }
}
</script>

<style lang="scss" scoped>
/* 你的自定义样式可以写在这里 */
</style>
