<template>
  <div class="query-container">
    <el-form :inline="true" class="demo-form-inline">
      <!-- 用户ID输入框（按您要求放在最左侧） -->
      <el-form-item label="用户ID">
        <el-input v-model="searchInfo.userId" placeholder="0"></el-input>
      </el-form-item>

      <!-- 游戏ID下拉选择 -->
      <el-form-item label="游戏ID">
        <el-select v-model="searchInfo.gameId" placeholder="请选择游戏">
          <el-option
              v-for="item in gameOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <!-- 用户ID输入框（按您要求放在最左侧） -->
      <el-form-item label="对局记录ID">
        <el-input v-model="searchInfo.gameNo" ></el-input>
      </el-form-item>

      <!-- 时间范围选择 -->
      <el-form-item label="开始时间">
        <el-date-picker
            v-model="searchInfo.startTime"
            type="date"
            placeholder="选择日期">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="结束时间">
        <el-date-picker
            v-model="searchInfo.endTime"
            type="date"
            placeholder="选择日期">
        </el-date-picker>
      </el-form-item>

      <!-- 查询按钮 -->
      <el-form-item>
        <el-button type="primary" @click="onQuery">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import {
  getUserResLogs,
} from "@/api/logRecord";

const searchInfo = {
  userId: '',
  gameId: 0,
  gameNo:'',
  startTime: '',
  endTime: '',
}

const gameOptions= [
  { value: 1, label: '王者荣耀' },
  { value: 2, label: '原神' },
  { value: 3, label: '和平精英' }
]

async function onQuery() {
  // 显示加载状态
  const loading = this.$loading({
    lock: true,
    text: '加载中...',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  try {
    const req = {
      user_id:+searchInfo.userId,
      game_id:+searchInfo.gameId,
      game_no:searchInfo.gameNo,
      startTime:searchInfo.startTime,
      endTime:searchInfo.endTime,
    }
    const response = await getUserResLogs(req)
    if (response.code !== 0) {
      console.error('获取金流失败:', response.msg || `请求失败，错误码: ${response.code}`)
      this.$message.error('获取金流失败:' + (response.msg || `请求失败，错误码: ${response.code}`))
      return
    }
    console.log(response.data.log)
  }catch (error){
    console.error('获取金流失败:', error)
    this.$message.error('获取金流失败:'+error)
  }finally {
    // 关闭加载状态
    loading.close()
  }
}

</script>

<style scoped>
.query-container {
  padding: 20px;
  background: #fff;
}
.el-form-item {
  margin-bottom: 0;
}
</style>