<template>
  <div class="container">
    <div class="page-titleZone flex justify-between align-center">
      <p class="main-title flex80">OpenAPI 활용</p>
      <PageNavigation />
    </div>
    <div class="content-wrap">
      <div class="content-box flex justify-between">
        <div class="flex20 content-box">
          <div class="left-content flex100 content-box">
            <div class="content-titleZone">
              <p class="box-title">카테고리 리스트</p>
            </div>
            <div class="content-zone">
              <CodeList :groupCode="'DATA_CTGRY'" @selectCode="selectCode" />
            </div>
          </div>
        </div>
        <div class="flex80 content-box">
          <div class="right-content content-box">
            <div class="flex-column justify-between">
              <div class="flex justify-end align-center flex5 no-gutter">
                <div class="flex justify-end flex100">
                  <div class="flex justify-end align-center">
                    <input type="date" name="start-date" id="start-date" class="square-date" :class="{ 'date-placeholder': false }" data-placeholder="날짜 선택" v-model="search_date.value" />
                    <span class="coupler">~</span>
                    <input type="date" name="end-date" id="end-date" class="square-date ml5" :class="{ 'date-placeholder': false }" data-placeholder="날짜 선택" v-model="search_date.value2" />
                    <select class="square-select ml5" v-model="search_data1.value">
                      <option :value="null">공개여부</option>
                      <option :value="true">공개</option>
                      <option :value="false">비공개</option>
                    </select>
                    <select class="square-select ml5" v-model="search_data2.value">
                      <option :value="null">카테고리</option>
                      <option v-for="(item, indx) in categoryList" :key="indx" :value="item.cmmnCode"> {{ item.codeNm }} </option>
                    </select>
                    <select name="" id="searchItm1" class="square-select ml5" v-model="search_data3.key">
                      <option :value="null">검색조건</option>
                      <option value="export_ttl">제목</option>
                      <option value="export_explain">내용</option>
                    </select>
                    <div class="search-square ml5">
                      <input type="text" class="square-input" placeholder="Search" v-model="search_data3.value" v-on:keyup.enter="searchData()" />
                      <button class="square-button blue-btn" @click="searchData()">
                        <svg-icon type="mdi" :path="this.$getIconPath()" class="square-icon"></svg-icon>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <div class="table-zone flex85">
                <table class="list-table">
                  <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
                  <colgroup>
                    <col style="width: 5%" />
                    <col style="width: 10%" />
                    <col style="width: 10%" />
                    <col style="width: 10%" />
                    <col style="width: 20%" />
                    <col style="width: 10%" />
                    <col style="width: 10%" />
                    <col style="width: 10%" />
                  </colgroup>
                  <thead>
                    <tr>
                      <th>No</th>
                      <th>제목</th>
                      <th>생성자</th>
                      <th>부서</th>
                      <th>등록일시</th>
                      <th>카테고리</th>
                      <th>배포형태</th>
                      <th>데이터포맷</th>
                    </tr>
                  </thead>
                  <tbody>
                    <template v-if="openApiList.length > 0">
                      <tr v-for="(item, indx) in openApiList" :key="indx" @click="selectApi(item)">
                        <td> {{ search.totalRows - indx - (search.currentPage - 1) * search.perPage }} </td>
                        <td>{{ item.export_ttl }}</td>
                        <td>{{ item.export_creat_id }}</td>
                        <td>{{ item.dept_nm }}</td>
                        <td>{{ item.export_creat_dt }}</td>
                        <td>{{ item.category_id }}</td>
                        <td>{{ item.api_type }}</td>
                        <td>{{ item.data_format_type }}</td>
                      </tr>
                    </template>
                    <template v-else>
                      <tr>
                        <td colspan="10">등록된 데이터가 없습니다.</td>
                      </tr>
                    </template>
                  </tbody>
                </table>
                <PaginationButton v-model:currentPage="search.currentPage" :perPage="search.perPage" :totalCount="search.totalRows" :maxRange="5" :click="searchData" />
              </div>
              <div v-if="isAuth" class="flex5">
                <div class="flex justify-end">
                  <button class="blue-btn small-btn" @click="createDataPost">데이터 등록</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import CodeList from "../../component/common/Component_CodeList.vue";
import axios from "axios";
import PageNavigation from "../../component/PageNavigation.vue";
import SvgIcon from "@jamescoyle/vue-icon";
import PaginationButton from "../../component/PaginationButton.vue";

export default {
  data() {
    return {
      dataPostList: [],
      search: this.$getDefaultSerchVO(),
      // 공개여부
      search_data1: this.$getDefaultSerchItem("public_at", "bool"),
      // 카테고리
      search_data2: this.$getDefaultSerchItem("category_id", "string"),
      // 선택
      search_data3: this.$getDefaultSerchItem("export_ttl", "string"),
      // 날짜
      search_date: this.$getDefaultSerchItem("export_creat_dt", "dates"),
      categoryList: [],
      openApiList: [],

      isAuth: this.authCheck(),
    };
  },
  methods: {
    createDataPost: function () {
      this.$router.push("/openApiInsert.page");
    },

    selectCode: function (code) {
      this.search_data2.value = code;
      if (code == null) {
        this.search_data2.value = null;
        this.search_data3.value = null;
      }
      this.searchData();
    },

    selectApi: function (item) {
      this.$router.push({
        path: "/openApiListOne.page",
        query: { export_id: item.export_id },
      });
    },
    searchData: function () {
      const vm = this;
      axios({
        url: "/export/getOpenApiList",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: JSON.stringify(vm.search),
      })
        .then(function (response) {
          if (response.data.checkMessage.success) {
            vm.openApiList = response.data.resultData.apiList;
            vm.search = response.data.resultData.searchVO;

          }
        })
        .catch(function (error) {
          this.$showAlert(
            "에러 발생",
            "에러가 발생했습니다. 관리자에게 문의해 주세요."
          );
        });
    },
    // 초기화
    init: async function () {
      this.search.searchObjectList.push(this.search_date);
      this.search.searchObjectList.push(this.search_data1);
      this.search.searchObjectList.push(this.search_data2);
      this.search.searchObjectList.push(this.search_data3);
      this.categoryList = await this.$getCommonCode("DATA_CTGRY");
    },

    authCheck() {
      let authList = this.$store.state.loginUser.user_auth;
      for (let auth of authList) {
        if (auth == "ROLE_ADMIN") {
          return true;
        }
      }
      return false;
    },
  },
  computed: {
    CodeList,
  },
  components: {
    CodeList: CodeList,
    PageNavigation: PageNavigation,
    PaginationButton: PaginationButton,
    SvgIcon: SvgIcon,
  },
  mounted() {
    this.init();
    this.searchData();
  },
};
</script>
<style scoped>
.allTitle {
  font-size: 15px;
  font-weight: bold;
}
</style>