<template>
  <div class="template-info">
    <h3 class="section-title">模板信息</h3>
    <el-form :model="formData" label-width="140px" class="info-form" size="medium">
      <el-row :gutter="32">
        <el-col :span="8"><el-form-item label="模板名称"><el-input v-model="formData.templateName" disabled class="info-input" /></el-form-item></el-col>
        <el-col :span="8"><el-form-item label="行业类型"><el-input v-model="formData.industryType" disabled class="info-input" /></el-form-item></el-col>
        <!-- 新增：项目文件组成 -->
        <el-col :span="8"><el-form-item label="项目文件组成"><el-input v-model="formData.projectFileNames" disabled class="info-input" /></el-form-item></el-col>
        <!-- 新增：标段/标包文件组成 -->
        <el-col :span="8"><el-form-item label="标段/标包文件组成"><el-input v-model="formData.sectionFileNames" disabled class="info-input" /></el-form-item></el-col>
        <el-col :span="8">
          <el-form-item label="解析标签组">
            <!-- 显示加载状态 -->
            <el-input
              v-model="formData.analysisLabelName"
              disabled
              class="info-input"
              style="color: #1F72EA; font-weight: 500;"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8"><el-form-item label="最近更新时间"><el-input v-model="formData.updateTime" disabled class="info-input" /></el-form-item></el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { listAnalysisLabel } from '@/api/template/analysisLabel/analysisLabel'

export default {
  name: 'TemplateInfo',
  data() {
    return {
      formData: {
        templateName: '',
        industryType: '',
        projectFileNames: '', // 项目文件组成
        sectionFileNames: '', // 标段/标包文件组成
        currentVersion: '',
        publishStatusText: '',
        updateTime: '',
        templateDesc: '',
        analysisLabelName: '',
        analysisLabelId: ''
      }
    }
  },

  methods: {
    /**
     * 接收父组件传递的模板数据并格式化
     * @param {Object} data - 父组件传递的模板详情数据 (来自 getTemplateInfoDetail)
     */
    async setFormData(data) {
      const compositionList = data.compositionList || [];

      // 筛选并拼接项目文件 (compositionType === '1')
      const projectFiles = compositionList
        .filter(item => item.compositionType === '1')
        .map(item => item.fileName)
        .join('、') || '无';

      // 筛选并拼接标段/标包文件 (compositionType === '2')
      const sectionFiles = compositionList
        .filter(item => item.compositionType === '2')
        .map(item => item.fileName)
        .join('、') || '无';

      // 基础字段赋值
      this.formData = {
        ...this.formData, // 保留初始状态
        templateName: data.templateName || '-',
        industryType: data.industryType || '-',
        projectFileNames: projectFiles,
        sectionFileNames: sectionFiles,
        currentVersion: data.currentVersion || '-',
        publishStatusText: data.publishedStatus === '1' ? '已发布' : '未发布',
        updateTime: data.updateTime || '-',
        templateDesc: data.templateDesc || '无',
        analysisLabelId: data.analysisLabelId || ''
      };

      // 如果有analysisLabelId，查询对应的标签名称
      if (this.formData.analysisLabelId) {
        try {
          // 调用API查询标签信息
          // 假设listAnalysisLabel可以根据ID查询，或者返回所有标签后我们自己过滤
          const response = await listAnalysisLabel({
            // 根据实际API需求传递参数，这里假设可以通过ID查询
            analysisLabelId: this.formData.analysisLabelId
          });
          console.log('asdasd',response)

          // 根据实际返回的数据结构处理
          if (response.code === 200 && response.rows && response.rows.length > 0) {
            console.log('asdasd',response)
            this.formData.analysisLabelName = response.rows[0].analysisLabelName || '无';
          } else {
            this.formData.analysisLabelName = '无';
          }
        } catch (error) {
          console.error('查询解析标签失败:', error);
          this.formData.analysisLabelName = '查询失败';
        }
      } else {
        // 如果没有ID，直接显示无
        this.formData.analysisLabelName = '无';
      }
    }
  }
}
</script>

<style scoped lang="scss">
/* 样式部分保持不变 */
.template-info { width: 100%; }
.section-title { font-size: 16px; font-weight: 600; color: #303133; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #ebeef5; }
.info-form { width: 100%; }
.info-input { background-color: #f8faff; border-color: #e6f7ff; border-radius: 8px; ::v-deep .el-input__inner { background-color: #f8faff; color: #303133; } }
.info-textarea { background-color: #f8faff; border-color: #e6f7ff; border-radius: 8px; ::v-deep .el-textarea__inner { background-color: #f8faff; border-color: #e6f7ff; color: #303133; resize: none; } }
@media (max-width: 768px) {
  .info-form .el-row { flex-direction: column; }
  .info-form .el-col { width: 100% !important; margin-bottom: 12px; }
}
</style>
