<template>
  <div class="contract-detail-page">
    <div class="page-header">
      <el-button @click="goBack"> 返回 </el-button>
      <h2 class="page-title">
        {{ isSigned ? "合同" : "合同签署" }}
      </h2>
    </div>

    <div class="content-wrapper">
      <div v-if="loading" class="loading-container">
        <el-loading :loading="loading" text="加载中..." />
      </div>
      <!-- 已签署：显示合同PDF -->
      <div v-else-if="isSigned && contractUrl" class="contract-content">
        <iframe :src="contractUrl" class="contract-iframe" frameborder="0" />
      </div>
      <!-- 未签署：显示签署页面 -->
      <div v-else-if="!isSigned && signUrl" class="contract-content">
        <iframe :src="signUrl" class="contract-iframe" frameborder="0" />
      </div>
      <div v-else class="error-container">
        <el-empty description="合同内容加载失败" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="contractDetail">
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { getContractDetailById } from "@/api/modules/contractManagement";

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

// 合同PDF URL（用于查看合同）
const contractUrl = ref<string>("");
// 签署页面URL（用于签署合同）
const signUrl = ref<string>("");
// 加载状态
const loading = ref<boolean>(true);
// 是否已签署
const isSigned = ref<boolean>(false);

// 加载合同详情
const loadContractDetail = async () => {
  try {
    loading.value = true;
    // 支持多种参数格式：contractId、signFlowId、id
    const contractId = (route.query.contractId || route.query.signFlowId || route.query.id) as string;

    if (!contractId) {
      ElMessage.error("缺少合同ID参数");
      return;
    }

    // 调用新的合同详情接口
    const res: any = await getContractDetailById(contractId);

    if (res && res.status !== undefined) {
      // status: 0-未签署，需要显示签署页面；其他状态表示已签署，显示合同PDF
      const contractStatus = res.status || 0;
      isSigned.value = contractStatus !== 0;

      if (isSigned.value) {
        // 已签署：显示合同PDF
        contractUrl.value = res.contract_url || "";
      } else {
        // 未签署：显示签署页面
        signUrl.value = res.sign_url || "";
      }
    } else {
      ElMessage.error(res?.msg || "获取合同详情失败");
    }
  } catch (error: any) {
    console.error("加载合同详情失败:", error);
    ElMessage.error(error?.message || "加载合同详情失败，请重试");
  } finally {
    loading.value = false;
  }
};

// 返回
const goBack = () => {
  router.go(-1);
};

// 初始化
onMounted(() => {
  loadContractDetail();
});
</script>

<style lang="scss" scoped>
.contract-detail-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  background-color: #ffffff;
  .page-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 24px;
    background-color: #ffffff;
    border-bottom: 1px solid #e4e7ed;
    box-shadow: 0 2px 4px rgb(0 0 0 / 2%);
    .page-title {
      flex: 1;
      margin: 0;
      font-size: 18px;
      font-weight: 600;
      color: #303133;
      text-align: center;
    }
  }
  .content-wrapper {
    position: relative;
    flex: 1;
    padding: 20px;
    background: #f5f7fa;
    .loading-container {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 600px;
    }
    .contract-content {
      width: 100%;
      height: calc(100vh - 120px);
      overflow: hidden;
      background: #ffffff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
      .contract-iframe {
        width: 100%;
        height: 100%;
        border: none;
      }
    }
    .error-container {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 600px;
    }
  }
}
</style>
