<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: {},

      // 搜索表单配置
      searchForm: [
        {
          label: '用户名',
          type: 'input',
          prop: 'username',
          clearable: true
        },
        {
          label: '邮箱',
          type: 'input',
          prop: 'email',
          clearable: true
        },
        {
          label: '开始时间',
          type: 'date', // 根据实际使用的组件库可能需要调整为 datetime 或其他
          prop: 'start_time',
          valueFormat: 'yyyy-MM-dd',
          clearable: true
        },
        {
          label: '结束时间',
          type: 'date',
          prop: 'end_time',
          valueFormat: 'yyyy-MM-dd',
          clearable: true
        }
      ],

      // 表格右侧操作列
      rowsActions: [],

      // API 接口配置
      apis: {
        list: {
          url: 'userFeedback/list', 
          dataParam: 'data.data',
          resultParam: 'data',
          init: false
        }
      },

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

      // 表格列配置 
      columns: [
        { prop: 'id', label: 'ID', width: 80 },
        { prop: 'user_id', label: '用户ID', width: 120 },
        { prop: 'username', label: '用户名', width: 120 },
        { prop: 'email', label: '邮箱', width: 180 },
        { prop: 'content', label: '反馈内容' },
        { prop: 'ip', label: 'IP', width: 130 },
        { prop: 'device_id', label: '设备标识', width: 150 },
        { prop: 'created_at', label: '创建时间', width: 160 },
        { prop: 'updated_at', label: '更新时间', width: 160 }
      ]
    }
  },
  mounted() {
    this.onSubmit()
  },
  methods: {
    // 搜索条件变化时的回调
    onValueChange(val) {
    },

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

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