<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 content-box" style="overflow-y: inherit; padding: 15px">
        <div class="flex-column justify-between">
          <div style="height: 95%">
            <ul class="tab-nav2 flex align-center">
              <li @click="showTab('tab1')">
                <a :class="{ activeTab: activeTab === 'tab1' }">데이터 관리</a>
              </li>
              <li @click="showTab('tab2')">
                <a :class="{ activeTab: activeTab === 'tab2' }">컬럼 관리</a>
              </li>
            </ul>
            <ul class="tab-content2">
              <li id="tab01" v-show="activeTab === 'tab1'" style="height: 100%">
                <DataEditComponent :datasetPost_id="datasetPost_id" />
              </li>
              <li id="tab02" v-show="activeTab === 'tab2'" style="height: 100%">
                <ColumnEditComponent :datasetPost_id="datasetPost_id" />
              </li>
            </ul>
          </div>
          <div style="height: 5%">
            <div class="flex justify-end">
              <button class="blue-border-btn small-btn" @click="goBack()"> 돌아가기 </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import DataEditComponent from "../../component/dataComponent/DataEditComponent.vue";
import ColumnEditComponent from "../../component/dataComponent/ColumnEditComponent.vue";

export default {
  data() {
    return {
      activeTab: "tab1",
      datasetPost_id: this.$route.query.datapost,
    };
  },
  methods: {
    showTab: function (tabName) {
      this.activeTab = tabName;
    },
    goBack: function () {
      window.history.back();
    },
  },
  components: {
    DataEditComponent: DataEditComponent,
    ColumnEditComponent: ColumnEditComponent,
  },
};
</script>