<template>
  <div class="sysLog JNPF-flex-main">
    <el-row class="JNPF-common-search-box" :gutter="16">
      <el-form @submit.native.prevent>
        <el-col :span="6">
          <el-form-item label="关键词">
            <el-input v-model="keyword" placeholder="请输入关键词查询" clearable
              @keyup.enter.native="search()" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="类型">
            <el-select v-model="loginType" placeholder="请选择类型" clearable>
              <el-option label="登录" :value="0"></el-option>
              <el-option label="退出" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="状态">
            <el-select v-model="loginMark" placeholder="请选择状态" clearable>
              <el-option label="成功" :value="1"></el-option>
              <el-option label="失败" :value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <template v-if="showAll">
          <el-col :span="6">
            <el-form-item label="时间">
              <el-date-picker v-model="pickerVal" type="datetimerange" start-placeholder="开始时间"
                end-placeholder="结束时间" value-format="timestamp" :editable="false" clearable
                :default-time="['00:00:00', '23:59:59']" align="right">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </template>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search()">
              {{$t('common.search')}}
            </el-button>
            <el-button icon="el-icon-refresh-right" @click="reset()">
              {{$t('common.reset')}}
            </el-button>
            <el-button type="text" icon="el-icon-arrow-down" @click="showAll=true"
              v-if="!showAll">展开</el-button>
            <el-button type="text" icon="el-icon-arrow-up" @click="showAll=false" v-else>
              收起</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="JNPF-common-head">
      <div>
        <el-button type="danger" icon="el-icon-delete" @click="handleDel">删除</el-button>
        <el-link type="danger" :underline="false" style="margin-left:10px" @click="batchDel">
          一键清空</el-link>
      </div>
    </div>
    <JNPF-table v-loading="listLoading" :data="loginLogData" tooltip-effect="dark" has-c
      @selection-change="handleSelectionChange">
      <el-table-column prop="loginType" label="类型">
        <template slot-scope="scope">
          <div class="login-type-box">
            <span class="circle-box"
              :class="scope.row.loginType == 0 ? 'circle-box-primary' : 'circle-box-error'" />
            {{ scope.row.loginType == 0 ? '登录' : '退出' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="creatorTime" label="时间" :formatter="jnpf.tableDateFormat"
        width="140" />
      <el-table-column prop="userName" label="用户" />
      <el-table-column prop="ipAddress" label="IP地址" />
      <el-table-column prop="ipAddressName" label="地点" />
      <el-table-column prop="browser" label="浏览器" />
      <el-table-column prop="platForm" label="操作系统" />
      <el-table-column prop="requestDuration" label="耗时(毫秒)" show-overflow-tooltip />
      <el-table-column prop="loginMark" label="状态">
        <template slot-scope="scope">
          <el-tag :type="scope.row.loginMark == 1 ? 'success' : 'danger'">
            {{ scope.row.loginMark == 1 ? '成功' : '失败' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="abstracts" label="操作说明" width="120" show-overflow-tooltip />
    </JNPF-table>
    <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
      @pagination="initData" />
  </div>
</template>
<script>
import { LogList } from '@/api/permission/userSetting'
import { delLog, deleteAll } from '@/api/system/log'
export default {
  name: 'sysLog',
  data() {
    return {
      btnLoading: false,
      showAll: false,
      keyword: '',
      loginMark: '',
      loginType: '',
      startTime: '',
      endTime: '',
      loginLogData: [],
      multipleSelection: [],
      total: 0,
      listLoading: true,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: 'desc'
      },
      pickerVal: []
    };
  },
  created() {
    this.initData()
  },
  methods: {
    initData() {
      let category = 1
      this.listLoading = true
      let data = {
        ...this.listQuery,
        keyword: this.keyword,
        startTime: this.startTime,
        endTime: this.endTime,
        loginMark: this.loginMark,
        loginType: this.loginType,
        category
      }
      LogList(data).then(res => {
        this.loginLogData = res.data.list
        this.total = res.data.pagination.total
        this.listLoading = false
        this.btnLoading = false
      })
    },
    handleSelectionChange(val) {
      const res = val.map(item => item.id)
      this.multipleSelection = res
    },
    search() {
      this.btnLoading = true
      if (this.pickerVal && this.pickerVal.length) {
        this.startTime = this.pickerVal[0]
        this.endTime = this.pickerVal[1]
      } else {
        this.startTime = ''
        this.endTime = ''
      }
      this.initData()
    },
    batchDel() {
      if (!this.loginLogData.length) return
      this.btnLoading = true
      this.$confirm('此操作会将所有日志删除，是否继续?', '提示', {
        type: 'warning'
      }).then(() => {
        deleteAll().then(res => {
          this.$message({
            type: 'success',
            message: res.msg,
            duration: 1500,
            onClose: () => {
              this.initData()
            }
          })
        }).catch(() => {
          this.btnLoading = false
        })
      }).catch(() => {
        this.btnLoading = false
      })
    },
    handleDel() {
      if (!this.multipleSelection.length) {
        this.$message({
          type: 'error',
          message: '请选择一条数据',
          duration: 1500,
        })
        return
      }
      const data = {
        ids: this.multipleSelection
      }
      this.$confirm('您确定要删除这些数据吗, 是否继续?', '提示', {
        type: 'warning'
      }).then(() => {
        this.btnLoading = true
        delLog(data).then(res => {
          this.$message({
            type: 'success',
            message: res.msg,
            duration: 1500,
            onClose: () => {
              this.initData()
            }
          })
        }).catch(() => { this.btnLoading = false })
      }).catch(() => { this.btnLoading = false })
    },
    reset() {
      this.btnLoading = true
      this.keyword = ''
      this.list = []
      this.pickerVal = []
      this.startTime = ''
      this.endTime = ''
      this.loginMark = ''
      this.loginType = ''
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: 'desc'
      }
      this.initData()
    }
  }
}
</script>
<style lang="scss" scoped>
.sysLog {
  height: 100%;
  overflow: hidden;
  >>> .el-tabs__nav-scroll {
    padding-top: 0 !important;
  }
  .JNPF-el_tabs {
    height: calc(100% - 60px);
    overflow: hidden;
  }
  >>> .el-tabs__content {
    overflow: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    .el-tab-pane {
      height: auto !important;
      flex: 1;
    }
  }
  .JNPF-common-search-box {
    margin-bottom: 0;
  }
}
</style>