<template>
  <div class="app-container">
    <div class="content-header">
      <el-breadcrumb separator="/" class="breadcrumb">
      </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-contract">
          <ContractInfoDetail :detail-data="detailData" />
        </el-col>
      </el-row>
        <!-- 竣工报告与中标通知书详情 -->
      <el-row :gutter="24" class="content-row">
        <el-col :span="8" class="form-pane-CAB">
          <CompletionAndBidInfoDetail :detail-data="detailData" />
        </el-col>
      </el-row>
        <!-- 其他信息详情 -->
      <el-row :gutter="24" class="content-row">
        <el-col :span="8" class="form-pane-otherInfo">
          <OtherInfoDetail :detail-data="detailData" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { decryptWithSM4,encryptWithSM4 } from '@/utils/sm'
import ContractInfoDetail from './child/ContractInfoDetail.vue'
import CompletionAndBidInfoDetail from './child/CompletionAndBidInfoDetail.vue'
import OtherInfoDetail from './child/OtherInfoDetail.vue'
import { getPerformance } from "@/api/enterpriseLibrary/performance/performance";

export default {
  name: 'PerformanceDetail',
  components: {
    ContractInfoDetail,
    CompletionAndBidInfoDetail,
    OtherInfoDetail
  },
  data() {
    return {
      enterpriseId: decryptWithSM4(this.$route.query.enterpriseId) || '',
      id: decryptWithSM4(this.$route.query.id),
      detailData: {} // 存储详情数据
    }
  },
  created() {
    this.fetchDetailData() // 页面加载时获取详情数据
  },
  methods: {
    // 获取详情数据
    async fetchDetailData() {
      try {
        const response = await getPerformance({
          performanceId: this.id,
          enterpriseId: this.enterpriseId
        })
        this.detailData = response.data || {}
        console.log("asdasdasdasd",this.detailData)
      } catch (error) {
        this.$message.error('获取详情失败：' + (error.message || '网络错误'))
      }
    },

    // 返回列表页
    handleClose() {
      const obj = {
        path: "/performanceList/index",
        query: {
          enterpriseId: encryptWithSM4(this.enterpriseId)  // 补充传递企业ID
        }
      };
      this.$tab.closeOpenPage(obj)
    },

    // 跳转到编辑页
    handleEdit() {
      // 携带id和type参数跳转到新增/编辑页面
      this.$router.push({
        name: "PerformanceEdit",
        query: {
          id: this.$route.query.id,
          type: 'edit',
          enterpriseId: this.$route.query.enterpriseId
        },
        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-contract {
  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;
}

.form-pane-CAB {
  background: #fff;
  border-radius: 16px;
  min-height: 500px;
  box-shadow: 0px 4px 20px 0px rgba(31, 35, 55, 0.1);
  padding: 20px; /* 详情页增加内边距 */
  margin-bottom: 20px;
  flex: 1;
  min-width: 300px;
}

.form-pane-otherInfo {
  background: #fff;
  border-radius: 16px;
  min-height: 400px;
  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样式）
.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>
