<template>
  <div class="log-content-container">
    <div class="log-title">
      {{ title }}
      <div class="btnGroup">
        <el-button-group>
          <el-button class="btnItem" @click="btnClick(1)" :class="{active:activeBtn==1}">账号分配</el-button>
          <el-button class="btnItem" @click="btnClick(2)" :class="{active:activeBtn==2}">账号授权</el-button>
          <el-button class="btnItem" @click="btnClick(3)" :class="{active:activeBtn==3}">账号登录</el-button>
          <el-button class="btnItem" @click="btnClick(4)" :class="{active:activeBtn==4}">账号行为</el-button>
        </el-button-group>
      </div>
    </div>

    <el-table
      v-loading="listLoading"
      class="log-table"
      element-loading-text="Loading"
      fit
      :data="list"
      :cell-style="setCellStyle"
      :header-cell-style="setHeaderCellStyle"
    >
      <el-table-column prop="content" label="日志内容" fixed />
      <el-table-column prop="category" label="日志分类" />
      <el-table-column prop="level" label="日志等级" />
      <el-table-column prop="time" label="日志时间" />
    </el-table>
    <el-pagination
      class="pager"
      layout="prev, pager, next"
      prev-text="上一页"
      next-text="下一页"
      background
      :page-size="pageSize"
      :total="total"
      :hide-on-single-page="true"
      @current-change="fetchData"
    />
  </div>
</template>

<script>
import { getLogList } from "@/api/table";

export default {
  props: {
    viewIndex: {
      type: Number,
      default: 0,
    },
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      list: [],
      pageSize: 9,
      total: 0,
      listLoading: false,
      activeBtn:1
    };
  },
  watch: {
    viewIndex() {
      this.fetchData();
    },
  },
  created() {
    this.fetchData();
  },
  methods: {
    btnClick:function(index){
      this.activeBtn = index
    },
    fetchData() {
      this.listLoading = false;
      getLogList().then((response) => {
        this.list = response.data.items;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    setCellStyle({ row, column, rowIndex, columnIndex }) {
      let style = "height: 64px;";

      if (columnIndex === 0) {
        style += "padding-left: 49px;";
      }

      if (rowIndex % 2 !== 0) {
        style += "background-color: #E3E6EF;";
      } else {
        style += "background-color: #F5F7FA;";
      }

      return style;
    },
    setHeaderCellStyle({ row, column, rowIndex, columnIndex }) {
      let style = "height: 64px; color: #fff; background-color: #5C6789;";

      if (columnIndex === 0) {
        style += "padding-left: 49px;";
      }

      return style;
    },
  },
};
</script>

<style lang="scss" scoped>
.log-content-container {
  margin-top: 32px;
  padding: 32px;
  background-color: #fff;
  border-radius: 16px;

  .log-title {
    font-size: 24px;
    line-height: 24px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    .btnGroup{
      padding: 2px 4px;
      background: #F5F7FA;
      .btnItem{
        background: #F5F7FA;
        border-radius: 4px;
        border: none;
      }
      .active{
        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.06);
background: #ffffff;
      }
    }
  }

  .log-table {
    margin-top: 24px;
    border-radius: 8px;
  }

  ::v-deep .pager {
    margin-top: 40px;
    text-align: center;

    .btn-prev,
    .btn-next {
      height: 32px;
      line-height: 32px;
      background-color: transparent;
    }

    .el-pager li {
      width: 32px;
      height: 32px;
      line-height: 32px;
      border-radius: 8px;
      background-color: #fff;
      border: 1px solid #e4e8f0;

      &.active:not(.disabled) {
        background-color: #6f81bc;
      }
    }
  }
}
</style>
