<template>  
  <div class="logsManagement">
    <!-- 路径面包屑 -->
    <bread-crumb :bread-crumb-list="breadCrumbList"></bread-crumb>
    <!-- 搜索 -->
    <search-form :search-form="searchForm" @submit="logSearch"></search-form>
    <div class="logsManagementBody" v-loading.body="isLoadingTableData">
      <!-- 信息列表 -->
      <log-information :log-information-data="logInformationData"></log-information>

      <!-- 列表 -->
      <table-form 
        :colData="colData" 
        :data="tableData" 
        :colWidth="120"
        :row-key="rowKey"
        :max-height="400"
        :submiting="submiting"
        :isShowOper="isShowOper"
        border 
        :sortable="sortable"
        >
        <el-table-column
          v-for="item in colData"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :align="item.align"
          :sortable="item.sortable || sortable">
        </el-table-column>
      </table-form>

      <!-- 分页 -->
      <el-row type="flex" justify="end" style="margin-top:10px;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-row>
    </div>
  </div>
</template>

<script>
  import BreadCrumb from '@/components/BreadCrumb.vue'
  import SearchForm from './otherComponent/SearchForm2.vue'
  import LogInformation from './otherComponent/LogInformation.vue'
  import TableForm from '@/components/Table.vue'

  import Api from '@/api/index.js'

  export default{ 
    name: 'LogsManagement',
    components: {
      BreadCrumb,
      SearchForm,
      LogInformation,
      TableForm
    },
    data () { 
      return {
        // 路径
        breadCrumbList: [], 
        // 搜索
        searchForm: {
          inputLabel: '',
          inputPlaceholder: ''
        },
        userName: '',
        gradeId: '',
        startDate: '',
        endDate: '',
        // 信息板块
        logInformationData: { 
          loginSum: '0',
          loginUserSum: '0',
          maxLoginUserName: 'xxx',
          maxLoginUserSum: '0'
        },
        // 表格及分页
        colData: [],
        tableData: null,
        rowKey: 'id',
        isLoadingTableData: false,
        submiting: false,
        sortable: true,
        isShowOper: false,

        pageSize: 15,
        pageSizes: [15, 30, 50, 100],
        currentPage: 1,
        total: null
      }
    },
    mounted () { 
      this.init()
    },
    methods: { 
      init () { 
        // 路径
        this.breadCrumbList = [
          {title: '服务监测'},
          {title: '日志管理'}
        ]
        this.colData = [
          {prop: 'logId', label: '序号', width: 110, sortable: true, align: 'center'},
          {prop: 'loginName', label: '用户名', sortable: true, align: 'center'},
          {prop: 'username', label: '姓名', sortable: true, align: 'center'},
          {prop: 'organguname', label: '所属分公司', sortable: true, align: 'center'},
          {prop: 'createTime', label: '登录时间', width: 180, sortable: true, align: 'center'},
          {prop: 'code', label: '登录机器名', sortable: true, align: 'center'},
          {prop: 'ipAddress', label: '登录IP', sortable: true, align: 'center'}
        ]
        this.searchForm = { 
          inputLabel: '账户名',
          inputPlaceholder: '请输入登录名'
        }
        // this.getLogsManagementImformation()
      },
      // 日志管理——头部信息 
      getLogsManagementImformation () {
        Api.getLogsManagementImformation(this.userName, this.gradeId, this.startDate, this.endDate)
        .then(data => {
            if (data.status === 0) { 
              if (data.result !== null) {
                this.logInformationData = data.result
                this.total = data.result.loginSum
              } else { 
                this.logInformationData = { 
                  loginSum: '0',
                  loginUserSum: '0',
                  maxLoginUserName: 'xxx',
                  maxLoginUserSum: '0'
                }
                this.total = 0
                this.$message({
                  type: 'warning',
                  message: '请求数据为空'
                })
              }
            } else { 
              this.$message({
                type: 'error',
                message: '请求数据错误'
              })
            }
          })
          .catch(res => {
            this.$message({
              type: 'error',
              message: '请求数据失败'
            })
          })
      },
      // 日志管理——搜索查询 
      getLogsManagementSearch () { 
        this.isLoadingTableData = true
        Api.getLogsManagementSearch(this.currentPage, this.pageSize, this.userName, this.gradeId, this.startDate, this.endDate)
        .then(data => {
            this.isLoadingTableData = false
            if (data.status === 0) { 
              this.tableData = data.result
            } else { 
              this.$message({
                type: 'error',
                message: '请求数据错误'
              })
            }
          })
          .catch(res => {
          this.isLoadingTableData = false
            this.$message({
              type: 'error',
              message: '请求数据失败'
            })
          })
      },
      // 查询
      logSearch (data) {
        this.currentPage = 1
        this.userName = data[0]

        this.gradeId = data[1]
        
        if (data[2].length !== 0) { 
          this.startDate = data[2][0]
          this.endDate = data[2][1]
        } else { 
          this.startDate = ''
          this.endDate = ''
        }
        this.getLogsManagementImformation()
        this.getLogsManagementSearch()
      },
      // 分页操作
      handleSizeChange (val) {
        this.pageSize = val
        if (this.tableData !== null) { 
          this.getLogsManagementSearch()
        }
      },
      handleCurrentChange (currentPage) {
        this.currentPage = currentPage
        if (this.tableData !== null) { 
          this.getLogsManagementSearch()
        }
      }
    }
  }
</script>

<style lang="scss"> 
  .logsManagement { 
    width: 100%;
  } 
</style>
