<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="handleProcess"
        >
          办理过程
        </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="办理记录"
      width="80%"
      top="5vh"
      :close-on-click-modal="false"
      :close-on-press-escape="true"
    >
      <div class="process-dialog-content process-layout">
        <div class="process-left">
          <div class="process-project-name" v-if="processInfo.projectName">
            项目名称：<span class="name">{{ processInfo.projectName }}</span>
          </div>
          <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="60" />
            <el-table-column prop="actionName" label="操作" min-width="120" />
            <el-table-column label="操作人" min-width="100">
              <template #default="{ row }">{{ row.creator?.name }}</template>
            </el-table-column>
            <el-table-column
              prop="actionName"
              label="项目步骤"
              min-width="120"
            />
            <el-table-column
              prop="approvalMessage"
              label="审核意见"
              min-width="120"
            />
            <el-table-column prop="createdAt" label="时间" min-width="160" />
          </el-table>
        </div>
        <div class="process-right">
          <ProcessFlowChart
            :flow-type="effectiveFlowType"
            :current-state="currentState"
          />
        </div>
      </div>
      <template #footer>
        <el-button @click="processDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import ProcessFlowChart from "./ProcessFlowChart.vue";

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: () => [],
  },
  flowType: {
    type: String,
    default: "complex",
  },
  currentState: {
    type: Number,
    default: 0,
  },
});

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

const route = useRoute();
const router = useRouter();
const effectiveFlowType = computed(() => {
  const hasInvestmentManagement = props.processData.some((record) =>
    record.creator?.departs?.some(
      (dept) =>
        // 只要满足以下任意一个条件，就判定为投管
        dept.parentIds?.includes("41") || dept.id == "41",
    ),
  );
  return hasInvestmentManagement ? "simple" : "complex";
});
const processDialogVisible = ref(false);

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

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

const handleExport = () => {
  emit("export");
};

const handleProcess = () => {
  emit("process");
  processDialogVisible.value = true;
};
</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;
  }
}

.process-layout {
  display: flex;
  gap: 16px;
}

.process-left {
  flex: 1;
  min-width: 0;
  overflow: auto;
}

.process-right {
  // width: 360px;
  max-width: 420px;
  flex-shrink: 0;
  border-left: 1px solid #ebeef5;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.process-project-name {
  font-size: 14px;
  margin-bottom: 12px;
  .name {
    font-weight: 700;
  }
}
</style>
