<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">1. MarketDB에 등록된 데이터셋만 사용할 수 있습니다.</p>
              <p class="box-title">2. WGS84 좌표로 표현된 x좌표와 y좌표를 보유한 데이터셋만 사용할 수 있습니다.</p>
              <p class="box-title">3. 사용할 데이터셋의 컬럼명(한글)을 아래와 같이 변경해야 제대로 된 시각화 화면을 조회할 수 있습니다.</p>
              <p class="box-title pl10">컬럼: 이름(name), x좌표(x), y좌표(y), 주소(address)</p>
              <p class="box-title mt10">
                <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>
                      <input type="text" class="full-input" v-model="gisInfo.gis_title" />
                    </td>
                    <th><span class="redfont">*</span>데이터셋</th>
                    <td>
                      <button @click="fnTargetDataRead" class="blue-border-btn small-btn">데이터셋 선택</button> {{ gisInfo.dataset_id }}
                    </td>
                  </tr>
                  <tr>
                    <th><span class="redfont">*</span>카테고리</th>
                    <td>
                      <select class="full-input" v-model="gisInfo.category_id">
                        <option value="null">카테고리 없음</option>
                        <option v-for="(item, indx) in categoryList" :key="indx" :value="item.cmmnCode"> {{ item.codeNm }} </option>
                      </select>
                    </td>
                    <th><span class="redfont">*</span>GIS 사용 유무</th>
                    <td>
                      <div style="display: flex">
                        <input id="publicPortalIsUseTrue" name="publicPortalIsUse" type="radio" value="1" class="radio" v-model="gisInfo.use_at" />
                        <label for="publicPortalIsUseTrue" class="mr20">사용</label>
                        <input id="publicPortalIsUseFalse" name="publicPortalIsUse" type="radio" value="0" class="radio" v-model="gisInfo.use_at" />
                        <label for="publicPortalIsUseFalse">미사용</label>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <th>내용</th>
                    <td colspan="3"><textarea name="" id="" v-model="gisInfo.memo"></textarea></td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="flex5">
              <div class="flex justify-end">
                <button v-if="gisInfo.gis_id === null || gisInfo.gis_id === 0" class="blue-btn small-btn" @click="dataValid">등록</button>
                <button v-else class="blue-btn small-btn" @click="dataValid2">수정</button>
                <button class="blue-border-btn small-btn" @click="moveList()">취소</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 모달 -->
    <datasetSelecter :openPopup="isSelectModalOpen" @closePopup="fnCloseDatasetSelectModal" @saveNodeData="fnUpdateDatasetSelect" />
  </div>
</template>
<script>
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 store from "../AppStore";
import datasetSelecter from "../../component/connection/itm/datasetSelecter.vue";

import axios from "axios";

