<template>
    <div class="page">
        <NavBar :showIcon="true" :showTitle="true" title="岗位信息" backgroundBox="#FFFFFF"></NavBar>
        <wd-tabs sticky :offset-top="0" 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">
                        <wd-checkbox-group v-model="value">
                            <view class="wd-cell-item" v-for="i in gwList" :key="i.id">
                                <wd-checkbox :value="i"></wd-checkbox>
                                <view class="right">
                                    <view class="position-name">{{ i.name }}</view>
                                    <view class="tip">贵阳｜{{ i.workDic }}｜{{ i.jobTypeName }}</view>
                                </view>
                            </view>
                        </wd-checkbox-group>
                    </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";
import { positionList } from "@/api/user";

import { getEumData } from "@/utils/utils";
const tab = ref(0);
const value = ref([]);
const gwList = ref([]);
const EnumWorkMode = ref([]);
const tabList = ref([
    { id: 213213, name: "选择已有岗位", type: 1 },
    { id: 1651651, name: "新增岗位", type: 2 }
]);
const getEnumWorkMode = async () => {
    EnumWorkMode.value = await getEumData("EnumWorkMode");
    console.log("EnumWorkMode.value", EnumWorkMode.value);
};
getEnumWorkMode();
positionList({}).then(res => {
    res.data = res.data.map(item => {
        item.workDic = EnumWorkMode.value.find(v => v.code == item.workMode).text;
        return item;
    });
    gwList.value = res.data;
});
</script>

<style lang="scss" scoped>
.page {
    width: 100%;
    .from-1 {
        display: flex;
        flex-direction: column;
        width: 100%;
        .wd-cell-item {
            display: flex;
            width: 100%;
            box-sizing: border-box;
            padding: 32rpx 28rpx;
            border-bottom: 2rpx solid #e0e0e1;
            .right {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                .position-name {
                    font-size: 32rpx;
                    font-weight: 500;
                    color: #1b2026;
                }
                .tip {
                    font-size: 24rpx;
                    color: #77818f;
                }
            }
        }
    }
    .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>
