<template>
    <div class="bit-design-container">
        <!-- 页面标题和导航 -->
        <div class="page-header">
            <h2>钻头设计系统</h2>
            <div class="breadcrumb">
                <span v-for="(item, index) in breadcrumb" :key="index"
                    :class="{ active: index === breadcrumb.length - 1 }" @click="navigateToBreadcrumb(index)">
                    {{ item }}
                    <span v-if="index < breadcrumb.length - 1" class="separator"> > </span>
                </span>
            </div>
        </div>

        <!-- 页面内容区域 -->
        <div class="page-content">
            <!-- 主页面 - 钻头设计参数推荐 -->
            <BitDesign v-if="currentPage === 'main'" @show-recommendation="showRecommendation"
                @show-matching="showMatching" @show-selection-info="showSelectionInfo" />

            <!-- 钻头设计参数推荐页面 -->
            <BitDesignRecommendation v-if="currentPage === 'recommendation'" @match-bit="showMatching" @back="goBack" />

            <!-- 钻头匹配页面 -->
            <BitMatching v-if="currentPage === 'matching'" @view-bit="showSelectionInfo" @return="goBack" />

            <!-- 查看选型信息页面 -->
            <BitSelectionInfo v-if="currentPage === 'selection-info'" :bit-data="selectedBitData" @modify="handleModify"
                @digitalize="handleDigitalize" @delete="handleDelete" @return="goBack" @close="goBack" />
        </div>
    </div>
</template>

<script>
import BitDesign from './BitDesign.vue'
import BitDesignRecommendation from './BitDesignRecommendation.vue'
import BitMatching from './BitMatching.vue'
import BitSelectionInfo from './BitSelectionInfo.vue'

export default {
    name: 'BitDesignContainer',
    components: {
        BitDesign,
        BitDesignRecommendation,
        BitMatching,
        BitSelectionInfo
    },
    data() {
        return {
            currentPage: 'main', // 当前页面：main, recommendation, matching, selection-info
            selectedBitData: null, // 选中的钻头数据
            pageHistory: ['main'], // 页面历史记录
            breadcrumb: ['钻头设计参数推荐'] // 面包屑导航
        }
    },
    methods: {
        // 显示推荐方案页面
        showRecommendation() {
            this.currentPage = 'recommendation'
            this.updateBreadcrumb('钻头设计参数推荐')
            this.addToHistory('recommendation')
        },

        // 显示匹配页面
        showMatching() {
            this.currentPage = 'matching'
            this.updateBreadcrumb('钻头匹配')
            this.addToHistory('matching')
        },

        // 显示选型信息页面
        showSelectionInfo(bitData = null) {
            this.currentPage = 'selection-info'
            this.selectedBitData = bitData
            this.updateBreadcrumb('查看选型信息')
            this.addToHistory('selection-info')
        },

        // 返回上一页
        goBack() {
            if (this.pageHistory.length > 1) {
                this.pageHistory.pop() // 移除当前页面
                const previousPage = this.pageHistory[this.pageHistory.length - 1]
                this.currentPage = previousPage
                this.updateBreadcrumbFromHistory()
            } else {
                // 如果没有历史记录，返回主页面
                this.currentPage = 'main'
                this.breadcrumb = ['钻头设计参数推荐']
            }
        },

        // 添加到历史记录
        addToHistory(page) {
            this.pageHistory.push(page)
        },

        // 更新面包屑导航
        updateBreadcrumb(pageName) {
            const breadcrumbMap = {
                'main': '钻头设计参数推荐',
                'recommendation': '钻头设计参数推荐',
                'matching': '钻头匹配',
                'selection-info': '查看选型信息'
            }

            // 移除当前页面的面包屑（如果存在）
            if (this.breadcrumb.length > 1) {
                this.breadcrumb.pop()
            }

            // 添加新页面的面包屑
            this.breadcrumb.push(pageName)
        },

        // 从历史记录更新面包屑
        updateBreadcrumbFromHistory() {
            const breadcrumbMap = {
                'main': '钻头设计参数推荐',
                'recommendation': '钻头设计参数推荐',
                'matching': '钻头匹配',
                'selection-info': '查看选型信息'
            }

            this.breadcrumb = this.pageHistory.map(page => breadcrumbMap[page])
        },

        // 面包屑导航点击
        navigateToBreadcrumb(index) {
            if (index < this.pageHistory.length) {
                // 截取到指定位置的历史记录
                this.pageHistory = this.pageHistory.slice(0, index + 1)
                this.currentPage = this.pageHistory[index]
                this.updateBreadcrumbFromHistory()
            }
        },

        // 处理修改操作
        handleModify() {
            console.log('修改钻头信息')
            this.$message.info('修改功能待实现')
        },

        // 处理数字化操作
        handleDigitalize() {
            console.log('数字化处理')
            this.$message.info('数字化功能待实现')
        },

        // 处理删除操作
        handleDelete() {
            console.log('删除钻头')
            this.$message.success('删除成功')
            this.goBack()
        }
    }
}
</script>

<style lang="scss" scoped>
.bit-design-container {
    padding: 20px;
    background-color: #f5f7fa;
    min-height: 100vh;

    .page-header {
        background-color: #fff;
        padding: 20px;
        border-radius: 4px;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

        h2 {
            margin: 0 0 10px 0;
            color: #333;
            font-size: 20px;
            font-weight: bold;
        }

        .breadcrumb {
            display: flex;
            align-items: center;
            flex-wrap: wrap;

            span {
                color: #666;
                cursor: pointer;
                font-size: 14px;
                transition: color 0.3s;

                &:hover {
                    color: #409EFF;
                }

                &.active {
                    color: #409EFF;
                    font-weight: bold;
                }

                .separator {
                    margin: 0 8px;
                    color: #999;
                    cursor: default;

                    &:hover {
                        color: #999;
                    }
                }
            }
        }
    }

    .page-content {
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }
}
</style>
