<template>
  <div class="rrmse-wrap" :style="isLoading ? { cursor: 'wait' } : {}">
    <!-- 로딩 시 화면을 덮는 반투명 오버레이 -->
    <div v-if="isLoading" class="loading-overlay">
      <div class="loading-div">
        <span>LOADING </span>
        <span class="anima">.</span>
        <span class="anima">.</span>
        <span class="anima">.</span>
      </div>
    </div>
    <div class="container">
      <div class="page-titleZone flex justify-between align-center align-center">
        <p class="main-title flex80">데이터 활용</p>
        <PageNavigation />
      </div>
      <div class="content-wrap">
        <div class="content content-box">
          <div class="row content-box">
            <div class="flex-column justify-between">
              <div class="table-zone flex95">
                <table class="form-table">
                  <colgroup>
                    <col width="10%" />
                    <col width="80%" />
                    <col width="10%" />
                  </colgroup>
                  <tbody>
                    <tr>
                      <th>제목</th>
                      <td colspan="2">{{ pageInfo["ttl"] }}</td>
                    </tr>
                    <tr>
                      <th>공개여부</th>
                      <td colspan="2">
                        <div class="input-container flex">
                          <label class="radio-label">
                            <input type="radio" name="public_at" class="custom-radiobox" :value="true" v-model="pageInfo['public_at']" disabled />
                            <span>공개</span>
                          </label>
                          <label class="radio-label">
                            <input type="radio" name="public_at" class="custom-radiobox" :value="false" v-model="pageInfo['public_at']" disabled />
                            <span>비공개</span>
                          </label>
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <th>내용</th>
                      <td colspan="2">
                        <div style="min-height: 100px"> {{ pageInfo["cn"] }} </div>
                      </td>
                    </tr>
                    <!-- <tr>
                      <th>페이지 URL</th>
                      <td>{{ pageInfo["url"] }}</td>
                      <td>
                        <button class="large-btn darkg-btn">URL 복사</button>
                      </td>
                    </tr> -->
                  </tbody>
                </table>
                <div class="content-titleZone mt20">
                  <p class="box-title">커스텀한 페이지</p>
                </div>
                <div style="width: 100%; height: 1000px">
                  <SplitterLayout style="width: 100%; height: 100%" id="SplitterLayout" :splitInfo="splitInfo_dumy" :selectLayout="selectLayout"></SplitterLayout>
                </div>
              </div>
              <div class="flex justify-end flex5">
                <button class="red-border-btn small-btn" @click="pageDel"> 삭제 </button>
                <button class="blue-border-btn small-btn" @click="pageUpdate"> 수정 </button>
                <button class="blue-border-btn small-btn" @click="moveList"> 목록 </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import SvgIcon from "@jamescoyle/vue-icon";
import axios from "axios";
import SplitterLayout from "../../component/SplitterLayoutDev.vue";

export default {
  data() {
    return {
      page_id: null, // get pageId
      showSplit: true,
      pageInfo: {},
      splitInfo: _.cloneDeep(this.$getDefaultJobGroup().customSplitter),
      splitInfo_dumy: _.cloneDeep(this.$getDefaultJobGroup().customSplitter),
      selectLayout: _.cloneDeep(this.$getDefaultJobGroup().customSplitter),
      isLoading: true,
    };
  },
  methods: {
    getCustomPageData: function () {
      const vm = this;
      axios({
        url: "/custom/customPageOneDataselect/" + vm.page_id,
        method: "get",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
      })
        .then(function (response) {
          vm.pageInfo = response.data.resultData.pageInfo;
          vm.splitInfo = response.data.resultData.splitterInfo;

          vm.splitInfo_dumy = _.cloneDeep(
            vm.$getDefaultJobGroup().customSplitter
          );

          vm.splitInfo_dumy.layout_nm = "dumy";
          vm.splitInfo_dumy.se = "splitter";
          vm.splitInfo_dumy.children.push(vm.splitInfo);
          vm.isLoading = false;
          vm.selectLayout = vm.splitInfo_dumy;
        })
        .catch(function (error) {
          vm.isLoading = false;
          vm.$showAlert(
            "데이터 활용 조회",
            "데이터 활용 조회 오류, 관리자에게 문의하세요."
          );
          vm.$router.go(-1); // 오류 시 이전 페이지로 이동
        });
    },
    async pageDel() {
      const vm = this;

      if (
        !(await vm.$showConfirm(
          "페이지 삭제",
          "해당 페이지를 삭제하시겠습니까?"
        ))
      ) {
        return;
      }

      axios({
        url: "/custom/customPageDelete/" + vm.page_id,
        method: "get",
        headers: {
          "Content-Type": "application/json; charset=UTF-8",
        },
      })
        .then(function (response) {
          vm.$showAlert("페이지 삭제", "페이지가 삭제되었습니다.");
          vm.$router.push({ path: "/customSelectList.page", query: {} });
        })
        .catch(function (error) {
          this.$showAlert(
            "에러 발생",
            "에러가 발생했습니다. 관리자에게 문의해 주세요."
          );
        });
    },
    pageUpdate() {
      this.$router.push({
        path: "/customInsertDev.page",
        query: { page_id: this.page_id },
      });
    },
    moveList: function () {
      this.$router.push({ path: "/customSelectList.page", query: {} });
    },
  },
  watch: {
    splitInfo_dumy: {
      handler: function () {
        this.selectLayout = this.splitInfo_dumy;
      },
      deep: true,
    },
  },
  components: {
    SvgIcon: SvgIcon,
    SplitterLayout,
  },
  mounted() {
    this.page_id = this.$route.query.page_id;
    this.getCustomPageData();
  },
};
</script>
<style scoped>
.p-splitter-gutter-handle,
.p-splitter-gutter {
  pointer-events: none;
}
</style>