<template>
  <div>
    <div class="add-project-back">
      <div class="back" @click="handleBack">
        <el-icon class="backIcon"><ArrowLeft /></el-icon>
        <span class="backText">返回</span>
      </div>
      <span class="backName">{{ route.meta.title }}</span>
      <div class="back-actions" v-if="showSave">
        <el-button
          type="primary"
          :loading="loading"
          :disabled="loading || disabled"
          @click="handleSave"
        >
          {{ saveText }}
        </el-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useRouter, useRoute } from "vue-router";

const props = defineProps({
  // 是否显示保存按钮
  showSave: {
    type: Boolean,
    default: false,
  },
  // 保存按钮文本
  saveText: {
    type: String,
    default: "保存",
  },
  // 是否禁用保存按钮
  disabled: {
    type: Boolean,
    default: false,
  },
  // 是否显示loading状态
  loading: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['save', 'back']);

const route = useRoute();
const router = useRouter();

const handleBack = () => {
  emit('back');
  router.back();
};

const handleSave = () => {
  emit('save');
};
</script>
<style scoped lang="scss">
.add-project-back {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  .back {
    display: flex;
    align-items: center;
    opacity: 1;
    font-size: 14px;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    cursor: pointer;
    &:hover {
      color: #409eff;
    }
  }

  .backName {
    margin-left: 17px;
    height: 24px;
    font-size: 16px;
    font-weight: 700;
    color: rgba(51, 51, 51, 1);
    flex: 1;
  }

  .back-actions {
    margin-left: auto;
    display: flex;
    gap: 10px;
  }
}
</style>
