<template>
    <div class="production-detail">
        <div>
            <el-breadcrumb class="breadcrumb" separator="/">
                <el-breadcrumb-item class="text-sm" :to="{ path: '/' }">
                    {{ $t('navigation.home') }}
                </el-breadcrumb-item>
                <el-breadcrumb-item class="text-sm" :to="{ path: '/' }">
                    {{ $t('productions') }}
                </el-breadcrumb-item>
                <el-breadcrumb-item class="text-sm" :to="{ path: '/' }">
                    示例
                </el-breadcrumb-item>
            </el-breadcrumb>


            <div class="production-header">
                <div class="production-image">
                    <el-empty description="产品图片" class="border" />
                </div>
                <div class="production-info">
                    <h1>产品名称</h1>
                    <p class="summary">产品描述...</p>
                </div>
            </div>

            <div class="production-content">
                <el-tabs v-model="activeName" class="production-tabs">
                    <el-tab-pane label="产品详情" name="details">
                        <p>这里是产品的详细描述内容...</p>
                    </el-tab-pane>
                    <el-tab-pane label="技术规格" name="specs">
                        <p>这里是产品的技术规格内容...</p>
                    </el-tab-pane>
                    <el-tab-pane label="常见问题" name="faq">
                        <p>这里是产品的常见问题内容...</p>
                    </el-tab-pane>
                    <el-tab-pane label="相关资料" name="resources">
                        <p>这里是产品的相关资料内容...</p>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
const activeName = ref('details')
</script>

<style scoped lang="scss">
.production-detail {
    min-height: 60vh;
}

.breadcrumb {
    padding: 0rem 1rem;
    margin-bottom: 2rem;
}

.breadcrumb-item {
    color: var(--el-color-info);
}

.production-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.production-image .el-empty {
    width: 100%;
    height: 400px;
    border-radius: 8px;
}

.production-info h1 {
    color: var(--el-color-text);
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 2rem;
}

.production-info p {
    color: var(--el-color-info);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.el-tab-pane {
    margin-top: 1rem;
}
</style>