<!--
 * @Author: your name
 * @Date: 2021-11-25 10:42:02
 * @LastEditTime: 2021-11-25 17:19:06
 * @LastEditors: Please set LastEditors
 * @Description: 个人日志
 * @FilePath: \Foshan4A2.0\src\views\dashboard\components\journal.vue
-->
<template>
  <div class="dashboard-journal">
    <div class="journal-title flex">
      <div class="title">个人日志</div>
      <div class="search">
        <Search :isTitle="false" :isSlot="false" />
      </div>
    </div>
    <div class="journal-content">
      <el-table :data="tableData" :row-class-name="tableRowClassName" class="table" style="width: 100%">
        <el-table-column prop="name" label="应用名称"></el-table-column>
        <el-table-column prop="ip" label="IP"></el-table-column>
        <el-table-column prop="cont" label="内容"></el-table-column>
        <el-table-column prop="result" label="结果"></el-table-column>
        <el-table-column prop="date" label="日志时间"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import Search from '@/layout/components/Search'
export default {
  name: 'Journal',
  components: { Search },
  data () {
    return {
      tableData: []
    }
  },
  created () {
    for (let i = 0; i < 10; i++) {
      this.tableData.push({
        name: '名称' + i,
        ip: '192.168.1.1',
        cont: '内容',
        result: '成功',
        date: '2021-11-25 16:59:42'
      })
    }
  },
  methods: {
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {
        return 'warning-row';
      } else {
        return 'success-row';
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-journal {
  min-height: calc(100vh - 395px);
  padding: 32px;
  background: #ffffff;
  box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  .journal-title {
    line-height: 48px;
    .title {
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #303133;
    }
  }
  .journal-content {
    margin-top: 24px;
    ::v-deep .table {
      .el-table__header {
        .has-gutter {
          color: #ffffff;
          .is-leaf {
            height: 64px;
            background: #6e82a7;
            &:first-child {
              border-top-left-radius: 6px;
            }
            &:nth-child(5) {
              border-top-right-radius: 6px;
            }
          }
        }
      }
      td.el-table__cell,
      th.el-table__cell.is-leaf {
        border-bottom: none;
      }
      .el-table__cell {
        padding: 16px 0;
        background: #f5f7fa;
      }
      .el-table__row--level-1 {
        td {
          background: #dfe4ec;
        }
      }
      &::before {
        width: 0;
      }
      tbody tr:hover > td {
        background-color: transparent;
      }
      .warning-row {
        background: #f5f7fa;
      }
      .success-row {
        background: #e3e6ef;
      }
    }
  }
}
</style>