<template>
    <div>
      <el-select v-model="selectedAccount" placeholder="选择账号">
        <el-option
          v-for="account in accounts"
          :key="account.id"
          :label="account.name"
          :value="account.id"
        ></el-option>
      </el-select>
  
      <el-button @click="fetchLogs">查询</el-button>
  
      <el-table :data="logs" v-if="logs.length > 0">
        <el-table-column prop="id" label="日志ID"></el-table-column>
        <el-table-column prop="message" label="日志内容"></el-table-column>
        <el-table-column prop="timestamp" label="时间戳"></el-table-column>
      </el-table>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        accounts: [
          { id: 1, name: "子账号1" },
          { id: 2, name: "子账号2" },
          // 添加更多子账号
        ],
        selectedAccount: null,
        logs: [ // 这里可以根据需要从后台获取真实数据
             { id: 1, message: "日志1", timestamp: "2024-01-05 10:30:00" },
             { id: 2, message: "日志2", timestamp: "2024-01-05 11:15:00" },
      ]
      };
    },
    methods: {
      fetchLogs() {
        // 模拟从后端获取日志数据的过程
        // 这里可以使用axios或其他HTTP库发送请求
        // 根据selectedAccount的值决定查询的范围
        const accountId = this.selectedAccount;
        const url = accountId ? `/logs?accountId=${accountId}` : "/logs";
  
        // 假设后端返回的数据格式如下：
        // const response = {
        //   data: [
        //     { id: 1, message: "日志1", timestamp: "2024-01-05 10:30:00" },
        //     { id: 2, message: "日志2", timestamp: "2024-01-05 11:15:00" },
        //     // 更多日志数据
        //   ]
        // };
  
        // 模拟异步请求
        setTimeout(() => {
          // 将返回的日志数据赋值给logs数组
          this.logs = response.data;
        }, 1000);
      }
    }
  };
  </script>

<style scoped>
.audit-log {
  padding: 20px;
}
</style>