<template>
  <div>
    <!-- 增、查交易记录的按钮 -->
    <el-button type="primary" @click="openAddDialog">同步交易记录</el-button>
    <el-table :data="state.getList">
      <el-table-column prop="transaction_id" label="交易ID"  />
      <el-table-column prop="user_name" label="姓名" />
      <el-table-column prop="mobile" label="联系方式"/>
      <el-table-column prop="transaction_amount" label="交易金额" />
      <el-table-column prop="transaction_time" label="交易时间"  width="200" />
      <el-table-column prop="transaction_location" label="交易城市"  />
      <el-table-column prop="transaction_status" label="交易状态"  />
      <el-table-column prop="ip_address" label="ip地址"  width="180" />
			<!-- <el-table-column prop="is_fraud" label="是否欺诈" width="180" />-->
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="editTransaction(scope.row)" size="small">编辑</el-button>
          <el-button @click="deleteTransaction(scope.row.transaction_id)" type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页控件 -->
    <el-pagination
      v-if="state.totalCount > 0"
      :current-page="state.page"
      :page-size="state.pageSize"
      :total="state.totalCount"
      layout="total, prev, pager, jumper"
      @current-change="handlePageChange"
    />
    <!-- 新增/编辑对话框 -->
    <el-dialog v-model="state.dialogVisible" title="新增交易记录" width="50%">
      <el-form :model="formData" ref="form" label-width="100px">
        <el-form-item label="用户ID" prop="user_id" :rules="[{ required: true, message: '请输入用户ID', trigger: 'blur' }]">
          <el-input v-model="formData.user_id" />
        </el-form-item>
        <el-form-item label="交易金额" prop="transaction_amount" :rules="[{ required: true, message: '请输入交易金额', trigger: 'blur' }]">
          <el-input v-model="formData.transaction_amount" />
        </el-form-item>
        <el-form-item label="交易时间" prop="transaction_time" :rules="[{ required: true, message: '请输入交易时间', trigger: 'blur' }]">
          <el-input v-model="formData.transaction_time" />
        </el-form-item>
        <el-form-item label="是否欺诈" prop="is_fraud" :rules="[{ required: true, message: '请选择是否欺诈', trigger: 'blur' }]">
          <el-switch v-model="formData.is_fraud" active-text="是" inactive-text="否" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="state.dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveTransaction">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted } from 'vue'
// 交易记录数据
const state = reactive({
	dialogVisible:false,
  getList: [],
  totalCount: 0, // 总记录数
  page: 1, // 当前页码
  pageSize: 10, // 每页显示的记录数
})

// 表单数据
const formData = reactive({
  transaction_id: null,
  user_id: '',
  transaction_amount: '',
  transaction_time: '',
  is_fraud: false
})

// 获取交易记录
const init = () => {
  adminRequest.get('/api/transactions', {
    params: {
      page: state.page,
      page_size: state.pageSize,
    }
  }).then(res => {
    state.getList = res.data.data
    state.totalCount = res.data.page.total_count
  })
}

// 新增交易记录
const openAddDialog = () => {
	ElMessage.success("同步成功！")
  // formData.transaction_id = null
  // formData.user_id = ''
  // formData.transaction_amount = ''
  // formData.transaction_time = ''
  // formData.is_fraud = false
  // state.dialogVisible = true
}

// 编辑交易记录
const editTransaction = (row: any) => {
  formData.transaction_id = row.transaction_id
  formData.user_id = row.user_id
  formData.transaction_amount = row.transaction_amount
  formData.transaction_time = row.transaction_time
  formData.is_fraud = row.is_fraud
  state.dialogVisible = true
}

// 保存交易记录
const saveTransaction = async () => {
  if (formData.transaction_id) {
    // 更新交易记录
    await adminRequest.put(`/api/transactions/${formData.transaction_id}`, formData)
  } else {
    // 新增交易记录
    await adminRequest.post('api/transactions', formData)
  }
  init()
  state.dialogVisible = false
}

// 删除交易记录
const deleteTransaction = async (transaction_id: number) => {
  try {
    await adminRequest.delete(`api/transactions/${transaction_id}`)
    init()
  } catch (error) {
    console.error('Error deleting transaction:', error)
  }
}

// 页码改变时的处理函数
const handlePageChange = (page: number) => {
  state.page = page
  init()
}

// 页面加载时获取交易记录
onMounted(() => {
  init()
})
</script>
<style scoped>
.dialog-footer {
  text-align: right;
}
</style>
