<template>
  <div class="wrap">   
    <div class="board-wrap">
      <div>
        <h2 class="page-title">데이터 수집로그</h2>
      </div>
      <hr class="margin">
      <div class="search-wrap clear-fix">
        <div class="float-left">
          <select v-model="pagenation.option1" @change="search">
            <option value="false">전체</option>
            <option value="true"> 오류목록 </option>
          </select>
        </div>
        <div class="float-right flex gap">
          <div class="flex gap m-b">
            <label>등록일자</label>
            <input type="date" value-format="yyyy-MM-dd" v-model="pagenation.startDate"/>
            <span> ~ </span>
            <input type="date" value-format="yyyy-MM-dd" v-model="pagenation.endDate"/>
          </div>
          <div class="flex gap">
            <select v-model="pagenation.searchType">
              <option value="null" disabled>검색조건</option>
              <option value="user_nm">업체명</option>
              <option value="api_key">API_KEY</option>
            </select>
            <input type="search" placeholder="검색어를 입력 해주세요." v-model="pagenation.searchValue" @keyup.enter="search"/>
            <button type="button" class="green-btn" @click="search">검색</button>
          </div>
        </div>
      </div>
      <div style="min-height: 500px;background: #f7f6f6;">
        <table class="pc">
          <colgroup>
            <col style="width: 5%;">
            <col style="width: 20%;">
            <col style="width: 10%;">
            <col style="width: 10%;">
            <col style="width: 15%;">           
            <col style="width: 20%;">
            <col style="width: 20%;">          
          </colgroup>
          <thead>
            <tr>
              <th>No</th>
              <th>노드ID(방향)</th>
              <th>업체명</th>
              <th>오류발생여부</th>
              <th>호출시간</th>
              <th>메세지</th>
              <th>접속IP</th>             
            </tr>
          </thead>
          <tbody>            
            <tr v-for="(item, idx) in apiLogList" :key="idx"  @click="selectApiLog = item"  v-bind:class="{'select_row' : (item.call_dt == selectApiLog.call_dt) }">
              <td data-title="NO">{{ pagenation.totalRow -  ((pagenation.currentPage ) * pagenation.perPage) + ( pagenation.perPage - idx) }}</td>
              <td data-title="ID">{{ item.node_id }}({{change_code(item.crslk_az)}})</td>
              <td data-title="이름">{{ item.user_nm }}</td>
              <td data-title="오류발생여부">{{ item.err_yn }}</td>
              <td data-titel="호출시간">{{ item.call_dt}}</td>
              <td data-title="메세지">{{ item.msg }}</td>           
              <td data-title="접속IP">{{ item.cntn_ip }}</td>         
            </tr>
            <tr v-if="apiLogList.length == 0">
                 <td data-title="NO" colspan="6">조회된 데이터가 없습니다.</td>
            </tr>
          </tbody>
        </table>       
      </div>
      <div class="bottom-wrap">
        <PaginationButton
          v-model:currentPage="pagenation.currentPage"
          :per-page="pagenation.perPage" :total-count="pagenation.totalRow" :max-range="5"
          :click="search" />        
      </div>

      <div>
        <div class="sub-title-wrap" style="margin-bottom: 30px;">
          <h3 class="sub-title">로그 상세정보 </h3>       
        </div>
        <div >
          <table>
            <colgroup>
              <col style="width: 25%;">
              <col style="width: 25%;">
              <col style="width: 25%;">
              <col style="width: 25%;">            
            </colgroup>
            <tbody><div class=""></div>
              <tr>
                <th >노드</th>
                <td>{{ selectApiLog.node_id }}({{change_code(selectApiLog.crslk_az)}})</td>
                <th>업체명</th>
                <td>{{ selectApiLog.user_nm }}</td>
              </tr>
              <tr>
                <th>오류발생여부</th>
                <td>{{ selectApiLog.err_yn }}</td> 
                <th>호출시간</th>
                <td>{{ selectApiLog.call_dt}}</td>            
              </tr>
              <tr>
                <th>메세지</th>           
                <td>{{ selectApiLog.msg }}</td>
                <th>수신내용</th>
                <td>{{ selectApiLog.contents }}</td>
              </tr>           
            </tbody>
          </table>
        </div>     
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import PaginationButton from '../../component/pagination/PaginationButton.vue';
import COMMON_UTIL from '../../../resources/js/commonUtil.ts';

