<template>
    <view class="container">
        <view :style="{ height: statusBarHeight + 'px' }"></view>
        <tabcontrolVue :current="tabCurrent">
            <!-- tab0 -->
            <template v-slot:tab0>
                <view class="login-content">
                    <image class="logo" src="../../static/logo.png"></image>
                    <view class="logo-title">就业</view>
                </view>
                <view class="btns">
                    <button open-type="getUserInfo" @getuserinfo="getuserinfo" class="wxlogin">微信登录</button>
                    <view class="wxaddress">青岛市公共就业和人才服务中心</view>
                </view>
            </template>
            <!-- tab1 -->
            <template v-slot:tab1>
                <view class="tabtwo">
                    <view class="tabtwo-top">
                        <view class="color_FFFFFF fs_30">选择您的性别1/6</view>
                        <view class="color_D9D9D9">个人信息仅用于推送优质内容</view>
                    </view>
                    <view class="fl_box fl_justmiddle">
                        <view class="tabtwo-sex">
                            <image class="sex-img" src="../../static/icon/woman.png"></image>
                            <view class="mar_top5">女</view>
                            <view class="dot"></view>
                        </view>
                        <view class="tabtwo-sex">
                            <image class="sex-img" src="../../static/icon/man.png"></image>
                            <view class="mar_top5">男</view>
                            <view class="dot doted"></view>
                        </view>
                    </view>
                    <view class="nextstep" @tap="nextStep">下一步</view>
                </view>
            </template>
            <!-- tab2 -->
            <template v-slot:tab2>
                <view class="tabtwo">
                    <view class="tabtwo-top">
                        <view class="color_FFFFFF fs_30">选择您的年龄断段2/6</view>
                        <view class="color_D9D9D9">个人信息仅用于推送优质内容</view>
                    </view>
                    <view class="fl_box fl_deri fl_almiddle">
                        <view class="agebtn agebtned">30岁以下</view>
                        <view class="agebtn">31-40岁</view>
                        <view class="agebtn">41-50岁</view>
                        <view class="agebtn">51岁以上</view>
                    </view>
                    <view class="fl_box fl_justmiddle"></view>
                    <view class="nextstep" @tap="nextStep">下一步</view>
                </view>
            </template>
            <!-- tab3 -->
            <template v-slot:tab3>
                <view class="tabtwo">
                    <view class="tabtwo-top">
                        <view class="color_FFFFFF fs_30">选择您的学历3/6</view>
                        <view class="color_D9D9D9">个人信息仅用于推送优质内容</view>
                    </view>
                    <view class="eduction-content">
                        <view class="eductionbtn eductionbtned">初中及以下</view>
                        <view class="eductionbtn">中专/中技</view>
                        <view class="eductionbtn">高中</view>
                        <view class="eductionbtn">大专</view>
                        <view class="eductionbtn">本科</view>
                        <view class="eductionbtn">硕士</view>
                        <view class="eductionbtn">博士</view>
                        <view class="eductionbtn">MBA/EMBA</view>
                        <view class="eductionbtn">留学-学士</view>
                        <view class="eductionbtn">留学-硕士</view>
                        <view class="eductionbtn">留学-博士</view>
                    </view>
                    <view class="fl_box fl_justmiddle"></view>
                    <view class="nextstep" @tap="nextStep">下一步</view>
                </view>
            </template>
            <!-- tab4 -->
            <template v-slot:tab4>
                <view class="tabtwo">
                    <view class="tabtwo-top">
                        <view class="color_FFFFFF fs_30">您期望的薪资范围4/6</view>
                        <view class="color_D9D9D9">个人信息仅用于推送优质内容</view>
                    </view>
                    <view class="salary">
                        <scroll-view class="salary-content" :show-scrollbar="false" :scroll-y="true">
                            <view class="salary-content-item">不限</view>
                            <view class="salary-content-item">2k</view>
                            <view class="salary-content-item">5k</view>
                            <view class="salary-content-item">10k</view>
                            <view class="salary-content-item">15k</view>
                        </scroll-view>
                        <view class="center-text">至</view>
                        <scroll-view class="salary-content" :show-scrollbar="false" :scroll-y="true">
                            <view class="salary-content-item">不限</view>
                            <view class="salary-content-item">2k</view>
                            <view class="salary-content-item">5k</view>
                            <view class="salary-content-item">10k</view>
                            <view class="salary-content-item">15k</view>
                            <view class="salary-content-item">15k</view>
                        </scroll-view>
                    </view>
                    <view class="fl_box fl_justmiddle"></view>
                    <view class="nextstep" @tap="nextStep">下一步</view>
                </view>
            </template>
            <!-- tab5 -->
            <template v-slot:tab5>
                <view class="tabtwo">
                    <view class="tabtwo-top">
                        <view class="color_FFFFFF fs_30">您期望的求职区域5/6</view>
                        <view class="color_D9D9D9">个人信息仅用于推送优质内容</view>
                    </view>
                    <view class="fl_box fl_justmiddle"></view>
                    <view class="nextstep" @tap="nextStep">下一步</view>
                </view>
            </template>
            <!-- tab6 -->
            <template v-slot:tab6>
                <view class="tabtwo">
                    <view class="tabtwo-top">
                        <view class="color_FFFFFF fs_30">您的期望岗位6/6</view>
                        <view class="color_D9D9D9">个人信息仅用于推送优质内容</view>
                    </view>
                    <view class="fl_box fl_justmiddle"></view>
                    <!-- <view class="nextstep" @tap="complate">完成</view> -->
                    <navigator url="/pages/index/index" open-type="reLaunch" hover-class="other-navigator-hover">
                        <button class="nextstep" @tap="complate">完成</button>
                    </navigator>
                </view>
            </template>
        </tabcontrolVue>
    </view>
