<template>
    <div class="dcs">
        <HeaderComponent :title="'硫酸钠工序流程'" />

        <div class="flow_select">
            <!-- MGM 测试按钮 -->
            <div class="flow_btn mgm" @click="$router.push('/controlPage/flowSelect/mgm')">
                <div class="flow_title">MGM</div>
            </div>

            <!-- 正式按钮 -->
            <div class="flow_btn reaction" @click="$router.push('/controlPage/flowSelect/reaction')">反应</div>
            <div class="flow_btn separation">第一次固液分离</div>
            <div class="flow_btn filter">24平带式过滤</div>

            <!-- 箭头组件 -->
            <!-- 反应 → 第一次固液分离 -->
            <ArrowComponent class="arrow arrow1" :specialCondition="{ arrowRotate: 0 }" />

            <!-- 反应 → 24平带式过滤 -->
            <ArrowComponent class="arrow arrow2" :specialCondition="{ arrowRotate: 0 }" />

            <!-- 第一次固液分离 → 24平带式过滤 -->
            <ArrowComponent class="arrow arrow3" :specialCondition="{ arrowRotate: 0 }" />
        </div>
    </div>
</template>

<script setup>
import HeaderComponent from '@/components/DCS/HeaderComponent.vue'
import ArrowComponent from '@/components/GeneralComponents/ArrowComponent.vue'
</script>

<style lang="scss" scoped>
.dcs {
    position: relative;
    width: 1920px;
    height: 1080px;
    overflow: hidden;

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: url('@/assets/dcs/flowBg.jpeg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        filter: blur(2px);
        z-index: 0;
    }

    .flow_select {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 1;

        .flow_btn {
            position: absolute;
            width: 260px;
            height: 160px;
            background-color: rgba(255, 255, 255, 0.06);
            border: 2px solid #e18a3b;
            border-radius: 16px;
            box-shadow: 0 0 15px rgba(255, 153, 0, 0.4);
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #ffd180;
            font-size: 30px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;

            &:hover {
                background-color: rgba(255, 255, 255, 0.12);
                transform: scale(1.05);
                box-shadow: 0 0 25px rgba(255, 153, 0, 0.8);
            }
        }

        .mgm {
            top: 40px;
            left: 60px;
        }

        .reaction {
            top: 277px;
            left: 400px;
        }

        .separation {
            top: 100px;
            left: 800px;
        }

        .filter {
            top: 460px;
            left: 800px;
        }

        .arrow {
            position: absolute;
            z-index: 2;
        }

        .arrow1 {
            top: 230px;
            left: 750px;
            transform: translate(-50%, -50%) rotate(-35deg);
        }

        .arrow2 {
            top: 490px;
            left: 750px;
            transform: translate(-50%, -50%) rotate(35deg);
        }

        .arrow3 {
            top: 365px;
            left: 920px;
            transform: translate(-50%, -50%) rotate(90deg);
        }
    }
}
</style>
