<template>
  <!-- SUB Contents -->
  <div class="ui--content-wrapper">
    <sdl-breadcrumb></sdl-breadcrumb>
    <!-- Total count & buttons -->
    <div class="ui--list-heading clearfix">
      <span class="ui--text-total"><strong>Total</strong> {{ $filters.numberFormat(loggerList.length) }}</span>
    </div>
    <!-- Total count & buttons -->
    <table class="table table-bordered ui--table">
      <colgroup>
        <col style="width:30%"/>
        <col style="width:10%"/>
        <col style="width:60%"/>
      </colgroup>
      <thead>
        <tr>
          <th scope="col">Logger Name</th>
          <th scope="col">Level</th>
          <th scope="col">Appenders</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="logger in loggerList" :key="logger.loggerName">
          <td class="text-center">{{ logger.loggerName }}</td>
          <td class="text-center">
            <label>
              <select class="form-select" v-model="logger.level" v-on:change="changeLevel(logger)">
                <option v-for="level in loggerLevelList" :key="level" :value="level">
                  {{ level }}
                </option>
              </select>
            </label>
          </td>
          <td class="text-center" >
            <div v-for="(value, index) in logger.appenderNameList" :key="'appendName' + index">{{ value }}</div>
          </td>
        </tr>
      </tbody>
    </table>
    <!-- // TABLE  Area-->
  </div>
</template>

<script>
import axios from 'axios';
import { SDLUtil } from '@/utils';

export default {
  data() {
    return {
      loggerList: [],
      loggerLevelList: ['OFF', 'DEBUG', 'INFO', 'WARN', 'FATAL', 'ERROR'],
    };
  },
  methods: {
    getLoggerList() {
      SDLUtil.showLoadingBar(true);
      axios.get(`${SDLUtil.API_URL}/loggers`)
        .then(({ data }) => {
          this.loggerList = data;
          SDLUtil.showLoadingBar(false);
        })
        .catch(err => {
          console.error(err);
          SDLUtil.showLoadingBar(false);
        });
    },
    changeLevel(logger) {
      SDLUtil.showLoadingBar(true);
      axios.put(`${SDLUtil.API_URL}/logger/change-level/${logger.loggerName}/${logger.level}`)
        .then(() => {
          SDLUtil.showLoadingBar(false);
          // SDLUtil.alert('sdl.common.message.updated');
        })
        .catch(err => {
          console.error(err);
          SDLUtil.showLoadingBar(false);
          SDLUtil.errorAlert(err);
        });
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.getLoggerList();
    });
  },
};
</script>

<style scoped></style>
