<template>
  <div class="container" :style="isLoading ? { cursor: 'wait' } : {}">
    <!-- 로딩 시 화면을 덮는 반투명 오버레이 -->
    <div v-if="isLoading" class="loading-overlay">
      <div class="loading-div">
        <span>LOADING&nbsp;</span>
        <span class="anima">.</span>
        <span class="anima">.</span>
        <span class="anima">.</span>
      </div>
    </div>
    <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 content-box flex100">
        <div>
          <div class="flex justify-start align-center mb20">
            <p class="box-title">{{ apiInfo.export_ttl }}</p>
            <button class="small-btn blue-border-btn"> {{ apiInfo.api_type }} </button>
            <button v-if="apiInfo.data_format_type != null" class="small-btn blue-border-btn"> {{ apiInfo.data_format_type }} </button>
          </div>
        </div>
        <div class="mb30">
          <div class="content-titleZone2">
            <p class="box-title pl10">OPEN API</p>
          </div>
          <div class="table-zone">
            <table class="form-table">
              <colgroup>
                <col width="15%" />
                <col width="35%" />
                <col width="15%" />
                <col width="35%" />
              </colgroup>
              <tbody>
                <tr>
                  <th colspan="4">{{ apiInfo.export_ttl }}</th>
                </tr>
                <tr>
                  <th>OPEN API 국문명</th>
                  <td>{{ apiInfo.export_kor_nm }}</td>
                  <th>OPEN API 영문명</th>
                  <td>{{ apiInfo.export_kor_nm }}</td>
                </tr>
                <tr>
                  <th>공공데이터포털 사용 유무</th>
                  <td>{{ apiInfo.public_potal_is_use ? "사용" : "미사용" }}</td>
                  <th>데이터 사용유무</th>
                  <td>{{ apiInfo.data_is_use ? "사용" : "미사용" }}</td>
                </tr>
                <tr>
                  <th>API 유형</th>
                  <td>{{ apiInfo.api_type }}</td>
                  <th>데이터 포맷</th>
                  <td> {{ apiInfo.data_format_type ? apiInfo.data_format_type : "-" }} </td>
                </tr>
                <tr>
                  <th>등록일</th>
                  <td>{{ apiInfo.export_creat_dt }}</td>
                  <th>수정일</th>
                  <td> {{ apiInfo.export_mdfcn_dt ? apiInfo.export_mdfcn_dt : "-" }} </td>
                </tr>
                <tr>
                  <th>검색키워드</th>
                  <td>{{ apiInfo.keyword }}</td>
                  <th>첨부파일</th>
                  <td v-if="apiInfo.file_manager_id">
                    <ul>
                      <li v-for="(file, i) in fileList" :key="i">
                        <span>{{ file.name }}</span>
                        <button @click="downloadFile(file)" class="green-border-btn small-btn"> 파일 다운로드 </button>
                      </li>
                    </ul>
                  </td>
                  <td v-else>등록된 첨부파일이 없습니다.</td>
                </tr>
                <tr>
                  <th>공공데이터포털 URL</th>
                  <td colspan="3">등록된 URL이 없습니다.</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="tabs">
          <ul class="tabnav">
            <li v-for="(tab, index) in apiInfo.apiExportList" :key="index" @click="clickTab(index)" :class="{ active: selectApiData.index == index + 1 }"> {{ tab.api_detail_kor_nm }} </li>
          </ul>
        </div>
        <div class="mb30">
          <div class="content-titleZone2">
            <p class="box-title pl10">API 상세</p>
          </div>
          <div class="table-zone">
            <table class="form-table">
              <colgroup>
                <col width="15%" />
                <col width="35%" />
                <col width="15%" />
                <col width="35%" />
              </colgroup>
              <tbody>
                <tr>
                  <th colspan="4"></th>
                </tr>
                <tr>
                  <th>OPEN API 상세 국문명</th>
                  <td>{{ selectApiData.api_detail_kor_nm }}</td>
                  <th>OPEN API 상세 영문명</th>
                  <td>{{ selectApiData.api_detail_eng_nm }}</td>
                </tr>
                <tr>
                  <th>데이터명</th>
                  <td> {{ selectApiData.datasetPost.post_sj }} <button @click="moveDataset" class="blue-btn small-btn"> 상세조회 </button>
                  </td>
                  <th>상태</th>
                  <td>서비스가능</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="mb30">
          <div class="content-titleZone2">
            <p class="box-title pl10">데이터 요청 url</p>
          </div>
          <div class="pd10 overflow-y" style="background-color: #f8f8f8">
            <p class="detail-text mb5">
              <span class="detail-bold">OPEN API URL - </span> {{ systemURL }}/export/openapi/{{ selectApiData.datasetPost.dataset_post_id }}/{{ dataTable.datasetId }}/{{ selectApiData.export_id }}/getData <button class="small-btn blue-border-btn" @click="copyUrl2"> url복사 </button>
            </p>
            <p class="detail-text mb5">
              <span class="detail-bold">데이터 요청 메소드 - </span>GET, POST
            </p>
          </div>
        </div>
        <div class="mb30">
          <div class="content-titleZone2">
            <p class="box-title pl10">데이터 요청 변수</p>
          </div>
          <div class="table-zone" style="max-height: 380px; overflow-y: scroll">
            <table class="form-table">
              <colgroup>
                <col width="14%" />
                <col width="15%" />
                <col width="15%" />
                <col width="14%" />
                <col width="14%" />
                <col width="14%" />
                <col width="14%" />
              </colgroup>
              <thead>
                <tr>
                  <th>index</th>
                  <th>항목명(국문)</th>
                  <th>항목명(영문)</th>
                  <th>데이터 타입</th>
                  <th>데이터 크기</th>
                  <th>필수여부</th>
                  <th>기본요청값</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, idx) in defaultRequestParamList" :key="idx">
                  <td>{{ idx + 1 }}</td>
                  <td>{{ item.displayColumnName }}</td>
                  <td>{{ item.columnName }}</td>
                  <td>{{ dataTypeList[item.dataType] }}</td>
                  <td>{{ item.size }}</td>
                  <td>{{ item.isOption }}</td>
                  <td>{{ item.defaultValue }}</td>
                </tr>
                <tr v-for="(item, idx) in dataTable.columnDatas" :key="idx">
                  <td>{{ idx + defaultRequestParamList.length + 1 }}</td>
                  <td>{{ item.displyColumnNm }}</td>
                  <td>{{ item.columnNm }}</td>
                  <td>{{ dataTypeList[item.dataTy] }}</td>
                  <td>{{ item.dataSize }}</td>
                  <td>옵션</td>
                  <td>NULL</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div>
          <div class="content-titleZone2">
            <div class="flex align-center">
              <p class="box-title pl10">데이터 출력과 결과</p>
              <button class="small-btn blue-border-btn" @click="showDataPost"> 데이터 미리보기 </button>
              <button class="small-btn darkg-border-btn" @click="urlPreview"> url요청 미리보기 </button>
            </div>
          </div>
          <div v-if="!showDataview" class="pd10 overflow-y" style="background-color: #f8f8f8">
            <p class="detail-text mb5"> 데이터 미리보기를 클릭하면 결과를 미리 확인할 수 있습니다. </p>
          </div>
          <div v-else class="overflow-y overflow-x mb20">
            <div class="table-zone">
              <table class="list-table">
                <thead>
                  <th v-for="(itm, indx) in dataTable.columnDatas" :key="indx"> {{ itm.columnNm }} </th>
                </thead>
                <tbody>
                  <tr v-for="(row, rows) in dataTable.rowData" :key="rows">
                    <td v-for="(itm, indx) in row" :key="indx" style="
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                      "> {{ itm }} </td>
                  </tr>
                </tbody>
              </table>
              <PaginationButton v-model:currentPage="postSearch.currentPage" :perPage="postSearch.perPage" :totalCount="postSearch.totalRows" :maxRange="5" :click="dataView" />
            </div>
          </div>
        </div>
        <div class="flex justify-end mt10">
          <!-- <button class="blue-border-btn small-btn" @click="">수정</button> -->
          <button v-if="isAuth" class="red-border-btn small-btn" @click="openApiDel">삭제</button>
          <button class="blue-border-btn small-btn" @click="moveList">목록</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import PageNavigation from "../../component/PageNavigation.vue";
