<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "ModalHeader",
});
</script>

<script setup lang="ts">
import { reactive, defineEmits, withDefaults } from "vue";
import { useRoute } from "vue-router";
import Icon from "@/components/Module/Icon/index.vue";

const emits = defineEmits(["onSubmit", "onSubmitAndCreate", "onCancel"]);

interface propsType {
  addPermission?: string[] | undefined; // 新增按钮的权限字符
  showIcon?: boolean;
  title?: string | null | undefined;
  showSubmit?: boolean;
  showSubmitAndCreate?: boolean;
  loading?: boolean;
  // 是否显示icon
}

const props = withDefaults(defineProps<propsType>(), {
  // 默认值
  addPermission: undefined, // 新增权限
  showSubmit: true,
  showSubmitAndCreate: true,
  loading: false,
});

// 设置表头信息
const route = useRoute();
const pageInfo = reactive({
  name: route.meta.title,
  icon: route.meta.icon,
});

const typeObj: ExtraObj = {
  add: "新增",
  edit: "编辑",
};

console.log("typeObj", typeObj, props.type);

const onSubmit = () => {
  emits("onSubmit");
};

const onSubmitAndCreate = () => {
  emits("onSubmitAndCreate");
};

const onCancel = () => {
  emits("onCancel");
};
</script>

<template>
  <a-page-header class="_modal-header">
    <template #title>
      <div class="page-header-title-bar">
        <slot name="title">
          <slot name="title-start-slot"></slot>
          <div class="page-header-title">
            <!-- <div class="icon" v-if="showIcon">
            <Icon :name="route.meta.icon" />
          </div> -->
            <div class="type">
              {{ typeObj[$attrs.type] || "" }}
            </div>
            <div class="title">{{ props.title || pageInfo.name }}</div>
          </div>
          <slot name="title-end-slot"></slot>
        </slot>
      </div>
    </template>
    <template #extra>
      <!-- 前插槽 -->
      <slot name="btn-start-slot"></slot>
      <a-button
        type="primary"
        class="main-color"
        @click="onSubmit"
        v-if="showSubmit"
        :loading="props.loading"
        >提交</a-button
      >
      <a-button
        type="primary"
        class="main-color"
        @click="onSubmitAndCreate"
        :loading="props.loading"
        v-if="showSubmitAndCreate"
        >提交并继续新建</a-button
      >
      <a-button @click="onCancel">{{ $attrs.cancelText || "取消" }}</a-button>
      <!-- 后插槽 -->
      <slot name="btn-end-slot"></slot>
    </template>
  </a-page-header>
</template>

<style lang="scss" scoped>
._modal-header {
  padding: 0;
  height: 54px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(229, 233, 242, 1);
  .page-header-title-bar {
    display: flex;
    align-items: center;
    padding-left: 28px;
    position: relative;
    &::after {
      content: " ";
      position: absolute;
      left: 0px;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 32px;
      // background: $primary-color-1;
    }
    .page-header-title {
      display: flex;
      align-items: center;
      .type {
        margin-right: 4px;
        @include module-title-font;
      }
      .title {
        @include module-title-font;
      }
    }
  }

  :deep(.ant-page-header-heading-extra) {
    padding-left: 24px;
  }
}

.ant-page-header {
  // background-color: red !important;
  // background-color: red;
  :deep(.ant-page-header-heading) {
    height: 100%;
    width: 100%;
    padding-right: 24px;
    box-sizing: border-box;
    margin: 0px;
  }
  :deep(.ant-page-header-extra) {
    margin: 0px;
    display: flex;
    align-items: center;
  }
}
:deep(.ant-btn) {
  padding: 7px 16px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
</style>
