<template>
  <div class="container">
    <div class="page-titleZone flex justify-between align-center align-center">
      <p class="main-title flex80">데이터 활용 목록</p>
      <PageNavigation />
    </div>
    <div class="content-wrap">
      <div class="content content-box flex100">
        <div class="column-list">
          <div class="search-bar">
            <div class="flex justify-end align-center">
              <select name="searchItem" id="searchItem" class="square-select" v-model="search_data.key">
                <option value="ttl">제목</option>
                <option value="cn">내용</option>
              </select>
              <div class="search-square">
                <div class="flex justify-end align-center no-gutter">
                  <input type="text" class="square-input flex90" placeholder="Search" v-model="search_data.value" v-on:keyup.enter="customListAllSelect()" />
                  <button class="square-button blue-btn flex10" @click="customListAllSelect()">
                    <svg-icon type="mdi" :path="searchPath" class="square-icon"></svg-icon>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="table-zone">
            <ul class="gall-list flex justify-start align-center">
              <li v-for="(item, index) in customList" :key="index" class="gall-list flex25" @click="customUpdatePage(item.page_id)">
                <a href="">
                  <div class="gall-img">
                    <img :src="item.preview_img_path" alt="" />
                  </div>
                  <div class="gall-info">
                    <p class="gall-title">{{ item.ttl }}</p>
                    <p class="gall-detail">{{ item.cn }}</p>
                  </div>
                </a>
              </li>
            </ul>
          </div>
          <PaginationButton v-model:currentPage="search.currentPage" :perPage="search.perPage" :totalCount="search.totalRows" :maxRange="5" :click="customListAllSelect" />
        </div>
      </div>
      <div class="flex justify-end align-center">
        <button class="blue-btn small-btn" @click="customInsertPage">페이지 등록</button>
      </div>
    </div>
  </div>
</template>
<script>
import PageNavigation from "../../component/PageNavigation.vue";
import PaginationButton from "../../component/PaginationButton.vue";
import SvgIcon from "@jamescoyle/vue-icon";
import { mdiMagnify } from "@mdi/js";
import axios from "axios";

export default {
  data() {
    return {
      search: _.cloneDeep(this.$getDefaultSerchVO()),
      search_data: _.cloneDeep(this.$getDefaultSerchItem("ttl", "String")),
      searchPath: mdiMagnify,
      inputValue: null,
      customList: [],
    };
  },
  methods: {
    customInsertPage: function () {
      this.$router.push({ path: "/customInsertDev.page", query: {} });
    },
    customUpdatePage: function (pageId) {
      this.$router.push({
        path: "/customSelectOne.page",
        query: { page_id: pageId },
      });
    },
    customListAllSelect: function () {
      const vm = this;

      let check = false;
      let authList = vm.$store.state.loginUser.user_auth;
      for (let auth of authList) {
        if (auth == 'ROLE_ADMIN') {
          check = true
          break;
        }
      }
      if (!check) {
        vm.search.searchObjectList.push({
          key: "id",
          key2: "dept_code",
          type: "string",
          value: check + "/" + vm.$store.state.loginUser.user_id,
          value2: vm.$store.state.loginUser.dept_code,
        })
      }

      axios({
        url: "/custom/customPageListAllSelect",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: JSON.stringify(vm.search),
      })
        .then(function (response) {
          const res = response.data;
          vm.customList = res.resultData.customPageList;
          vm.search.totalRows = res.resultData.totalRow;
        })
        .catch(function (error) {
          this.$showAlert(
            "에러 발생",
            "에러가 발생했습니다. 관리자에게 문의해 주세요."
          );
        });
    },
  },
  components: {
    PageNavigation: PageNavigation,
    PaginationButton: PaginationButton,
    SvgIcon: SvgIcon,
  },
  mounted() {
    this.search.searchObjectList.push(this.search_data);
    this.customListAllSelect();
  },
};
</script>
