<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" :style="{ width: '60px', height: '30px' }" ></el-input>
      </el-form-item>

      <!-- 游戏ID下拉选择 -->
      <el-form-item label="游戏ID">
        <el-select v-model="searchInfo.gameId" placeholder="请选择游戏" :style="{ width: '130px', height: '30px' }" >
          <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" :style="{ width: '200px', height: '30px' }" ></el-input>
      </el-form-item>

      <!-- 时间范围选择 -->
      <el-form-item label="开始时间">
        <el-date-picker
            v-model="searchInfo.startTime"
            type="date"
            placeholder="选择日期" :style="{ width: '140px', height: '30px' }" >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="结束时间">
        <el-date-picker
            v-model="searchInfo.endTime"
            type="date"
            placeholder="选择日期" :style="{ width: '140px', height: '30px' }" >
        </el-date-picker>
      </el-form-item>

      <!-- 查询按钮 -->
      <el-form-item>
        <el-button type="primary" @click="onQuery">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="gva-search-box">
    <!-- 这里将放置用户表格 -->
    <el-table :data="resLogs" border style="width: 100%">
      <el-table-column prop="uid" label="id" align="left" min-width="150"></el-table-column>
      <el-table-column prop="res_name" label="资源名" align="left" min-width="150"></el-table-column>
      <el-table-column prop="res_value" label="变动值" align="left" min-width="150"></el-table-column>
      <el-table-column prop="res_after_value" label="变动后总值" align="left" min-width="150"></el-table-column>
      <el-table-column prop="game_id" label="游戏名" align="left" min-width="150"></el-table-column>
      <el-table-column prop="reason" label="原因" align="left" min-width="150"></el-table-column>
      <el-table-column prop="operator_id" label="操作者" align="left" min-width="150"></el-table-column>
      <el-table-column prop="time" label="时间" align="left" min-width="150"></el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {ElLoading, ElMessage} from 'element-plus'
import {getUserResLogs} from "@/api/logRecord";

const searchInfo = ref({
  userId: '',
  gameId: null,
  gameNo:'',
  startTime: '',
  endTime: '',
})

const resLogs= ref([
  //   {
  //   game_id: 0,
  //   game_no: "",
  //   operator_id: 0,
  //   reason: "gm",
  //   res_after_value: 5,
  //   res_name: "gold",
  //   res_value: 1,
  //   time: "2025-06-22T17:17:41Z",
  //   uid: 1,
  // },
])

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

function getDate(time, isStart) {
  if(time===null || time === undefined) {
    return ''
  }
  const year = time.getFullYear();
  const month = String(time.getMonth() + 1).padStart(2, '0');
  const day = String(time.getDate()).padStart(2, '0');
  if (isStart){
    return `${year}-${month}-${day}`+' 00:00:00';
  }else{
    return `${year}-${month}-${day}`+' 23:59:59';
  }
}

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

</script>

<style scoped>
.query-container {
  padding: 20px;
  background: #fff;
}
</style>