<template>
    <div class="plan-details">
        <el-row>
            <el-col>
                <el-card>
                    <div class="header">
                        <span class="back-arrow" @click="handleBack">
                            <el-icon>
                                <ArrowLeft />
                            </el-icon>
                        </span>
                        <h2>Q2风电轴承采购计划</h2>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row gutter="10">
            <el-col :span="18">
                <el-card>
                    <detailInfo />
                </el-card>
            </el-col>
            <el-col :span="6" style="flex-grow: 1;">
                <el-card style="height: 100%;">
                    <DetailsProcess />
                </el-card>
            </el-col>
        </el-row>

    </div>
</template>
<style scoped lang="scss">
.plan-details {
    padding: 20px;
    background-color: #F1F7FB;
}

.header {
    display: flex;
    align-items: center;
}

.back-arrow {
    font-size: 20px;
    margin-right: 10px;
    cursor: pointer;
}
</style>
<script setup>
import detailInfo from './components/detailInfo.vue';
import DetailsProcess from './components/DetailsProcess.vue';

const router = useRouter();
const handleBack = () => {
    router.back();
}
</script>