<!-- 工单编辑-外壳 -->
<template>
    <view class="PageBox">
        <view class="TopBox FlexBox">
            <view class="iconBox FlexBox">
                <!-- 返回上一页 -->
                <u-icon name="arrow-leftward" size="24"></u-icon>
                <!-- 返回主页 -->
                 <u-icon name="home" size="24"></u-icon>
            </view>
            <view class="Title">工单编辑</view>
            <view class="informBox">
                <u-icon name="bell-fill" size="24"></u-icon>
                <view class="MsgTxt"></view>
            </view>
        </view>
        <view class="ContentBox">
            <BasicsInfo ref="basicsInfoRef"></BasicsInfo>
        </view>
        <view class="FootBox" v-for="item in stepList" :key="item.id">
            <u-button :text="item.PrevBtnName"  type="info"></u-button>
            <u-button :text="item.NextBtnName"  color="#2979ff" @click="nextStep"></u-button>
        </view>
    </view>
</template>
<script setup>
import { ref } from 'vue'
import BasicsInfo from './compoents/BasicsInfo.vue'
const currentStep = ref(1)// 当前步骤
const basicsInfoRef = ref(null); // 基础信息组件引用

// 步骤列表
const stepList = ref([
    {   
        id: 1,
        Title: '工单基础信息',
        PrevBtnName: '保存草稿',
        NextBtnName: '下一步（申请出入证）',
    },
    {
        id: 2,
        Title: '出入证申请',
        PrevBtnName: '返回修改',
        NextBtnName: '提交+下一步（填写工作票）',
    },
    {
        id: 3,
        Title: '填写工作票',
        PrevBtnName: '保存草稿',
        NextBtnName: '提交工单',
    },
])

// 点击下一步
const nextStep = () => {
    console.log(basicsInfoRef.value.getFormData());
}


</script>
<style lang="scss" scoped>
.FlexBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20rpx;
}

.PageBox {
    background-color: #ff9900;
    height: 100vh;
    overflow: hidden;

    .TopBox {
        height: 100rpx;
        padding: 20rpx;
        background-color: #fff;
        .iconBox {
           font-size: 32rpx;
        }
        .Title{
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
        }
        .informBox {
          .MsgTxt{
            padding: 8rpx;
            background-color: hsla(17, 100%, 50%, 0.849);
            color: #fff;
            position: absolute;
            top: 16rpx;
            right: 16rpx;
            border-radius: 50%;
          }
        }
    }

    .ContentBox {
        background-color: #c5d5d6;
        height: calc(100vh - 200rpx);
        overflow: hidden;
    }

    .FootBox {
        height: 100rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20rpx;
        padding: 20rpx;
        background-color: #fff;
    }
}
</style>