<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.slice((currentPage-1)*pagesize,currentPage*pagesize)"  
        highlight-current-row 
        border 
        stripe
        fit 
        :cell-style="cellStyle"  >
        <el-table-column prop="id" label="序号"></el-table-column>
        <el-table-column prop="message" label="日志内容"></el-table-column>
        <el-table-column prop="timestamp" label="时间"></el-table-column>
        <el-table-column prop="operation" label="操作">
          <el-button size="mini" @click="readlogs">查看</el-button>
        </el-table-column>
      </el-table>
      
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          background
          :page-sizes="[1,3,5,8,10]"  
          :page-size="pagesize"         
          layout="total, sizes,  prev, pager, next, jumper" 
          :total="userTableData.length">   
      </el-pagination>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        logs: [ // 这里可以根据需要从后台获取真实数据
             { id: 1, message: "日志1", timestamp: "2024-01-05 10:30:00" },
             { id: 2, message: "日志2", timestamp: "2024-01-05 11:15:00" },
             { id: 3, message: "日志3", timestamp: "2024-01-06 11:15:00" },
             { id: 4, message: "日志4", timestamp: "2024-01-07 11:15:00" },
             { id: 5, message: "日志5", timestamp: "2024-01-08 11:15:00" },
             { id: 6, message: "日志6", timestamp: "2024-01-09 11:15:00" },
      ],
      currentPage:1, // 初始页
      pagesize:3,  // 初始每页的数据 
        accounts: [
          { id: 1, name: "子账号1" },
          { id: 2, name: "子账号2" },
          // 添加更多子账号
        ],
        selectedAccount: null,

      };
    },
    mounted() {  
    this.renderChart()  
  },  
    methods: {
      // handleSizeChange: function (size) {
      //         this.pagesize = size;
      //         console.log(this.pagesize)  //每页下拉显示数据
      //     },
      // handleCurrentChange: function(currentPage){
      //         this.currentPage = currentPage;
      //         console.log(this.currentPage)  //点击第几页
      //     },
      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);
      },

      renderChart() {  
      const myChart = echarts.init(this.$refs.myChart)  
      myChart.setOption(this.chartOptions)  
    } , 
      readlogs(){

      }
    }
  };
  </script>

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