<template>
  <div class="page">
    <div class="page-title">
      工厂详情
      <el-button class="back-btn" plain size="small" @click="goBack">返回</el-button>
    </div>
    <div class="card" v-if="factory">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="工厂全称">{{ factory.factory_name }}</el-descriptions-item>
        <el-descriptions-item label="品牌">{{ factory.brand }}</el-descriptions-item>
        <el-descriptions-item label="经销商">{{ factory.dealer_name }}</el-descriptions-item>
        <el-descriptions-item label="产品分类">{{ factory.product_category }}</el-descriptions-item>
        <el-descriptions-item label="地区">{{ formatRegion(factory.province, factory.city, factory.district) }}</el-descriptions-item>
        <el-descriptions-item label="地址">{{ factory.address }}</el-descriptions-item>
        <el-descriptions-item label="官网">{{ factory.website }}</el-descriptions-item>
        <el-descriptions-item label="材料数量">{{ factory.material_count }}</el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { formatRegion } from '@/utils/region'
import { fetchFactoryDetail } from '@/api/factory'

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

const loadDetail = async () => {
  factory.value = await fetchFactoryDetail(route.params.id)
}

onMounted(loadDetail)

const goBack = () => {
  router.back()
}
</script>

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

