<template>
  <div class="table-operation">
    <div class="table-operation-box">
      <div class="operation-header">
        <div class="operation-title">{{ getTitle }}</div>
        <section>
          <el-button type="primary" v-if="showSub" @click="clickSub()"
            >提 交</el-button
          >
          <el-button @click="handlerBack()">返 回</el-button>
        </section>
      </div>
      <div class="operation-panel">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();
const emits = defineEmits(["handlerSub"]);

const props = defineProps({
  showSub: {
    type: Boolean,
    default: true,
  },
  title: {
    type: String,
    default: "",
  },
});

const getTitle = computed(() => {
  if (props.title) return props.title;
  return route.meta.title;
});

const handlerBack = () => {
  router.back();
};
const clickSub = () => {
  console.log(route);
  emits("handlerSub");
};
</script>

<style lang="scss" scoped>
.table-operation {
  padding: 20px 16px;
  height: 100%;
  background-color: #f5f8fd;

  .table-operation-box {
    height: 100%;
    background-color: #fff;
    box-shadow: 0px 4px 4px 0px rgba(168, 196, 237, 0.25);
  }

  .operation-header {
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 50px;
    border-bottom: 1px solid #e5eaf3;
  }
  .operation-title {
    font-size: 18px;
    font-family: "MiSans-Medium";
  }

  .operation-panel {
    height: calc(100% - 50px);
    padding: 10px 20px;
    overflow-y: auto;
  }
}
</style>
