<template>
  <el-row>
    <el-row>
      <el-form ref="searchForm" :model="searchForm" label-width="80px">
        <search-white-board :show-more="true" @search="search">
          <div slot="base">
            <el-row style="line-height: 40px; text-align: right;">
              <el-col :span="2"><label class="search-label">昵称</label></el-col>
              <el-col :span="5">
                <el-input v-model.trim="searchForm.username" placeholder="输入昵称搜索" clearable @keyup.enter.native="search" />
              </el-col>
              <el-col :span="2" :offset="1"><label class="search-label">描述</label></el-col>
              <el-col :span="5">
                <el-input v-model.trim="searchForm.remarks" placeholder="输入描述搜索" clearable @keyup.enter.native="search" />
              </el-col>
            </el-row>
          </div>

          <div slot="more">
            <el-row style="line-height: 40px; text-align: right;">
              <el-col :span="2"><label class="search-label">是否删除</label></el-col>
              <el-col :span="5" style="text-align: left;">
                <el-switch v-model="searchForm.isDel" active-color="#13ce66" inactive-color="#ff4949" @change="search" />
              </el-col>
            </el-row>
          </div>
        </search-white-board>
      </el-form>
    </el-row>

    <el-row>
      <white-board>
        <el-row>
          <el-col :span="4" :offset="20" style="text-align: right;">
            <el-button icon="el-icon-refresh" type="primary" plain @click="list">刷新</el-button>
            <el-button icon="el-icon-delete" type="danger" plain @click="cleanLogs">清空</el-button>
          </el-col>
        </el-row>

        <el-tabs v-model="selectedTab" style="width: 100%; margin: 10px 5px;">
          <el-tab-pane name="operation" label="操作日志">
            <operation-log :table-data="tableData" />
          </el-tab-pane>
          <el-tab-pane name="error" label="错误日志">
            <error-log :table-data="tableData" />
          </el-tab-pane>
          <el-tab-pane name="login" label="登录日志">
            <login-log :table-data="tableData" />
          </el-tab-pane>
        </el-tabs>

        <el-row>
          <el-pagination :current-page="searchForm.page" :page-sizes="[10, 20, 50, 100]" :page-size="50" layout="total, sizes, prev, pager, next, jumper" :total="total" small @size-change="changeSizeChange" @current-change="changeCurrentChange" />
        </el-row>
      </white-board>
    </el-row>
  </el-row>
</template>

<script>
import logApi from '@/api/platform/logApi'
import OperationLog from '@/views/platform/monitor/log/tags/operationLog'
import ErrorLog from '@/views/platform/monitor/log/tags/errorLog'
import loginLog from '@/views/platform/monitor/log/tags/loginLog'

export default {
  name: 'LogIndex',
  components: {
    'operation-log': OperationLog,
    'error-log': ErrorLog,
    'login-log': loginLog
  },
  data() {
    return {
      searchForm: {
        username: '',
        remarks: '',
        type: 'INFO',
        isDel: false,
        page: 1,
        size: 50
      },
      total: 0,
      tableData: [],
      selectedTab: 'operation', // 选中的tab
      isAutoChangeUrl: false, // 是否手动更改url参数
      isFromRoute: false, // 是否由路由改变出发的更改tab
      isFromMounted: true // 是否由mounted方法触发的更改tab标签
    }
  },
  watch: {
    selectedTab(val) {
      if (!this.isFromMounted) {
        this.searchForm.page = 1
        if (val === 'operation') {
          this.searchForm.type = 'INFO'
        } else if (val === 'error') {
          this.searchForm.type = 'ERROR'
        } else if (val === 'login') {
          this.searchForm.type = 'LOGIN'
        } else {
          this.searchForm.type = ''
        }
        this.list()
        if (!this.isFromRoute) {
          this.isAutoChangeUrl = true
          this.isFromRoute = false
        }
        this.$router.push(`${this.$route.path}?tab=${val}`)
      } else {
        this.isFromMounted = false
      }
    },
    $route() {
      if (!this.isAutoChangeUrl) {
        this.selectedTab = this.$route.query.tab
        this.isAutoChangeUrl = false
        this.isFromRoute = true
      }
    }
  },
  mounted() {
    // 首次加载页面时判断url是否有tab的参数，有则判断tab并更改选中的tab
    if (typeof (this.$route.query.tab) !== 'undefined') {
      const tab = this.$route.query.tab
      if (tab === 'operation') {
        this.searchForm.type = 'INFO'
      } else if (tab === 'error') {
        this.searchForm.type = 'ERROR'
        this.selectedTab = tab
      } else if (tab === 'login') {
        this.searchForm.type = 'LOGIN'
        this.selectedTab = tab
      } else {
        this.isFromMounted = false
      }
      this.list()
    } else {
      this.isFromMounted = false
      this.list()
    }
  },
  methods: {
    search() {
      this.searchForm.page = 1
      this.list()
    },
    list() {
      this.tableData = []
      logApi.page(this.searchForm).then(data => {
        this.total = data.total
        this.tableData = data.data
      })
    },
    changeSizeChange(val) {
      this.searchForm.size = val
      this.list()
    },
    changeCurrentChange(val) {
      this.searchForm.page = val
      this.list()
    },
    cleanLogs() {
      this.$confirm(`确认清空所有操作日志吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        logApi.delAll(this.searchForm.type).then(() => {
          this.searchForm.page = 1
          this.list()
        })
      }).catch(() => {
      })
    }
  }
}
</script>

<style scoped>
</style>