</template>

<script setup>
import tabcontrolVue from './components/tabcontrol.vue';
import { reactive, inject, watch, ref } from 'vue';
const { statusBarHeight } = inject('deviceInfo');
const { $api, navTo } = inject('globalFunction');
const tabCurrent = ref(4);
const state = reactive({
    sex: 1,
});

setTimeout(() => {
    console.log('gg');
}, 4000);
const getuserinfo = (e) => {
    console.log(e);
};

function nextStep() {
    tabCurrent.value += 1;
}
function handleScroll(event) {
    console.log('滚动条滚动', event.detail.scrollTop);
    console.log(Math.round(event.detail.scrollTop / 75));
    // this.activeIndex = Math.round(event.detail.scrollTop / 75);
}
</script>

<style lang="stylus">
.container
    width: 100%;
    height: 100%
    background: linear-gradient(#4778EC, #002979);
    position: relative;

.login-content
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: flex-end;
    flex-wrap: nowrap;
    .logo
        width: 266rpx;
        height: 182rpx;
    .logo-title
        font-size: 88rpx;
        color: #FFFFFF;
        width: 180rpx;
.btns
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, 0)
    .wxlogin
        width: 562rpx;
        height: 140rpx;
        border-radius: 70rpx;
        background-color: #13C57C;
        color: #FFFFFF;
        text-align: center;
        line-height: 140rpx;
        font-size: 70rpx;
    .wxaddress
        color: #BBBBBB;
        margin-top: 70rpx;
        text-align: center;
//  2
.tabtwo
    padding: 40rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
.tabtwo-top
    margin: 222rpx  0 0 0;
    width: 100%;
.tabtwo-sex
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    font-size: 40rpx;
    margin: 200rpx 60rpx 0 60rpx;
    .sex-img
        width: 184rpx;
        height: 184rpx;
.dot
    width: 68rpx;
    height: 68rpx;
    border-radius: 50%;
    background: #d1d1d6;
    position: relative;
.dot:before
    content: '';
    width: 44rpx;
    height: 44rpx;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #1e4baa;
.doted
    background: #13C57C;
.doted:after{
    content: '';
    width: 34rpx;
    height: 34rpx;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%
    background: #13C57C;
}
.agebtn
    width: 630rpx;
    height: 108rpx;
    border-radius: 20rpx;
    background: #d9d9d9;
    text-align: center;
    line-height: 108rpx;
    font-size: 40rpx;
    margin-top: 50rpx;
    color: #606060;
.agebtned
    background: #13C57C;
    color: #FFFFFF;
.nextstep
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, 0)
    width: 630rpx;
    height: 98rpx;
    border-radius: 20rpx;
    background: #13C57C;
    text-align: center;
    line-height: 98rpx;
    font-size: 36rpx;
    color: #FFFFFF;
.eduction-content
    width: fit-content;
    display: grid;
    grid-template-columns: 300rpx 300rpx;
    grid-gap: 20rpx;
    margin-top: 50rpx;
    .eductionbtn
        width: 300rpx;
        height: 108rpx;
        border-radius: 20rpx;
        background: #d9d9d9;
        text-align: center;
        line-height: 108rpx;
        font-size: 36rpx;
        color: #606060;
    .eductionbtned
        background: #13C57C;
        color: #FFFFFF;
.salary
    width: fit-content;
    display: grid;
    grid-template-columns: 300rpx auto 300rpx;
    // grid-gap: 20rpx;
    margin-top: 50rpx;
    .center-text
        color: #FFFFFF;
        text-align: center;
        line-height: 400rpx;
    .salary-content
        width: 300rpx;
        height: 380rpx;
        .salary-content-item
            height: 104rpx;
            line-height: 104rpx;
            margin: 20rpx 10rpx 20rpx 10rpx;
            border-radius: 20rpx;
            background: #d9d9d9;
            text-align: center;
</style>
