<template>
  <div class="container">
    <div class="page-titleZone flex justify-between align-center">
      <p class="main-title flex80">데이터 베이스 연계목록</p>
      <PageNavigation />
    </div>
    <div class="content-wrap">
      <div class="content-box flex justify-between">
        <div class="flex100">
          <div class="right-content">
            <div class="flex-column justify-between">
              <div class="flex justify-end align-center flex5 no-gutter">
                <div class="flex justify-end flex80">
                  <div class="search-bar">
                    <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"
                        :class="{ 'date-placeholder': false }"
                        data-placeholder="날짜 선택"
                        v-model="search_date.value2"
                      />
                      <select
                        name=""
                        id="searchItm1"
                        class="square-select"
                        v-model="search_data.key"
                      >
                        <option value="conect_nm">연계명</option>
                        <option value="conect_ip">접속IP</option>
                      </select>
                      <div class="search-square">
                        <input
                          type="text"
                          class="square-input"
                          placeholder="Search"
                          v-model="search_data.value"
                          v-on:keyup.enter="searchData()"
                        />
                        <button class="square-button" @click="searchData()">
                          <svg-icon
                            type="mdi"
                            :path="this.$getIconPath()"
                            class="square-icon"
                          ></svg-icon>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="table-zone flex85">
                <div class="list-info flex justify-between align-center">
                  <div class="count-zone">
                    <p>
                      총 <span>{{ search.totalRows }}</span
                      >건
                    </p>
                  </div>
                  <div class="cunt-selectZone">
                    <select id="pageCount" v-model="search.perPage">
                      <option value="10">10개 보기</option>
                      <option value="20">20개 보기</option>
                    </select>
                  </div>
                </div>
                <table class="list-table">
                  <!-- col 꼭 너비 기재해야함! 그래야 100%로 차지함 -->
                  <colgroup>
                    <col style="width: 5%" />
                    <col style="width: 20%" />
                    <col style="width: 10%" />
                    <col style="width: 25%" />
                    <col style="width: 10%" />
                    <col style="width: 10%" />
                    <col style="width: 10%" />
                    <col style="width: 10%" />
                  </colgroup>
                  <thead>
                    <tr>
                      <th>순서</th>
                      <th>연계명</th>
                      <th>타입</th>
                      <th>DB명</th>
                      <th>IP</th>
                      <th>id</th>
                      <th>생성자</th>
                      <th>생성일</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr
                      v-for="(itm, indx) in dbConnectionList"
                      :key="indx"
                      @click="selectConnection(itm)"
                    >
                      <td>1</td>
                      <td>{{ itm.conectNm }}</td>
                      <td>{{ itm.databaseType }}</td>
                      <td>{{ itm.databaseNm }}</td>
                      <td>{{ itm.conectIp }}</td>
                      <td>{{ itm.userId }}</td>
                      <td>{{ itm.creatId }}</td>
                      <!-- <td>{{$filters.dateTime(itm.creatDt) }}</td> -->
                      <td>{{ itm.creatDt }}</td>
                    </tr>
                  </tbody>
                </table>
                <PaginationButton
                  v-model:currentPage="search.currentPage"
                  :perPage="search.perPage"
                  :totalCount="search.totalRows"
                  :maxRange="5"
                  :click="searchData"
                />
              </div>
              <div class="flex5">
                <div class="flex justify-end">
                  <button class="darkg-btn small-btn" @click="createDbConnect">
                    연계정보 등록
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CodeList from "../../component/common/Component_CodeList.vue";
import axios from "axios";
import SvgIcon from "@jamescoyle/vue-icon";
import PageNavigation from "../../component/PageNavigation.vue";
import PaginationButton from "../../component/PaginationButton.vue";

export default {
  data() {
    return {
      // 검색 객체
      search: this.$getDefaultSerchVO(),
      search_data: this.$getDefaultSerchItem("conect_nm", "string"),
      search_date: this.$getDefaultSerchItem("creat_dt", "dates"),
      dbConnectionList: [],
    };
  },
  methods: {
    // 데이터 커넥션 등록
    createDbConnect: function () {
      this.$router.push("/insertDBConnection.page");
    },
    searchData: function () {
      const vm = this;
      axios({
        url: "/data/selectDbConnectionList.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: JSON.stringify(vm.search),
      })
        .then(function (response) {
          if (response.data.checkMessage.success) {
            vm.dbConnectionList = response.data.resultData.dbConnectionList;
            vm.search.totalRows = response.data.resultData.totalRow;
          }
        })
        .catch(function (error) {
          this.$showAlert(
            "에러 발생",
            "에러가 발생했습니다. 관리자에게 문의해 주세요."
          );
        });
    },
    selectConnection: function (itm) {
      this.$router.push({
        name: "DBConnectionDetail",
        query: { dbConnection: itm.dbConectId },
      });
    },
    // 초기화
    init: function () {
      this.search.searchObjectList.push(this.search_data);
      this.search.searchObjectList.push(this.search_date);
    },
  },
  components: {
    CodeList: CodeList,
    PageNavigation: PageNavigation,
    SvgIcon: SvgIcon,
    PaginationButton: PaginationButton,
  },
  mounted() {
    this.init();
    this.searchData();
  },
};
</script>