export default {
  data: () => {
    return {
      pagenation: {
        currentPage: 1,
        perPage: 10,
        searchType: null,
        searchValue: null,
        startDate : null,
        endDate : null,
        option1 : false,
        totalRow : 0,
        api_key : '',
        node_id : '',
        call_dt : null,
        reg_dt : '',
        err_yn : false,
        msg : '',
      },      
      apiLogList: [],
      selectApiLog : {},
      userIdx: 0
    };
  },
  methods: {
    //사용자 목록 조회
    search: function () {
      const vm = this;
      axios({
        url: '/getApiRequestLog.json',
        method: 'post',
        headers:{
          'Content-Type': "application/json; charset=UTF-8",
        },
        data: vm.pagenation
      }).then(function(response) {
        console.log("userSelectList - response : ", response.data);
        vm.apiLogList = response.data.apiLogList;
        vm.pagenation = response.data.pagenation;
      }).catch(function (error) {
        console.log("userSelectList - error : ", error);
        alert('사용자 목록 조회 오류, 관리자에게 문의해주세요.');
      })
    },

    // 전화번호 '-' 추가 후 출력
    HyphenMinus: function (telno) {
      return COMMON_UTIL.HyphenMinus(telno);
    },

    //날짜 시,분,초 자르기
    yyyymmdd: function (date) {
      return COMMON_UTIL.yyyymmdd(date);
    },

    change_code : function(v)
    {    
      let result_val = '전체';

      if(v==null) v = 0;

      if(v == 10){
        result_val = '북';
      }else if( v == 20){
        result_val = '동';
      }else if( v == 30){
        result_val = '남'; 
      }else if( v == 40){
        result_val = '서';
      }else if( v == 50){
        result_val = '북동';
      }else if( v == 60){
        result_val = '남동';
      }else if( v == 70){
        result_val = '남서';
      }else if( v == 80){
        result_val = '북서';
      }
      return result_val;
    }  
  },

  watch: {},
  filters : {
    crlsk : function(v){

      console.log(value);
      let result_val = '전체';
      if(v == 10){
        result_val = '북';
      }else if( v == 20){
        result_val = '동';
      }else if( v == 30){
        result_val = '남'; 
      }else if( v == 40){
        result_val = '서';
      }else if( v == 50){
        result_val = '북동';
      }else if( v == 60){
        result_val = '남동';
      }else if( v == 70){
        result_val = '남서';
      }else if( v == 80){
        result_val = '북서';
      }
      return result_val;
    } 
  },
  computed: {},
  components: {
    'PaginationButton':PaginationButton,
  },
  mounted() {   
    this.search();
  },
};
</script>

<style scoped>
@media all and (max-width: 479px) {
  
  .board-wrap{padding:  0 1rem;}
  .float-right{display: flow-root; margin: 2rem 0 1rem 0}
  .tab-wrap ul{justify-content: center}
  .tab{width: 16rem !important;}
  .wrap{width: -webkit-fill-available !important; margin: 20px auto !important;}
.mobile{display: block !important;}
.pc{display: none;}
}
.mobile{display: none;}
.wrap {
  width: 155rem;
  margin: 100px auto;
}

.tab-wrap {
  margin-bottom: 30px;
}

.tab-wrap ul {
  display: flex;
  gap: 2rem;
}

.tab {
  display: inline-block;
  width: 20rem;
  height: 3rem;
  line-height: 3rem;
  text-align: center;
  border-radius: 5px;
  background: #fff;
  color: #949292;
  border: 1px solid #949292;
}

.tab.active {
  background: #13833b;
  color: #fff;
  border-color: #13833b;
}

.search-wrap {
  margin-bottom: 15px;
}

.search-wrap input,
.search-wrap select {
  height: 30.5px;
  padding: 5px; 
  border-radius: 3px;
  border: 1px solid #949292;
}

.float-left {
  float: left;
  align-items: flex-start;
}

.float-right {
  float: right;
  align-items: flex-start;
}

.clear-fix::after {
  content: "";
  display: block;
  clear: both;
}

.search-wrap .float-right form>*:not(:last-child) {
  margin-right: 1rem;
}

h2.page-title {
  font-size: 24px;
}

hr.margin {
  margin: 30px 0;
}

table {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}

th,
td {
  border-left: none;
  border-right: none;
}

table th {
  padding: 15px 0;
  color: #fff;
  background-color: #13833b;
}

table td {
  padding: 15px 0;
  border-bottom: 1px solid #e5e5dd;
}

table tr:nth-child(odd) {
  background-color: #f7f6f6;
}

table tr:nth-child(even) {
  background-color: #fdfdf2;
}

.bottom-wrap {
  position: relative;
  padding: 1rem 0;
}

.pg-wrap {
  text-align: center;
}

.pg-item {
  display: inline-block;
  padding: 10px;
  color: #949292;
}

.pg-item.prev,
.pg-item.next,
.pg-item.active {
  color: #13833b;
}

.btn-2 {
  display: inline-block;
  padding: 0.3rem 2rem;
  font-size: 13.333px;
}

.green-btn {
    background: #13833b;
    border: 0;
    border-radius: 5px;
    color: #fff;
    height: 30.5px;
    padding: 5px;
    width: 75px;
}

.btn-wrap {
  position: absolute;
  right: 0;
  top: 1.5em;
  z-index: 10;
}

.select_row{
    background: #ffbe5f !important;
    color: white;
}
</style>