<template>
  <div class="app-container">
    <!-- 商机信息模块 -->
    <div class="module-container">
      <div class="module-header">
        <i class="el-icon-document"></i>
        <span>商机信息</span>
      </div>
      <div class="module-content">
        <el-descriptions :column="3" border>
          <el-descriptions-item label="商机编号">{{ currentData.opportunityCode || '-' }}</el-descriptions-item>
          <el-descriptions-item label="商机名称">{{ currentData.opportunityName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="商机阶段">{{ currentData.opportunityStage || '-' }}</el-descriptions-item>
          <el-descriptions-item label="填报时间">{{ currentData.fillTime ? new Date(currentData.fillTime).toLocaleString() : '-' }}</el-descriptions-item>
          <el-descriptions-item label="预计签约时间">{{ currentData.estimatedSignDate ? new Date(currentData.estimatedSignDate).toLocaleDateString() : '-' }}</el-descriptions-item>
          <el-descriptions-item label="预计合同总金额">{{ currentData.estimatedContractAmount ? currentData.estimatedContractAmount + '万元' : '-' }}</el-descriptions-item>
          <el-descriptions-item label="自然客户名称">{{ currentData.oppNaturalCustomerName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="自然客户ID">{{ currentData.oppNaturalCustomerId || '-' }}</el-descriptions-item>
          <el-descriptions-item label="客户资金来源">{{ currentData.customerFundSource || '-' }}</el-descriptions-item>
          <el-descriptions-item label="商机归属人">{{ currentData.opportunityOwner || '-' }}</el-descriptions-item>
          <el-descriptions-item label="商机单位">{{ currentData.opportunityUnit || '-' }}</el-descriptions-item>
          <el-descriptions-item label="客户需求简介">{{ currentData.customerRequirement || '-' }}</el-descriptions-item>
          <el-descriptions-item label="支撑负责人">{{ currentData.supportPerson || '-' }}</el-descriptions-item>
          <el-descriptions-item label="支撑部门">{{ currentData.supportDepartment || '-' }}</el-descriptions-item>
          <el-descriptions-item label="支撑单位">{{ currentData.supportUnit || '-' }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>

    <!-- 公开市场模块 -->
    <div class="module-container">
      <div class="module-header">
        <i class="el-icon-money"></i>
        <span>公开市场</span>
      </div>
      <div class="module-content">
        <!-- 招标信息 -->
        <div class="section-container">
          <!-- <h3>招标信息</h3> -->
          <el-descriptions :column="3" border>
            <el-descriptions-item label="公告标题">{{ currentData.announcementTitle || '-' }}</el-descriptions-item>
            <el-descriptions-item label="招标公告发布时间">{{ currentData.tenderInfoPublishTime ? new Date(currentData.tenderInfoPublishTime).toLocaleString() : '-' }}</el-descriptions-item>
            <el-descriptions-item label="购买标书截止时间">{{ currentData.bidDocumentDeadline ? new Date(currentData.bidDocumentDeadline).toLocaleString() : '-' }}</el-descriptions-item>
            <el-descriptions-item label="项目编号">{{ currentData.projectCode || '-' }}</el-descriptions-item>
            <el-descriptions-item label="项目名称">{{ currentData.projectName || '-' }}</el-descriptions-item>
            <el-descriptions-item label="招标方式">{{ currentData.announcementType || '-' }}</el-descriptions-item>
            <el-descriptions-item label="开标时间">{{ currentData.bidOpeningDate ? new Date(currentData.bidOpeningDate).toLocaleString() : '-' }}</el-descriptions-item>
            <el-descriptions-item label="采购预算">{{ currentData.budget ? '¥' + currentData.budget.toLocaleString() : '-' }}</el-descriptions-item>
            <el-descriptions-item label="是否参与">{{ currentData.isParticipate === 1 ? '是' : '否' }}</el-descriptions-item>
          </el-descriptions>
        </div>

        <!-- 中标信息 -->
        <!-- <div class="section-container">
          <h3>中标信息</h3>
          <el-descriptions :column="3" border>
            <el-descriptions-item label="是否关联">{{ currentData.isRelevant === 1 ? '是' : '否' }}</el-descriptions-item>
            <el-descriptions-item label="项目编号">{{ currentData.projectCode || '-' }}</el-descriptions-item>
            <el-descriptions-item label="项目名称">{{ currentData.projectName || '-' }}</el-descriptions-item>
          </el-descriptions>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { getOpportunityDetail, } from '@/api/newApi/bizoppmanage'
export default {
  data() {
    return {
      // 页面标题
      title: '商机详情',
      // 商机详情数据
      currentData: {}
    }
  },
  mounted() {
    // 初始化获取商机详情
    this.getDetail();
    // 页面加载完成后的处理
    document.title = this.title
  },
  methods: {
    // 获取商机详情
    getDetail() {
      getOpportunityDetail(this.$route.query.id).then(response => {
        if (response.code === 200) {
          this.currentData = response.data || {};
        } else {
          this.$message.error(response.msg || '获取商机详情失败');
        }
      });
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
  background-color: #f5f7fa;
}

.module-container {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  overflow: hidden;
}

.module-header {
  padding: 15px 20px;
  background-color: #ecf5ff;
  border-bottom: 1px solid #e6f2ff;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.module-header .el-icon {
  margin-right: 8px;
  color: #409eff;
}

.module-content {
  padding: 20px;
}

.section-container {
  margin-bottom: 20px;
}

.section-container h3 {
  margin: 0 0 15px 0;
  padding: 0 0 10px 0;
  border-bottom: 1px solid #ebeef5;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

/* 响应式布局调整 */
@media (max-width: 1200px) {
  .el-descriptions {
    --el-descriptions-column: 2 !important;
  }
}

@media (max-width: 768px) {
  .el-descriptions {
    --el-descriptions-column: 1 !important;
  }

  .app-container {
    padding: 10px;
  }

  .module-content {
    padding: 15px;
  }
}
</style>