<template>
	<div class="fraud-detection-container">
		<!-- 标题 -->
		<h2>欺诈检测预警系统</h2>
		<!-- 筛选条件 -->
		<el-row :gutter="20" class="filter-row">

			<el-col :span="6">
				<el-select v-model="state.status" placeholder="交易状态">
					<el-option label="未处理" :value=0 />
					<el-option label="已处理" :value=1 />
				</el-select>
			</el-col>

			<el-col :span="6">
				<el-button type="primary" @click="fetchData">筛选</el-button>
			</el-col>
		</el-row>


		<el-row :gutter="20" class="chart-row">
<!--			<el-col :span="24">-->
<!--				<v-chart class="chart" :option="pieChartOption" autoresize />-->
<!--			</el-col>-->
			<el-col :span="24">
				<v-chart class="chart" :option="barChartOption" autoresize />
			</el-col>
		</el-row>

		<!-- 数据表格 -->
		<el-table :data="state.getList" v-loading="loading">
			<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="status" label="处理状态" >
					<template #default="scope">
					<el-tag v-if="scope.row.status"  type="success">已处理</el-tag>
					<el-tag v-else  type="warning">未处理</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template #default="scope">
					<el-button v-if="scope.row.status ==0" size="small" @click="markAsProcessed(scope.row)">标记为已处理</el-button>
<!--					<el-button size="small" type="danger" @click="deleteTransaction(scope.row)">删除</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"
    />
	</div>
</template>
<script setup lang="ts">
import {ref, onMounted, reactive} from 'vue'
import VChart from 'vue-echarts'
import { PieChart, BarChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import { use } from 'echarts/core'
import {ElMessage} from "element-plus";
// 引入并使用图表组件
use([CanvasRenderer, PieChart, BarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent])

const state = reactive({
  dialogVisible: false,
  getList: [],
  totalCount: 0, // 总记录数
  page: 1, // 当前页码
  pageSize: 10, // 每页显示的记录数
	transactionStatus:1,
	status:1,
})

const init = async () => {
  try {
    const res = await adminRequest.get('/api/transactions', {
      params: {
        page: state.page,
        page_size: state.pageSize,
        transactionStatus: state.transactionStatus,
        status: state.status,
      },
    })
    state.getList = res.data.data
    state.totalCount = res.data.page.total_count
  } catch (error) {
    ElMessage.error('获取交易记录失败')
    console.error('Error fetching transactions:', error)
  }
}
const loading = ref(false)


// 柱状图配置
const barChartOption = ref({
	title: { text: '已欺诈交易趋势' },
	tooltip: { trigger: 'axis' },
	xAxis: {
		type: 'category',
		data: []
	},
	yAxis: { type: 'value' },
	series: [
		{
			name: '欺诈交易',
			type: 'bar',
			data: []
		}
	]
})

// 获取数据
const fetchData = async () => {
	init()
}

// 标记为已处理
const markAsProcessed = async (row) => {
	try {
		await adminRequest.put(`/api/utransactions/${row.transaction_id}`)
		init()
		ElMessage.success("修改成功")
	} catch (error) {
		console.error('标记失败:', error)
	}
}

// 页码改变时的处理函数
const handlePageChange = (page: number) => {
  state.page = page
  init()
}
// 初始化数据
onMounted(async () => {
	init()
	fetchData()
	try {
		// 调用接口获取数据
		const response = await adminRequest.post('/api/mysql', {
			sql: "SELECT transaction_location name, count(*) value FROM fraud_detection_ml.tb_financial_transactions GROUP BY transaction_location"
		})
		// 更新折线图配置
		barChartOption.value.xAxis.data = response.map(item => item.name)
		barChartOption.value.series[0].data = response.map(item => item.value)

	} catch (error) {
		console.error('获取数据失败:', error)
	} finally {
		loading.value = false // 关闭加载状态
	}


})
</script>

<style scoped>
.fraud-detection-container {
	padding: 20px;
}

.filter-row {
	margin-bottom: 20px;
}

.chart-row {
	margin-bottom: 20px;
}

.chart {
	height: 300px;
}

.pagination {
	margin-top: 20px;
	text-align: right;
}
</style>