import PaginationButton from "../../component/PaginationButton.vue";
import SvgIcon from "@jamescoyle/vue-icon";
import _ from "lodash";

export default {
  data() {
    return {
      openModal: false,
      export_id: "",
      apiInfo: this.$getDefaultJobGroup().openApiInfo,
      selectApiData: this.$getDefaultJobGroup().apiExport,
      showDataview: false,
      dataTable: [],
      postSearch: this.$getDefaultSerchVO(),
      postSearch_data: this.$getDefaultSerchItem(null, "string"),

      defaultRequestParamList: [
        {
          displayColumnName: "페이지 번호",
          columnName: "currentPage",
          dataType: "LONG",
          size: 8,
          isOption: "옵션",
          defaultValue: "1",
        },
        {
          displayColumnName: "한 페이지 결과 수",
          columnName: "perPage",
          dataType: "LONG",
          size: 8,
          isOption: "옵션",
          defaultValue: "10",
        },
        {
          displayColumnName: "페이지 번호",
          columnName: "startIndex",
          dataType: "LONG",
          size: 8,
          isOption: "옵션",
          defaultValue: "1",
        },
        {
          displayColumnName: "한 페이지 결과 수",
          columnName: "pagingCnt",
          dataType: "LONG",
          size: 8,
          isOption: "옵션",
          defaultValue: "10",
        },
      ],
      dataTypeList: {
        STRING: "문자열",
        LONG: "정수",
        DOUBLE: "실수",
        DATE: "날짜",
        DATETIME: "날짜시간",
      },
      systemURL: "",
      fileList: [],
      isLoading: true,

      isAuth: this.authCheck(),
    };
  },
  methods: {
    moveList: function () {
      this.$router.push({ path: "/openApiList.page", query: {} });
    },
    datasetListOpen: function () {
      this.openModal = true;
    },
    closeModal: function () {
      this.openModal = false;
    },
    clickTab: function (index) {
      this.selectApiData = this.apiInfo.apiExportList[index];
      this.showDataview = false;
      this.postSearch.currentPage = 1;
      this.dataView();
    },
    showDataPost: function () {
      this.showDataview = true;
    },
    moveDataset: function () {
      const dataset_post_id = this.selectApiData.datasetPost.dataset_post_id;
      this.$router.push({
        path: "/dataPostDetail.page",
        query: { datapost: dataset_post_id },
      });
    },
    dataView: function () {
      this.isLoading = true;
      let vm = this;
      axios({
        url: "/dataset/selectDataPost.json",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: {
          datapost_id: vm.selectApiData.datasetPost.dataset_post_id,
          search: vm.postSearch,
        },
      })
        .then(function (response) {
          let res = response.data.resultData;
          if (response.data.checkMessage.success) {
            vm.dataTable = res.dataTable;
            // 페이징 정보 설정
            vm.postSearch.totalRows = vm.dataTable.totalRows;
            vm.postSearch.perPage = vm.dataTable.perPage;
            vm.postSearch.currentPage = vm.dataTable.currentPage;
            vm.isLoading = false;
          }
        })
        .catch(function (error) {
          this.$showAlert(
            "에러 발생",
            "에러가 발생했습니다. 관리자에게 문의해 주세요."
          );
        });
    },
    getOneOpenApi: function () {
      let vm = this;
      axios({
        url: "/export/openApiOneSelect/" + vm.export_id,
        method: "get",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
      })
        .then(function (response) {
          if (response.data.checkMessage.success) {
            vm.apiInfo = response.data.resultData.apiInfo;
            vm.selectApiData = vm.apiInfo.apiExportList[0];
            vm.fileList = response.data.resultData.fileList;

            vm.dataView();
          }
        })
        .catch(function (error) {
          this.$showAlert(
            "에러 발생",
            "에러가 발생했습니다. 관리자에게 문의해 주세요."
          );
        });
    },
    getExportUrl: function () {
      this.systemURL = window.location.protocol + "//" + window.location.host;
    },
    copyUrl: function () {
      let vm = this;
      let url =
        vm.systemURL +
        "/export/openAPI/" +
        vm.selectApiData.datasetPost.dataset_post_id +
        "/" +
        vm.dataTable.datasetId +
        "/" +
        vm.selectApiData.export_id +
        "/getData";
      navigator.clipboard.writeText(url).then(
        function () {
          vm.$showAlert("메세지", "url이 복사되었습니다.");
        },
        function (err) {
          console.error("Async: Could not copy text: ", err);
        }
      );
    },
    copyUrl2: function () {
      let vm = this;
      let url =
        vm.systemURL +
        "/export/openapi/" +
        vm.selectApiData.datasetPost.dataset_post_id +
        "/" +
        vm.dataTable.datasetId +
        "/" +
        vm.selectApiData.export_id +
        "/getData";
      navigator.clipboard.writeText(url).then(
        function () {
          vm.$showAlert("메세지", "url이 복사되었습니다.");
        },
        function (err) {
          console.error("Async: Could not copy text: ", err);
        }
      );
    },
    urlPreview: function () {
      let vm = this;
      let url =
        vm.systemURL +
        "/export/openapi/" +
        vm.selectApiData.datasetPost.dataset_post_id +
        "/" +
        vm.dataTable.datasetId +
        "/" +
        vm.selectApiData.export_id +
        "/getDataSample.json";
      window.open(url);
    },
    // 파일 다운로드
    downloadFile(file) {
      axios({
        url: "/fileManage/download",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: { fileManagerId: file.fileManagerId },
        responseType: "blob",
      })
        .then(function (response) {
          const url = window.URL.createObjectURL(new Blob([response.data]));
          const link = document.createElement("a");
          link.href = url;
          link.setAttribute("download", file.name);
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
        .catch(function (error) {
          this.$showAlert(
            "에러 발생",
            "에러가 발생했습니다. 관리자에게 문의해 주세요."
          );
        });
    },
    openApiDel: async function () {
      let vm = this;
      if (
        await this.$showConfirm(
          "삭제",
          "OPEN API를 삭제하면 해당 데이터에 대한 서비스를 사용할 수 없습니다.<br>해당 OPEN API를 삭제하시겠습니까?"
        )
      ) {
        axios({
          url: "/export/openApiDelete",
          method: "post",
          headers: {
            "Content-Type": "application/json; charset=UTF-8",
          },
          data: { export_id: vm.export_id },
        })
          .then(function (response) {
            if (response.data.checkMessage.success) {
              vm.$showAlert("메세지", "삭제되었습니다.");
              vm.moveList();
            } else {
              vm.$showAlert("메세지", response.data.checkMessage.message);
            }
          })
          .catch(function (error) {
            this.$showAlert(
              "에러 발생",
              "에러가 발생했습니다. 관리자에게 문의해 주세요."
            );
          });
      }
    },

    authCheck() {
      let authList = this.$store.state.loginUser.user_auth;
      for (let auth of authList) {
        if (auth == "ROLE_ADMIN") {
          return true;
        }
      }
      return false;
    },
  },
  watch: {
    selectApiData: function () {
      this.dataView();
    },
  },
  components: {
    PageNavigation,
    PaginationButton,
    SvgIcon,
  },
  mounted() {
    this.export_id = this.$route.query.export_id;
    this.getOneOpenApi();
    this.getExportUrl();
  },
};
</script>
<style scoped>
.redfont {
  color: #eb3939;
}

.del-btn {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.tabnav li {
  padding: 10px 20px;
  border: 1px solid #e0e0e0;
  font-size: 14px;
  display: inline-block;
  cursor: pointer;
}

.tabnav li.active {
  background-color: #f8f8f8;
  border-bottom: 1px solid #f8f8f8;
}
</style>