<template>
  <div class="app-container">
    <div class="head-container">
      <el-form
        :inline="true"
        class="demo-form-inline"
        label-position="right"
        label-width="90px"
        label-suffix=":"
      >
        <el-form-item label="标签名">
          <el-select
            v-model="query.label"
            clearable
            size="mini"
            placeholder="标签名"
            style="width: 240px;"
          >
            <el-option
              v-for="item in tagList"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="日志级别">
          <el-select
            v-model="query.level"
            clearable
            size="mini"
            placeholder="日志级别"
            style="width: 240px;"
          >
            <el-option
              v-for="item in levelOptions"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="模糊搜索">
          <el-input
            v-model="query.message"
            clearable
            size="mini"
            placeholder="日志内容"
            style="width: 240px;"
          />
        </el-form-item>
        <el-form-item label="链路ID">
          <el-input
            v-model="query.tlogTraceId"
            clearable
            size="mini"
            placeholder="请输入链路ID"
            style="width: 240px;"
          />
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker
            v-model="query.createTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="queryData">
            查询
          </el-button>
          <el-button size="mini" type="danger" @click="toDeleteLog">
            删除
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--表格渲染-->
    <el-card shadow="hover" style="width: 100%" class="log-warpper">
      <div style="width: 100%">
        <div v-for="(log, index) in logs" :key="index">
          <div style="margin-bottom: 5px; font-size: 14px;" v-html="log" />
        </div>
      </div>
    </el-card>
    <!--  分页  -->
    <el-pagination
      :page-sizes="[100, 500, 1000]"
      :page-size.sync="query.size"
      :total="query.total"
      :current-page.sync="query.page"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import luceneOperation from '@/views/lucene/api/lucene'
import { default as AnsiUp } from 'ansi_up'
import CRUD from '@crud/crud'
export default {
  name: 'LuceneLog',
  data() {
    return {
      permission: {
        add: ['admin', 'param:add'],
        edit: ['admin', 'param:edit'],
        del: ['admin', 'param:del']
      },
      levelOptions: [{
        value: 'DEBUG',
        label: 'DEBUG'
      }, {
        value: 'INFO',
        label: 'INFO'
      }, {
        value: 'ERROR',
        label: 'ERROR'
      }, {
        value: 'WARN',
        label: 'WARN'
      }],
      rules: {},
      logs: [],
      tagList: [],
      query: {
        tlogTraceId: '',
        message: '',
        page: 0,
        size: 100,
        total: 0,
        createTime: ''
      }
    }
  },
  created() {
    this.queryData()
    this.getTagList()
  },
  methods: {
    toDeleteLog() {
      luceneOperation.deleteAllLog().then(res => {
        this.crud.notify('删除成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
        this.crud.toQuery()
      }).finally(() => {
        this.crud.notify('删除成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
        this.crud.toQuery()
      })
    },
    getTagList() {
      luceneOperation.getTagName().then(res => {
        this.tagList = res
      })
    },
    handleSizeChange(val) {
      this.query.size = val
      this.queryData()
    },
    handleCurrentChange(val) {
      this.query.page = val
      this.queryData()
    },
    queryData() {
      luceneOperation.getLogData(this.query).then(res => {
        this.logs = [] // 清空
        var ansi_up = new AnsiUp()
        // 数据初始化
        for (const i in res.content) {
          this.logs[i] = ansi_up.ansi_to_html(res.content[i])
        }
        // this.logs = res.content
        this.query.total = res.totalElements
      })
    }
  }
}
</script>

<style scoped>

</style>
