<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 || showProcess">
        <el-button
          v-if="showProcess"
          type="primary"
          plain
          @click="processDialogVisible = true"
        >
          办理过程
        </el-button>

        <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>

    <!-- 办理过程弹窗 -->
    <el-dialog
      v-if="showProcess"
      v-model="processDialogVisible"
      :title="processInfo.projectName || '全部办理记录'"
      width="80%"
      top="5vh"
      :close-on-click-modal="false"
      :close-on-press-escape="true"
    >
      <div class="process-dialog-content">
        <el-table
          :data="processData"
          border
          style="width: 100%"
          class="process-table"
          :header-cell-style="{ background: '#f5f7fa', color: '#333', textAlign: 'center', fontWeight: 600 }"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column prop="handleStep" label="办理环节" min-width="120" />
          <el-table-column prop="handleDept" label="办理处室" min-width="150" />
          <el-table-column prop="handlePerson" label="办理人" min-width="120" />
          <el-table-column prop="nextPerson" label="下一步办理人" min-width="120" />
          <el-table-column prop="handleOpinion" label="办理意见" min-width="120" />
          <el-table-column prop="handleTime" label="办理时间" min-width="180" />
        </el-table>
      </div>
      <template #footer>
        <el-button @click="processDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref } from "vue";
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,
  },
  showProcess: {
    type: Boolean,
    default: false,
  },
  processInfo: {
    type: Object,
    default: () => ({}),
  },
  processData: {
    type: Array,
    default: () => [],
  },
});

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

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

const processDialogVisible = ref(false);

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>
