<template>
  <div class="new-app-container layout-vertical">
    <YMTableSearch 
      :loading="loading" 
      :search-form="searchForm" 
      @submit="onSubmit"
    />

    <YMTable
      ref="table"
      :table-key="2"
      :index="true"
      :selection="false"
      :columns="columns"
      :apis="apis"
      :custom-style="{ height: 'calc(100vh - 200px)' }"
    />
  </div>
</template>

<script>
import { userLoginLog } from '@/api/data'

export default {
  name: 'UserLogList',
  data() {
    return {
      loading: false,
      // 搜索配置
      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: '结束日期'
        }
      ],
      // 表格列配置
      columns: [
        {
          label: '会员ID',
          prop: 'member_id',
          width: 120
        },
        {
          label: '会员昵称',
          prop: 'first_name', 
          width: 150
        },
        
        {
          label: '登录IP',
          prop: 'login_ip',
          align: 'center'
        },
        {
          label: '登录时间',
          prop: 'created_at',
          align: 'center',
          sortable: 'custom'
        }
      ],
      // 接口配置
      apis: {
        list: {
          // 注意：此处建议封装一个标准的 list 接口适配器
          // 如果 userLoginLog 返回结构与 YMTable 要求一致，可直接写 URL
          url: 'user/loginLog', 
          dataParam: 'data.data',
          resultParam: 'data'
        }
      }
    }
  },
  methods: {
    // 搜索提交
    onSubmit(params = {}) {
      const query = { ...params }
      
      // 处理日期范围格式，适配接口需要的 start_time 和 end_time
      if (params.dateRange && params.dateRange.length === 2) {
        query.start_time = params.dateRange[0]
        query.end_time = params.dateRange[1]
      }
      delete query.dateRange
      
      this.$refs.table.getList(query)
    }
  },
  mounted() {
    // 如果需要进入页面自动查询，请取消注释
    // this.onSubmit()
  }
}
</script>

<style scoped>
/* 保持与原页面一致的布局样式 */
.layout-vertical {
  display: flex;
  flex-direction: column;
}
</style>