<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-button type="primary" icon="el-icon-circle-plus" >新增日志</el-button>
      <!-- 日志列表 -->
      <!-- 
        data 显示的数据   这里增加了分页功能
        highlight-current-row 是否要高亮当前行 默认false
        border 是否带有纵向边框 默认false
        stripe 是否为斑马纹 默认false
        fit 列的宽度是否自撑开	默认true
        cell-style 通过回调函数逻辑操作增加style样式
       -->
      <el-table 
        :data="userTableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"  
        highlight-current-row 
        border 
        stripe
        fit 
        :cell-style="cellStyle"  >
      <!-- id --> 
        <el-table-column label="id" type="index" width="150px" align="center" :index="indexMethod"></el-table-column>
        <!-- <el-table-column prop="id" label="id" width="90" align="center"></el-table-column> -->

        <!-- 
          prop  字段值
          label 字段名称
          width 宽度
          align 是否剧中
         -->
        <!-- 日志内容 -->
        <el-table-column prop="message" label="日志内容" width="500px" align="center"></el-table-column>
        <!-- 时间 -->
        <el-table-column   prop="timestamp" label="时间" width="300px" align="center" sortable>
         <!-- <template slot-scope="scope">    
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{scope.row.birthday}}</span>
        </template> -->
        </el-table-column>
        <!-- 操作列  -->
        <!-- fixed 列是否固定在左侧或者右侧，true 表示固定在左侧  可选:true, left, right -->
      <el-table-column fixed="right"  label="操作"  width="200px" align="center" >
        <template slot-scope="scope"> 
          <!--
             scope.row就是这一行的数据  
             size 尺寸 medium / small / mini
             type 类型 	primary / success / warning / danger / info / text
             icon 图标类名
          -->
          <el-button @click="handleDelete(scope.row)" type="danger" icon="el-icon-delete"  size="small" >删除</el-button>
          <el-button type="warning" icon="el-icon-edit" size="small">编辑</el-button>
        </template>
      </el-table-column>

      </el-table>
      <!-- 分页 -->
      <!-- 
          @size-change //  pageSize 改变时会触发 每页条数
          @current-change //  currentPage 改变时会触发 当前页
          :current-page //  默认false
          background//  是否为分页按钮添加背景色
          :page-sizes // 每页显示个数选择器的选项设置 这是下拉框可以选择的，每选择一行，要展示多少内容 类似：[10, 20, 30, 40, 50, 100]
          page-sizes=显示当前行的条数
          layout // 组件布局，子组件名用逗号分隔
         :total // 总条目数,一般从展示列表的总数获取
       -->
      <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>
  // 引入axios
  import axios from "axios";
  export default {
    name: "User",
    data() {
      return {
        userTableData: [             
            { 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" },
             { id: 7, message: "日志7", timestamp: "2024-01-05 10:30:00" },
             { id: 8, message: "日志8", timestamp: "2024-01-05 11:15:00" },
             { id: 9, message: "日志9", timestamp: "2024-01-06 11:15:00" },
             { id: 10, message: "日志10", timestamp: "2024-01-07 11:15:00" },
             { id: 11, message: "日志11", timestamp: "2024-01-08 11:15:00" },
             { id: 12, message: "日志12", timestamp: "2024-01-09 11:15:00" },
            ], // 日志列表测试数据
        currentPage:1, // 初始页
        pagesize:3,  // 初始每页的数据
        accounts: [
          { id: 1, name: "子账号1" },
          { id: 2, name: "子账号2" },
          // 添加更多子账号
        ],
      };
    },
    methods: {
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize)  //每页下拉显示数据
        },
        handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                console.log(this.currentPage)  //点击第几页
        },
      //改变表格某一列或者某一个单元格文本颜色 
      cellStyle({row, column, rowIndex, columnIndex}) {
        // 定义样式变量
        let cellStyle;
        // 根据每一行的status属性的值进行判断
        // 如果是正常就展示以绿色字体展示，如果是禁用就以红色颜色展示
        switch(row.status) {
          // 0代表正常
            case 0:
              // 设置文本颜色 绿色 可以直接写颜色编码，也可以直接写颜色的单词
              cellStyle = 'color:#70DB93';
              break;
              // 0代表金禁用
            case 1:
              // 设置文本颜色 红色
              cellStyle = 'color:red';
              break;
              // 如果有其他状态，就默认显示，不给文本颜色
            default:
            cellStyle = '';
        }
          
          //return cellStyle  // 返回最终处理过的样式 这样写就是让全部行被style修饰
          // 返回最终处理过的样式 只让账号状态这个属性的属性被style修饰
           if(column.label == '账号状态'){
            return cellStyle
          }
      },
      // 展示列表      
      queryUserList() {
         axios.get('http://localhost:9090/user/queryList', {
            // 传递的参数
            params: {
            
            }
            // 回调函数,一定要使用箭头函数,不然this的指向不是vue示例
            }).then(res =>{
              // 请求成功后的数据返回给列表用于展示
               this.userTableData = res.data.data;
            }).catch(error =>{
               console.log(error)
            })
      },
      // 序列自增
      indexMethod(index) {
        // 每次自增1 可灵活修改
        return (index += 1);
      },
      // 删除
      handleDelete(row) {
          // 确认框确认是否要删除
          this.$confirm("确定要删除"+row.userName+"吗?", "删除提示", {
            iconClass: "el-icon-question", //自定义图标样式
            confirmButtonText: "残忍删除", //确认按钮文字
            cancelButtonText: "取消删除", //取消按钮文字
            showClose: true, //是否显示右上角关闭按钮  默认false
            type: "warning", //提示类型  success/info/warning/error
            //center:"true", //文字居中 默认false
        }).then(res=> {  //选择确认按钮进入此方法
            //确认操作 请求删除接口
           axios.get('http://localhost:9090/user/delete', {
            // 传递的参数
            params: {
              id:row.id //id,从row获取当前行的id
            }
            // 回调函数,一定要使用箭头函数,不然this的指向不是vue示例
            }).then(res =>{
                // 删除成功
                if(res.data.status===200){
                  // 删除成功提示
                  this.$message({showClose: true, message: '删除成功！',type: 'success', duration:1000,center:true});
                  // 重新刷新最新的列表
                  this.queryUserList();
                }
               
            }).catch(error =>{
               console.log(error)
            })
        }).catch(() => { //选择取消按钮进入此方法
          //取消操作
        });    
      }
      // 打开新的弹窗
        //  open() {
        //   this.$alert('这是一段内容', '标题名称', {
        //     confirmButtonText: '确定',
        //     callback: action => {
        //       this.$message({
        //         type: 'info',
        //         message: `action: ${ action }`
        //       });
        //     }
        //   });
        // },
    },
    mounted() {
      // 页面加载就渲染列表
      this.queryUserList();
    },
  };
  </script>
  
  <style  >
  </style>
  
  
  
  