<template>
  <div class="log-wrap">
    <el-card>
      <el-input v-model="queryForm.account" size="small" :placeholder="$t('system.log.account')" style="width: 200px;" />
      <el-input
        v-model="queryForm.userName"
        size="small"
        :placeholder="$t('system.log.userName')"
        style="width: 200px;margin-left: 5px;"
      />
      <el-select
        v-model="queryForm.type"
        clearable
        size="small"
        :placeholder="$t('system.log.type')"
        style="width: 150px;margin-left: 5px;"
      >
        <el-option v-for="type in typeList" :key="type.value" :label="type.label" :value="type.value" />
      </el-select>
      <el-input
        v-model="queryForm.log"
        size="small"
        :placeholder="$t('system.log.log')"
        style="width: 200px;margin-left: 5px;"
      />
      <el-button size="small" type="primary" :loading="searchBtnLoading" style="margin-left: 10px;" @click="search">
        {{ $t('common.btn.search') }}
      </el-button>
    </el-card>
    <el-card style="margin-top: 10px;">
      <el-table v-loading="searchBtnLoading" size="small" :data="logList" border fit highlight-current-row>
        <el-table-column :label="$t('system.log.account')" prop="account" align="center" />
        <el-table-column :label="$t('system.log.userName')" prop="userName" align="center" />
        <el-table-column :label="$t('system.log.type')" prop="type" align="center">
          <template slot-scope="scope">
            <el-tag :type="typeFilter(scope.row.type)">{{ typeList[scope.row.type].label }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column :label="$t('system.log.ip')" prop="ip" align="center" />
        <el-table-column :label="$t('system.log.log')" prop="description" align="center">
          <template slot-scope="scope" v-html="println(scope.row.log)">
            <div style="text-align: left;" v-html="println(scope.row.log)" />
            <el-button
              v-if="showMore(scope.row.log)"
              style="float: left"
              type="text"
              size="small"
              @click="lookMore(scope.row.log)"
            >查看更多
            </el-button>
          </template>
        </el-table-column>
        <el-table-column :label="$t('system.log.time')" align="center">
          <template slot-scope="scope">
            {{ scope.row.createTime }}
          </template>
        </el-table-column>

      </el-table>
      <el-pagination
        class="pagination"
        background
        :current-page.sync="queryForm.pageNum"
        layout="total, prev, pager, next"
        :total="total"
        @current-change="changePage"
      />
    </el-card>

    <el-dialog :close-on-click-modal="false" :visible.sync="lookMoreDlgVisible" width="30%">
      <div style="max-height: 350px;overflow: auto;" v-html="lookMoreLog" />
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="lookMoreDlgVisible = false">{{ $t('common.btn.ok') }}</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import { getLogs } from '../../../api/system/log'

export default {
  name: 'LogManagement',
  data() {
    return {
      logList: [],
      total: 0,
      queryForm: {
        account: null,
        userName: null,
        type: null,
        log: null,
        pageNum: 1
      },
      searchBtnLoading: false,
      lookMoreLog: null,
      lookMoreDlgVisible: false
    }
  },
  computed: {
    typeList: function() {
      return [
        {
          value: 0,
          label: this.$t('system.log.types.login')
        },
        {
          value: 1,
          label: this.$t('system.log.types.add')
        },
        {
          value: 2,
          label: this.$t('system.log.types.modify')
        },
        {
          value: 3,
          label: this.$t('system.log.types.delete')
        }
      ]
    }
  },
  mounted() {
    this.search()
  },
  methods: {
    search() {
      this.queryForm.pageNum = 1
      this.getLogs(this.queryForm)
    },
    changePage(page) {
      this.queryForm.pageNum = page
      this.getLogs(this.queryForm)
    },
    getLogs(data) {
      this.searchBtnLoading = true
      getLogs(data).then(res => {
        this.logList = res.data.list
        this.total = res.data.total
        this.searchBtnLoading = false
      }, () => {
        this.searchBtnLoading = false
      })
    },
    typeFilter(status) {
      switch (status) {
        case 0:
          return 'green'
        case 1:
          return 'success'
        case 2:
          return 'warning'
        case 3:
          return 'danger'
      }
    },
    println(log) {
      const logs = log.split('\n')
      let logHtml = ''
      for (let i = 0; i < logs.length; i++) {
        if (logs[i].length > 100) {
          logHtml += '<p style="margin: 1px;">' + logs[i].substr(0, 100) + '...' + '</p>'
        } else {
          logHtml += '<p style="margin: 1px;">' + logs[i] + '</p>'
        }
        if (i >= 4) {
          break
        }
      }
      return logHtml
    },
    showMore(log) {
      let j = 0
      let flag = false
      const logs = log.split('\n')
      for (let i = 0; i < logs.length; i++) {
        if (logs[i].length > 100) {
          flag = true
          break
        } else {
          if (logs[i] && logs[i] !== '') {
            j++
          }
        }
        if (j > 4) {
          return true
        }
      }
      return flag
    },
    lookMore(log) {
      const logs = log.split('\n')
      let logHtml = ''
      for (let i = 0; i < logs.length; i++) {
        if (logs[i] && logs[i] !== '') {
          logHtml += '<p style="margin: 1px;">' + logs[i] + '</p>'
        }
      }
      this.lookMoreLog = logHtml
      this.lookMoreDlgVisible = true
    }
  }
}
</script>
<style lang="scss" scoped="">
.log-wrap {
  .log-search-form {
    .el-input {
      width: 150px;
    }
  }

  .filter-panel {
    .el-form-item {
      margin-bottom: 0;
    }
  }

}
</style>
