<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-6">
          <div class="flex align-center">
            <div class="gd-3 pl0">
              <select class="full-select" v-model="search['searchType']">
                <option value="">전체</option>
                <option value="popup_ttl">제목</option>
                <option value="mbr_nm">작성자</option>
              </select>
            </div>
            <div class="gd-9 pl0">
              <input
              type="text"
              class="full-input condition-input"
              v-model="search['searchText']"
              v-on:keyup.enter="fnViewList"
              placeholder="검색명을 입력하세요"
            />
            </div>
          </div>
        </div>
        <div class="gd-1">
          <button class="large-btn blue-border-btn" @click="fnViewList">
            검색
          </button>
        </div>
      </div>
    </div>
    <ListTable
      :className="'admin-list'"
      :colgroup="colgroup"
      :thead="thead"
      :tbody="tbody"
      @listClick="fnViewDetail"
    />
    <div class="flex justify-between align-center no-gutters">
      <div class="gd-1"></div>
      <div class="gd-10">
        <PaginationButton
          :className="'admin-pagination'"
          v-model:currentPage="search['currentPage']"
          :pagination="search"
          :click="fnViewList"
        />
      </div>
      <div class="gd-1">
        <button
          class="large-btn blue-btn"
          @click="fnInsert"
          v-if="pageAuth.rdAuthrtYn == 'Y'"
        >
          등록
        </button>
      </div>
    </div>
  </div>
</template>

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

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

export default {
  mixins: [queryParams],
  components: {
    ListTable: ListTable,
    PaginationButton: PaginationButton,
  },
  data() {
    return {
      // 페이지 권한 객체
      pageAuth: JSON.parse(localStorage.getItem("vuex")).pageAuth,

      colgroup: ["5%", "40%", "10%", "15%", "15%", "15%"],
      thead: ["no", "제목", "사용여부", "시작일", "종료일", "작성자"],
      tbody: [],
      search: { ...defaultSearchParams },
      list: [],
      listCnt: 0,
      pagination: {},
    };
  },
  created() {
    this.resotreQueryParams("queryParams");
    this.fnViewList();
  },
  methods: {
    // 등록
    fnInsert() {
      this.$router.push({ name: "admPopupManagementInsert" });
    },
    // 조회(목록)
    fnViewList() {
      let data = this.search;
      this.axiosViewList(data);
    },
    // 조회(상세)
    fnViewDetail(idx) {
      this.saveQueryParams("queryParams", this.search); // 검색조건 저장
      this.$router.push({
        name: "admPopupManagementSelectOne",
        query: {
          pageId: this.list[idx]["popupId"],
        },
      });
    },

    // tbody 생성
    makeTbody() {
      this.tbody = [];
      this.tbody = this.list.map((popup, idx) => ({
        id:
          this.search.totalRecordCount -
          idx -
          (this.search.currentPage - 1) * this.search.recordSize,
        popupTtl: popup.popupTtl,
        useYn:
          popup.popupUseYn == "Y"
            ? "사용"
            : popup.popupUseYn == "N"
            ? "미사용"
            : null,
        bgngDt: popup.popupBgngDt,
        endDt: popup.popupEndDt,
        mbrNm: popup.mbrEncptFlnm,
      }));
    },

    //─────axios─────┐
    // 목록 조회
    async axiosViewList(data) {
      try {
        this.$setLoading(true);
        const response = await listProc(toRaw(data));      

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