<template>
  <div class="app-container">
    <div class="content-header">
      <el-breadcrumb separator="/" class="breadcrumb">
        <el-breadcrumb-item>投标人主体库</el-breadcrumb-item>
        <el-breadcrumb-item>企业知识库</el-breadcrumb-item>
        <el-breadcrumb-item>财务库</el-breadcrumb-item>
        <el-breadcrumb-item>报告详情</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="header-actions">
        <el-button class="reset-btn" @click="handleClose()">返回</el-button>
        <el-button class="edit-btn" @click="handleEdit()">编辑</el-button>
      </div>
    </div>

    <div class="content-body">
      <el-row :gutter="24" class="content-row">
        <!-- 财务报告信息 -->
        <el-col :span="8" class="form-pane">
          <FinanceReportDetail :detail-data="detailData" />
        </el-col>
      </el-row>
      <el-row :gutter="24" class="content-row">
        <!-- 财务报表数据 -->
        <el-col :span="16" class="form-pane">
          <FinancialStatementDetail :detail-data="detailData" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// 补充SM4加密方法导入（与业绩库一致，用于返回/编辑跳转传递企业ID）
import { decryptWithSM4, encryptWithSM4 } from '@/utils/sm'
import FinanceReportDetail from './child/FinanceReportDetail.vue'
import FinancialStatementDetail from './child/FinancialStatementDetail.vue'
import { getFinanceDetail } from "@/api/enterpriseLibrary/finance/finance";

export default {
  name: 'FinanceDetail',
  components: {
    FinanceReportDetail,
    FinancialStatementDetail
  },
  data() {
    return {
      // 新增：从路由参数解密获取企业ID（与业绩库一致）
      enterpriseId: decryptWithSM4(this.$route.query.enterpriseId) || '',
      id: decryptWithSM4(this.$route.query.id), // 解密获取财务报告ID
      detailData: {} // 存储详情数据
    }
  },
  created() {
    this.fetchDetailData() // 页面加载时获取详情数据
  },
  methods: {
    // 获取详情数据：携带企业ID查询，与业绩库逻辑一致
    async fetchDetailData() {
      try {
        const response = await getFinanceDetail({
          financeId: this.id,
          enterpriseId: this.enterpriseId // 关键：传递企业ID，确保查询当前企业的财务报告
        })
        this.detailData = response.data || {}
        console.log("财务报告详情数据", this.detailData)
      } catch (error) {
        this.$message.error('获取详情失败：' + (error.message || '网络错误'))
      }
    },

    // 返回列表页：携带加密后的企业ID，与业绩库逻辑一致
    handleClose() {
      const obj = {
        path: "/financeList/index",
        query: {
          enterpriseId: encryptWithSM4(this.enterpriseId) // 传递企业ID，确保返回后显示当前企业数据
        }
      };
      this.$tab.closeOpenPage(obj)
    },

    // 跳转到编辑页：携带企业ID和加密参数，与业绩库逻辑一致
    handleEdit() {
      this.$router.push({
        name: "FinanceEdit",
        query: {
          id: this.$route.query.id, // 保留原始加密的ID（避免二次解密/加密导致异常）
          type: encryptWithSM4('edit'), // 对type参数加密，与业绩库对齐
          enterpriseId: this.$route.query.enterpriseId // 保留原始加密的企业ID
        },
        title: '编辑财务报告'
      })
    }
  }
}
</script>

<style scoped lang="scss">
/* 样式部分与原代码一致，无需修改 */
.app-container {
  padding: 24px;
  background: linear-gradient(180deg, #F1F6FF 20%, #E5EFFF 100%);
  min-height: 100vh;
  overflow-y: auto;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
}

.breadcrumb {
  font-size: 14px;
  color: #606266;

  ::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner {
    color: #303133;
    font-weight: 500;
  }
}

.header-actions {
  display: flex;
  gap: 12px;
}

.content-body {
  margin-top: 10px;
}

.content-row {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.form-pane {
  background: #fff;
  border-radius: 16px;
  min-height: 600px;
  box-shadow: 0px 4px 20px 0px rgba(31, 35, 55, 0.1);
  padding: 20px;
  margin-bottom: 20px;
  flex: 1;
  min-width: 300px;
}

// 编辑按钮样式
.edit-btn {
  background: #409EFF;
  border-color: #409EFF;
  color: #fff;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 6px;
  box-shadow: 0px 4px 12px 0px rgba(64, 158, 255, 0.4);
  letter-spacing: 0.5px;
  font-size: 14px;
  transition: all 0.3s ease;

  &:hover {
    background: #66b1ff;
    border-color: #66b1ff;
    box-shadow: 0px 6px 16px 0px rgba(64, 158, 255, 0.5);
    transform: translateY(-1px);
  }
}

// 返回按钮样式
.reset-btn {
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 6px;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.5px;
  font-size: 14px;
  transition: all 0.3s ease;

  &:hover {
    background: #f5f7fa;
    border-color: #c0c4cc;
    color: #409EFF;
    box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
  }
}

// 响应式调整
@media (max-width: 1200px) {
  .content-row {
    gap: 16px;
  }
}

@media (max-width: 992px) {
  .form-pane {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
</style>