export default {
  data() {
    return {
      /** openAPI 등록 페이지 설정 */
      // 선택한 데이터 셋 리스트
      gisInfo: {},
      // 데이터셋 선택
      isSelectModalOpen: false,
      datasetCheckData: 0,
      datapostId: null,
      inputKeyword: "",
    };
  },
  methods: {
    // 타겟 데이터 조회
    fnTargetDataRead() {
      this.isSelectModalOpen = true;
    },
    // 타겟 데이터 조회 저장 후 모달 닫기
    fnUpdateDatasetSelect(jobItem) {
      this.datapostId = jobItem.dataTable.datasetId;
      this.gisInfo.dataset_id = this.datapostId
      this.fnCloseDatasetSelectModal(); // 타겟 데이터 조회 모달 닫기
    },
    // 타겟 데이터 조회 모달 닫기
    fnCloseDatasetSelectModal() {
      this.isSelectModalOpen = false;
    },
    searchData: function () {
      const vm = this;
      let idx = this.categoryList.findIndex(
        (x) => x.cmmnCode === this.selectedCategory
      );
      axios({
        url: "/dataset/selectDataPostList.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.dataPostList = response.data.resultData.dataPostList;
            vm.search.totalRows = response.data.resultData.totalRow;
            vm.categoryIdx = idx;
          }
        })
        .catch(function (error) {
          this.$showAlert(
            "에러 발생",
            "에러가 발생했습니다. 관리자에게 문의해 주세요."
          );
        });
    },
    // 초기화
    init: async function () {
      this.categoryList = await this.$getCommonCode("DATA_CTGRY");
      this.gisInfo.gis_id = this.$route.query.gis_id;
      let vm = this;

      axios({
        url: "/export/gisInfoOneSelect",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: {
          gis_id: vm.gisInfo.gis_id
        },
      })
        .then(function (response) {
          vm.gisInfo = response.data;
        })
        .catch(function (error) {
          this.$showAlert(
            "에러 발생",
            "에러가 발생했습니다. 관리자에게 문의해 주세요."
          );
        });
    },

    /** 페이지 내 기능 설정 */
    moveList: function () {
      this.$router.push({ path: "/gisInfoList.page", query: {} });
    },
    datasetCheck: function () {
      let vm = this;
      axios({
        url: "/export/datasetCheck",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: {
          datapostId: vm.gisInfo.dataset_id
        },
      })
        .then(function (response) {
          vm.datasetCheckData = response.data;
          if (vm.datasetCheckData == 0) {
            vm.$showAlert("메세지", "상주마켓 데이터셋을 선택해주세요.");
          } else if (vm.datasetCheckData == 1) {
            if (!(vm.gisInfo.gis_id === 0)) {
              vm.gisInfoUpdate();
            } else {
              vm.gisInfoInsert();
            }
          }
        })
        .catch(function (error) {
          this.$showAlert(
            "에러 발생",
            "에러가 발생했습니다. 관리자에게 문의해 주세요."
          );
        });
    },
    datasetCheck2: function () {
      let vm = this;
      axios({
        url: "/export/datasetCheck",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: {
          datapostId: vm.gisInfo.dataset_id
        },
      })
        .then(function (response) {
          vm.datasetCheckData = response.data;
          if (vm.datasetCheckData == 0) {
            vm.$showAlert("메세지", "상주마켓 데이터셋을 선택해주세요.");
          } else if (vm.datasetCheckData == 1) {
            if (!(vm.gisInfo.gis_id === 0)) {
              vm.gisInfoUpdate();
            } else {
              vm.gisInfoInsert();
            }
          }
        })
        .catch(function (error) {
          this.$showAlert(
            "에러 발생",
            "에러가 발생했습니다. 관리자에게 문의해 주세요."
          );
        });
    },
    selectGis: function () {
      this.$router.push({
        path: "/gisInfoListOne.page",
        query: { gis_id: this.gisInfo.gis_id },
      });
    },
    // 유효성 검사
    dataValid: function () {
      let vm = this;
      if (
        vm.gisInfo.gis_title === null ||
        vm.gisInfo.gis_title.trim() === ""
      ) {
        vm.$showAlert("메세지", "제목을 입력해주세요.");
        return;
      }
      if (
        vm.gisInfo.category_id === null ||
        vm.gisInfo.category_id.trim() === ""
      ) {
        vm.$showAlert("메세지", "카테고리를 선택해주세요.");
        return;
      }
      vm.datasetCheck();
    },
    dataValid2: function () {
      let vm = this;
      if (
        vm.gisInfo.gis_title === null ||
        vm.gisInfo.gis_title.trim() === ""
      ) {
        vm.$showAlert("메세지", "제목을 입력해주세요.");
        return;
      }
      if (
        vm.gisInfo.category_id === null ||
        vm.gisInfo.category_id.trim() === ""
      ) {
        vm.$showAlert("메세지", "카테고리를 선택해주세요.");
        return;
      }
      vm.datasetCheck2();
    },
    gisInfoInsert: function () {
      let vm = this;

      vm.datasetCheckData = 0
      vm.gisInfo.gis_creat_id = store.state.loginUser.user_id;
      axios({
        url: "/export/gisInfoInsert",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: vm.gisInfo,
      })
        .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(
            "에러 발생",
            "에러가 발생했습니다. 관리자에게 문의해 주세요."
          );
        });
    },

    gisInfoUpdate: function () {
      let vm = this;

      vm.datasetCheckData = 0
      vm.gisInfo.gis_creat_id = store.state.loginUser.user_id;
      axios({
        url: "/export/gisInfoUpdate",
        method: "post",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
        data: vm.gisInfo,
      })
        .then(function (response) {
          if (response.data.checkMessage.success) {
            vm.$showAlert("메세지", "Gis 수정에 성공하였습니다.");
            vm.selectGis();
          } else {
            vm.$showAlert("메세지", "수정에 실패하였습니다.");
          }
        })
        .catch(function (error) {
          this.$showAlert(
            "에러 발생",
            "에러가 발생했습니다. 관리자에게 문의해 주세요."
          );
        });
    },
  },
  components: {
    CodeList: CodeList,
    PageNavigation: PageNavigation,
    PaginationButton: PaginationButton,
    SvgIcon: SvgIcon,
    datasetSelecter: datasetSelecter,
  },
  mounted() {
    this.init();
  }
}
</script>
<style scoped>
.redfont {
  color: #eb3939;
}

.del-btn {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
</style>