<template>
  <div class="content">
    <div class="admin-page-title point-font2 mb30">
      <p>로그인 이력</p>
    </div>
    <div class="search-bar mb15 pd30 background radius">
      <div class="flex align-center  no-gutters">
        <div class="gd-2">
          <select name="" id="" class="full-select" v-model="search.authrtId">
            <option value="">선택하세요.</option>
            <option v-for="(author, idx) in authorList" :key="idx" :value=author.authrtId>{{ author.authrtNm }}</option>
          </select>
        </div>
        <div class="gd-4">
          <div class="flex justify-center align-center no-gutters">
            <div class="gd-5">
              <input type="date" name="startDate" id="startDate" class="full-input" v-model="search.startDt" :max="search.endDt"/>
            </div>
            <div class="pd10">
              -
            </div>
            <div class="gd-5">
              <input type="date" name="endDate" id="endDate" class="full-input" v-model="search.endDt" :min="search.startDt" :max="today"/>
            </div>
          </div>
        </div>
        <div class="gd-5">
          <div class="flex align-center">
            <div class="gd-3 pl0">
              <select name="" id="" class="full-select" v-model="search.searchType">
                <option value="id">아이디</option>
              </select>
            </div>
            <div class="gd-9 pl0">
              <input type="text" name="" id="" class="full-input" placeholder="검색어를 입력하세요."
                v-model="search.searchText" @keyup.enter="axiosViewList" />
            </div>
          </div>
        </div>
        <div class="gd-1">
          <button class="large-btn blue-border-btn" @click="axiosViewList">검색</button>
        </div>
      </div>
    </div>
    <div class="table-zone">
      <ListTable :colgroup="colgroup" :thead="thead" :tbody="tbody" :className="'admin-list'" />
    </div>
    <div class="flex justify-center align-center no-gutters">
      <div class="gd-10">
        <PaginationButton
        :className="'admin-pagination'"
        v-model:currentPage="search.currentPage"
        :pagination="search"
        :click="axiosViewList"
        />
      </div>
    </div>
  </div>
</template>

<script>
import ListTable from "../../../component/table/ListTable.vue";
import PaginationButton from "../../../component/pagination/PaginationButton.vue";
import { defaultSearchParams } from "../../../../resources/js/defaultSearchParams";
import queryParams from "../../../../resources/js/queryParams";

// API
import { listProc } from "../../../../resources/api/lgnHstry";

export default {
  mixins: [queryParams],
  components: {
    ListTable: ListTable,
    PaginationButton: PaginationButton,
  },
  data() {
    return {
      colgroup: ["5%", "20%", "15%", "15%", "15%", "15%", "15%"],
      thead: ["NO", "날짜", "아이디", "권한명", "IP", "디바이스", "구분"],
      tbody: [],

      search: { ...defaultSearchParams },

      list: [],
      authorList: [],
      //오늘날짜
      today: this.$today(),
    };
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      this.resotreQueryParams("queryParams");
      this.search.startDt = this.$oneWeekAgo();
      this.search.endDt = this.$today();
      this.search.searchType = "id";
      this.axiosViewList();
    },

    // tbody 생성
    makeTbody() {
      this.tbody = [];
      this.tbody = this.list.map((lgnHstry, idx) => ({
        id:
          this.search.totalRecordCount -
          idx -
          (this.search.currentPage - 1) * this.search.recordSize,
        cntnDt: lgnHstry.cntnDt,
        lgnId: lgnHstry.lgnId,
        authrtNm : lgnHstry.authrtNm,
        cntnIpad: lgnHstry.cntnIpad,
        cntnDvcNm: lgnHstry.cntnDvcNm,
        typeNm:
          lgnHstry.typeNm == "IN"
            ? "로그인"
            : lgnHstry.typeNm == "OUT"
              ? "로그아웃"
              : null,
      }));
    },

    //─────axios─────┐
    // 목록 조회
    async axiosViewList() {
      let data = this.search;

      try {
        const response = await listProc(data);
        this.list = response.data.data.list;
        this.search = response.data.data.pagination;
        this.authorList = response.data.data.author;
        this.makeTbody();
      } catch (error) {
        // alert("에러가 발생했습니다.\n시스템관리자에게 문의하세요.");
        alert(this.$getCmmnMessage('err005'));
      }
    },
    //─────axios─────┘
  },
};
</script>
