<template>
    <div class="bit-design-test">
        <div class="test-header">
            <h2>钻头设计页面跳转测试</h2>
            <p>点击下面的按钮测试页面跳转功能</p>
        </div>

        <div class="test-buttons">
            <el-button size="small" type="primary" @click="goToBitDesign">钻头设计参数推荐</el-button>
            <el-button size="small" type="success" @click="goToRecommendation">钻头设计参数推荐</el-button>
            <el-button size="small" type="warning" @click="goToMatching">钻头匹配</el-button>
            <el-button size="small" type="info" @click="goToSelectionInfo">查看选型信息</el-button>
        </div>

        <div class="test-info">
            <h3>当前路由信息：</h3>
            <p><strong>路径：</strong>{{ $route.path }}</p>
            <p><strong>名称：</strong>{{ $route.name }}</p>
            <p><strong>参数：</strong>{{ JSON.stringify($route.query) }}</p>
        </div>
    </div>
</template>

<script>
export default {
    name: 'BitDesignTest',
    methods: {
        goToBitDesign() {
            this.$router.push({
                name: 'BitDesign',
                query: { jh: '顺903H', qk: '顺北' }
            })
        },

        goToRecommendation() {
            this.$router.push({
                name: 'BitDesignRecommendation',
                query: { from: 'test', jh: '顺903H', qk: '顺北' }
            })
        },

        goToMatching() {
            this.$router.push({
                name: 'BitMatching',
                query: { from: 'test', jh: '顺903H', qk: '顺北' }
            })
        },

        goToSelectionInfo() {
            this.$router.push({
                name: 'BitSelectionInfo',
                query: { from: 'test', jh: '顺903H', qk: '顺北' },
                params: {
                    bitData: {
                        model: 'HJT537GL',
                        size: 150,
                        category: 'PDC钻头',
                        number: 1
                    }
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.bit-design-test {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;

    .test-header {
        text-align: center;
        margin-bottom: 30px;

        h2 {
            color: #333;
            margin-bottom: 10px;
        }

        p {
            color: #666;
        }
    }

    .test-buttons {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-bottom: 30px;

        .el-button {
            width: 100%;
            height: 50px;
            font-size: 16px;
        }
    }

    .test-info {
        background-color: #f5f7fa;
        padding: 20px;
        border-radius: 4px;

        h3 {
            margin-top: 0;
            color: #333;
        }

        p {
            margin: 5px 0;
            color: #666;

            strong {
                color: #333;
            }
        }
    }
}
</style>
