<template>
    <div class="page">
        <NavBar :showIcon="true" :showTitle="true" title="岗位信息" backgroundBox="#FFFFFF"></NavBar>
        <wd-tabs v-model="tab">
            <block v-for="item in tabList" :key="item.id">
                <wd-tab :title="item.name">
                    <view class="from-1" v-if="tab == 0"> 1</view>
                    <view v-else>2</view>
                </wd-tab>
            </block>
        </wd-tabs>
        <wd-tabbar
            v-if="tab == 0"
            custom-style="display: flex;justify-content: center !important;z-index:1;"
            fixed
            placeholder
            safeAreaInsetBottom
        >
            <view class="footer"> <button class="foot-btn" @click="openMask">下一步</button></view>
        </wd-tabbar>
        <wd-tabbar
            v-else
            custom-style="display: flex;justify-content: center !important;z-index:1;"
            fixed
            placeholder
            safeAreaInsetBottom
        >
            <view class="footer">
                <button class="foot-btn1" @click="addPost">继续添加</button>
                <button class="foot-btn" @click="openMask">提交报名</button></view
            >
        </wd-tabbar>
    </div>
</template>

<script setup>
import { ref } from "vue";
const tab = ref(0);
const tabList = ref([
    { id: 213213, name: "选择已有岗位", type: 1 },
    { id: 1651651, name: "新增岗位", type: 2 }
]);
</script>

<style lang="scss" scoped>
.footer {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    .foot-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 296rpx;
        height: 80rpx;
        color: #ffffff;
        background: #1f86ff;
        border-radius: 12rpx;
    }
    .foot-btn1 {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 296rpx;
        height: 80rpx;
        color: #1f86ff;
        background: #e8f2ff;
        border-radius: 12rpx;
    }
}
</style>
