<template>
  <div class="content">
    <div class="admin-page-title point-font2 mb30">
      <p>로그인 이력</p>
    </div>
    <div class="search-bar mb15">
      <div class="flex justify-end align-center no-gutters">
        <div class="gd-3 flex justify-end align-center">
          <div class="gd-5 pl0">
            <VueDatePicker
              time-picker-inline
              placeholder="시작일"
              locale="ko"
              v-model="search['startDt']"
            />
          </div>
          <div class="pd10">-</div>
          <div class="gd-5">
            <VueDatePicker
              time-picker-inline
              placeholder="종료일"
              locale="ko"
              v-model="search['endDt']"
            />
          </div>
        </div>
        <div class="gd-4 mr10">
          <div class="border">
            <select
              name="selectType"
              id="selectType"
              class="border-none gd-2"
              v-model="search['searchType']"
            >
              <option value="">전체</option>
              <option
                v-for="(item, idx) in codeList"
                :key="idx"
                :value="item.cd"
              >
                {{ item.cdNm }}
              </option>
            </select>
            <input
              type="text"
              class="full-input border-none gd-10 condition-input"
              v-model="search['searchText']"
              v-on:keyup.enter="fnViewList"
              placeholder="검색명을 입력하세요"
            />
          </div>
        </div>
        <div class="gd-1">
          <button class="large-btn blue-border-btn" @click="fnViewList">
            검색
          </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="fnViewList"
        />
      </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";

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

export default {
  components: {
    ListTable: ListTable,
    PaginationButton: PaginationButton,
  },
  data() {
    return {
      colgroup: ["5%", "25%", "10%", "10%", "25%", "25%"],
      thead: ["NO", "날짜", "구분", "아이디", "IP", "운영체제"],
      tbody: [],

      search: { ...defaultSearchParams },

      list: [],
      pagination: {},
    };
  },
  created() {
    this.fnViewList();
  },
  methods: {
    // 조회(목록)
    fnViewList() {
      let data = this.search;
      if (this.search["startDt"] != null && this.search["startDt"] != "") {
        this.search["startDt"] = this.dateFormat(
          new Date(this.search["startDt"])
        );
      }
      if (this.search["endDt"] != null && this.search["endDt"] != "") {
        this.search["endDt"] = this.dateFormat(new Date(this.search["endDt"]));
      }

      this.axiosViewList(data);
    },

    // 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,
        lgnType:
          lgnHstry.lgnType == "0"
            ? "관리자"
            : lgnHstry.lgnType == "1"
            ? "사용자"
            : null,
        lgnId: lgnHstry.lgnId,
        cntnIp: lgnHstry.cntnIp,
        cntnOperSys: lgnHstry.cntnOperSys,
      }));
    },

    // 날짜 형식 변경
    dateFormat(date) {
      // console.log(date);
      return (
        date.getFullYear() +
        "-" +
        (date.getMonth() + 1 < 9
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) +
        "-" +
        (date.getDate() < 9 ? "0" + date.getDate() : date.getDate())
      );
    },

    //─────axios─────┐
    // 목록 조회
    async axiosViewList(data) {
      try {
        const response = await listProc(data);
        this.list = response.data.data.list;
        this.search = response.data.data.pagination;
        this.codeList = response.data.data.codeList;
        this.makeTbody();
      } catch (error) {
        alert("에러가 발생했습니다.\n시스템관리자에게 문의하세요.");
      }
    },
    //─────axios─────┘
  },
};
</script>
