<template>
  <div class="page-con-manage">
    <div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-row :gutter="20">
      <el-col :span="12">
        <page-button :webId="webId"></page-button>
      </el-col>
      <el-col :span="12">
        <page-column :webId="webId"></page-column>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import pageButton from "@/Components/pageManage/pageButtonCom.vue";
import pageColumn from "@/Components/pageManage/pageColumnCom.vue";
import { reactive, watch, ref, computed, onActivated } from "vue";
import { onBeforeRouteUpdate, useRouter } from "vue-router";
import { useStore } from "vuex";
const webId = ref(""),
  title = ref(""),
  buttons = ref([]),
  columns = ref([]),
  columnForm = reactive({}),
  dialogColumn = ref(false),
  rows = ref([]),
  rowForm = reactive({}),
  dialogRow = ref(false),
  submitKey = ref(false);
const $router = useRouter();
webId.value = $router.currentRoute.value.query.webId;
title.value = $router.currentRoute.value.query.title;
const $store = useStore();
const queryWebId = computed(() => {
  return $store.getters.currentrRouteQuery.webId;
});

onActivated(() => {
  webId.value = $router.currentRoute.value.query.webId;
  title.value = $router.currentRoute.value.query.title;
});
</script>
<style lang="scss">
.page-con-manage {
  padding: 0 1rem;
  width: 100%;
  box-sizing: border-box;
  .breadcrumb {
    padding: 1rem 0;
    border-bottom: 0.1rem solid #dadada;
    margin-bottom: 1rem;
  }
  .title {
    margin-bottom: 2rem;
    .title-text {
      margin-right: 2rem;
      font-size: 1.8rem;
      font-weight: bold;
    }
  }
  .content {
    height: 60rem;
    padding: 1rem;
    box-sizing: border-box;
    overflow-y: auto;
    .btn,
    .column {
      margin-right: 1rem;
      margin-bottom: 1rem;
    }
  }
}
</style>
