<template>
  <div class="page">
    <div class="page-title">
      材料详情
      <el-button class="back-btn" plain size="small" @click="goBack">返回</el-button>
    </div>
    <div class="card detail-card" v-if="material">
      <el-descriptions :column="1" border class="detail-descriptions">
        <el-descriptions-item label="材料名称">{{ displayText(material.name) }}</el-descriptions-item>
        <el-descriptions-item label="专业类别">{{ displayText(material.major_category_display) }}</el-descriptions-item>
        <el-descriptions-item label="材料分类">{{ displayText(material.material_category) }}</el-descriptions-item>
        <el-descriptions-item label="材料子类">{{ displayText(material.material_subcategory) }}</el-descriptions-item>
        <el-descriptions-item label="阶段">{{ displayText(material.stage_display) }}</el-descriptions-item>
        <el-descriptions-item label="重要等级">{{ displayText(material.importance_level_display) }}</el-descriptions-item>
        <el-descriptions-item label="落地项目">{{ displayText(material.landing_project) }}</el-descriptions-item>
        <el-descriptions-item label="对接人">{{ displayText(material.contact_person) }}</el-descriptions-item>
        <el-descriptions-item label="对接人联系方式">{{ displayText(material.contact_phone) }}</el-descriptions-item>
        <el-descriptions-item label="经办人">{{ displayText(material.handler) }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ displayText(material.remark) }}</el-descriptions-item>
        <el-descriptions-item label="规格型号">{{ displayText(material.spec) }}</el-descriptions-item>
        <el-descriptions-item label="符合标准">{{ displayText(material.standard) }}</el-descriptions-item>
        <el-descriptions-item label="应用场景">{{ displayList(material.application_scene_display) }}</el-descriptions-item>
        <el-descriptions-item label="应用说明">{{ displayText(material.application_desc) }}</el-descriptions-item>
        <el-descriptions-item label="替代材料类型">{{ displayText(material.replace_type_display) }}</el-descriptions-item>
        <el-descriptions-item label="竞争优势">{{ displayList(material.advantage_display) }}</el-descriptions-item>
        <el-descriptions-item label="优势说明">{{ displayText(material.advantage_desc) }}</el-descriptions-item>
        <el-descriptions-item label="成本对比">{{ formatPercent(material.cost_compare) }}</el-descriptions-item>
        <el-descriptions-item label="成本说明">{{ displayText(material.cost_desc) }}</el-descriptions-item>
        <el-descriptions-item label="案例">{{ displayText(material.cases) }}</el-descriptions-item>
        <el-descriptions-item label="所属工厂">{{ displayText(material.factory_name) }}</el-descriptions-item>
        <el-descriptions-item label="质量等级">{{ formatStarLevel(material.quality_level) }}</el-descriptions-item>
        <el-descriptions-item label="耐久等级">{{ formatStarLevel(material.durability_level) }}</el-descriptions-item>
        <el-descriptions-item label="环保等级">{{ formatStarLevel(material.eco_level) }}</el-descriptions-item>
        <el-descriptions-item label="低碳等级">{{ formatStarLevel(material.carbon_level) }}</el-descriptions-item>
        <el-descriptions-item label="总评分">{{ formatStarLevel(material.score_level) }}</el-descriptions-item>
        <el-descriptions-item label="连接方式">{{ displayText(material.connection_method) }}</el-descriptions-item>
        <el-descriptions-item label="施工工艺">{{ displayText(material.construction_method) }}</el-descriptions-item>
        <el-descriptions-item label="限制条件">{{ displayText(material.limit_condition) }}</el-descriptions-item>
      </el-descriptions>
      <div v-if="material.brochure_url" class="brochure">
        <div class="brochure-title">宣传页</div>
        <img :src="material.brochure_url" alt="宣传页" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { fetchMaterialDetail } from '@/api/material'

const route = useRoute()
const router = useRouter()
const material = ref(null)

const loadDetail = async () => {
  material.value = await fetchMaterialDetail(route.params.id)
}

onMounted(loadDetail)

const goBack = () => {
  router.back()
}

const displayText = (value) => value || '-'

const displayList = (value) => (value?.length ? value.join('、') : '-')

const formatPercent = (value) => (value === null || value === undefined || value === '' ? '-' : `${value}%`)

const formatStarLevel = (value) => (value ? `${value}星` : '-')
</script>

<style scoped>
.page-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brochure {
  margin-top: 20px;
}

.brochure-title {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
}

.brochure img {
  max-width: 100%;
  border-radius: 8px;
  border: 1px solid #eee;
}
</style>
