<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 || showExport">
        <el-button
          v-if="showExport"
          type="primary"
          plain
          :disabled="exportDisabled"
          @click="handleExport"
        >
          导出
        </el-button>

        <el-button
          v-if="showSave"
          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: {
    type: Boolean,
    default: false,
  },
  showExport: {
    type: Boolean,
    default: false,
  },
  exportDisabled: {
    type: Boolean,
    default: false,
  },
});

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

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

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

const handleSave = () => {
  emit("save");
};

const handleExport = () => {
  emit("export");
};
</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>
