<template>
  <div class="search-bar">
    <div class="form-control sm cal">
      <VueDatePicker
        InlineOptions
        placeholder="시작일"
        locale="ko"
        :enable-time-picker="false"
        :format="formatDate"
        v-model="search['startDt']"
      />
    </div>
    <div class="mark">-</div>
    <div class="form-control sm cal">
        <VueDatePicker
        InlineOptions
        placeholder="종료일"
        locale="ko"
        :enable-time-picker="false"
        :format="formatDate"
        v-model="search['endDt']"
      />
    </div>
    <select
      name="selectType"
      id="selectType"
      class="form-select sm"
      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="form-control sm"
      v-model="search['searchText']"
      v-on:keyup.enter="fnViewList"
      placeholder="검색명을 입력하세요"
    />
    <button class="btn sm ico-before ico-sch" @click="fnViewList">
      검색
    </button>
  </div>
  <div class="content-zone">
    <div class="content">
      <div class="scroll">
        <div class="tbl-wrap">
          <ListTable
            :colgroup="colgroup"
            :thead="thead"
            :tbody="tbody"
            :className="'data'"
          />
        </div>
      </div>
    </div>
  </div>
  <div class="btn-wrap list">
    <div></div>
    <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─────┘

    // 날짜포맷
    formatDate(date) {
      const year = date.getFullYear();
      const month = ('00' + (date.getMonth() + 1)).slice(-2);
      const day = ('00' + date.getDate()).slice(-2);
      return `${year}-${month}-${day}`;
    }

  },
};
</script>
