<template>
  <div class="container">
    <div class="page-titleZone flex justify-between align-center">
      <p class="main-title flex80">GIS 기능 상세</p>
      <PageNavigation />
    </div>
    <div class="content-wrap">
      <div class="content content-box flex-column no-gutter">
        <div class="row flex50">
          <div class="flex100">
            <div class="content-titleZone">
              <p class="box-title">
                <span class="redfont">*</span>필수 입력 값입니다.
              </p>
            </div>
            <div class="table-zone">
              <table class="form-table">
                <colgroup>
                  <col style="width: 10%" />
                  <col style="width: 40%" />
                  <col style="width: 10%" />
                  <col style="width: 40%" />
                </colgroup>
                <tbody>
                  <tr>
                    <th><span class="redfont">*</span>제목</th>
                    <td>
                      <span>{{ gisInfo.gis_title }}</span>
                    </td>
                    <th><span class="redfont">*</span>데이터셋</th>
                    <td>
                      <span>{{ gisInfo.dataset_id }}</span>
                    </td>
                  </tr>
                  <tr>
                    <th><span class="redfont">*</span>카테고리</th>
                    <td>
                      <span>{{ gisInfo.category_id }}</span>
                    </td>
                    <th><span class="redfont">*</span>GIS 사용 유무</th>
                    <td>
                      <span v-if="gisInfo.use_at === 1">사용</span>
                      <span v-if="gisInfo.use_at === 0">미사용</span>
                    </td>
                  </tr>
                  <tr>
                    <th>내용</th>
                    <td colspan="3"><span>{{ gisInfo.memo }}</span></td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="flex5">
              <div class="flex justify-end">
                <button class="red-btn small-btn" @click="gisInfoOneDel()"> 삭제 </button>
                <button class="darkg-btn small-btn" @click="selectGis"> 수정 </button>
                <button class="darkg-border-btn small-btn" @click="moveList()"> 목록 </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import CodeList from "../../component/common/Component_CodeList.vue";
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 {
      /** openAPI 등록 페이지 설정 */
      // 선택한 데이터 셋 리스트
      gisInfo: {},
      gis_id: null,
      // 데이터셋 선택
    };
  },
  methods: {
    moveList: function () {
      this.$router.push({ path: "/gisInfoList.page", query: {} });
    },
    gisInfoOneSelect: function () {
      let vm = this;
      axios({
        url: "/export/gisInfoOneSelect",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: {
          gis_id: vm.gis_id
        },
      })
        .then(function (response) {
          vm.gisInfo = response.data;
          console.log("!!", vm.gisInfo);
        })
        .catch(function (error) {
          this.$showAlert(
            "에러 발생",
            "에러가 발생했습니다. 관리자에게 문의해 주세요."
          );
        });
    },

    gisInfoOneDel: function () {
      let vm = this;
      axios({
        url: "/export/gisInfoOneDel",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: {
          gis_id: vm.gis_id
        },
      })
        .then(function (response) {
          if (response.data.checkMessage.success) {
            vm.$showAlert("메세지", "Gis 삭제에 성공하였습니다.");
            vm.$router.push({ path: "/gisInfoList.page" });
          } else {
            vm.$showAlert("메세지", "삭제에 실패하였습니다.");
          }
        })
        .catch(function (error) {
          this.$showAlert(
            "에러 발생",
            "에러가 발생했습니다. 관리자에게 문의해 주세요."
          );
        });
    },

    selectGis: function () {
      this.$router.push({
        path: "/gisInfoInsert.page",
        query: { gis_id: this.gis_id },
      });
    },
  },
  components: {
    PageNavigation,
    PaginationButton,
    SvgIcon,
  },
  mounted() {
    this.gis_id = this.$route.query.gis_id;
    this.gisInfoOneSelect()
  },
};
</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>