<template>
    <AppLayout title="AI+就业服务程序">
        <tabcontrolVue :current="tabCurrent">
            <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 class="wxlogin" @click="loginTest">内测登录</button>
                    <view class="wxaddress">青岛市公共就业和人才服务中心</view>
                </view>
            </template>
            <template v-slot:tab1>
                <view class="content-one">
                    <view>
                        <view class="content-title">
                            <view class="title-lf">
                                <view class="lf-h1">请您完善求职名片</view>
                                <view class="lf-text">个人信息仅用于推送优质内容</view>
                            </view>
                            <view class="title-ri">
                                <text style="color: #256bfa">1</text>
                                <text>/2</text>
                            </view>
                        </view>
                        <view class="content-input" @click="changeExperience">
                            <view class="input-titile">工作经验</view>
                            <input
                                class="input-con"
                                v-model="state.experienceText"
                                disabled
                                placeholder="请选择您的工作经验"
                            />
                        </view>
                        <view class="content-sex">
                            <view class="sex-titile">求职区域</view>
                            <view class="sext-ri">
                                <view
                                    class="sext-box"
                                    :class="{ 'sext-boxactive': fromValue.sex === 0 }"
                                    @click="changeSex(0)"
                                >
                                    男
                                </view>
                                <view
                                    class="sext-box"
                                    :class="{ 'sext-boxactive': fromValue.sex === 1 }"
                                    @click="changeSex(1)"
                                >
                                    女
                                </view>
                            </view>
                        </view>
                        <view class="content-input" @click="changeEducation">
                            <view class="input-titile">学历</view>
                            <input class="input-con" v-model="state.educationText" disabled placeholder="本科" />
                        </view>
                    </view>
                    <view class="next-btn" @tap="nextStep">下一步</view>
                </view>
            </template>
            <template v-slot:tab2>
                <view class="content-one">
                    <view>
                        <view class="content-title">
                            <view class="title-lf">
                                <view class="lf-h1">请您完善求职名片</view>
                                <view class="lf-text">个人信息仅用于推送优质内容</view>
                            </view>
                            <view class="title-ri">
                                <text style="color: #256bfa">2</text>
                                <text>/2</text>
                            </view>
                        </view>
                        <view class="content-input" @click="changeArea">
                            <view class="input-titile">求职区域</view>
                            <input
                                class="input-con"
                                v-model="state.areaText"
                                disabled
                                placeholder="请选择您的求职区域"
                            />
                        </view>
                        <view class="content-input" @click="changeJobs">
                            <view class="input-titile">求职岗位</view>
                            <input
                                class="input-con"
                                disabled
                                v-if="!state.jobsText.length"
                                placeholder="请选择您的求职岗位"
                            />
                            <view class="input-nx" @click="changeJobs" v-else>
                                <view class="nx-item" v-for="item in state.jobsText">{{ item }}</view>
                            </view>
                        </view>
                        <view class="content-input" @click="changeSalay">
                            <view class="input-titile">期望薪资</view>
                            <input
                                class="input-con"
                                v-model="state.salayText"
                                disabled
                                placeholder="请选择您的期望薪资"
                            />
                        </view>
                    </view>
                    <view class="next-btn" @tap="complete">开启求职之旅</view>
                </view>
            </template>
        </tabcontrolVue>
        <SelectJobs ref="selectJobsModel"></SelectJobs>
    </AppLayout>
</template>

<script setup>
import tabcontrolVue from './components/tabcontrol.vue';
import SelectJobs from '@/components/selectJobs/selectJobs.vue';
import { reactive, inject, watch, ref, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import useUserStore from '@/stores/useUserStore';
import useDictStore from '@/stores/useDictStore';
const { $api, navTo } = inject('globalFunction');
const { loginSetToken, getUserResume } = useUserStore();
const { getDictSelectOption, oneDictData } = useDictStore();
const openSelectPopup = inject('openSelectPopup');
// status
const selectJobsModel = ref();
const tabCurrent = ref(0);
const salay = [2, 5, 10, 15, 20, 25, 30, 50, 80, 100];
const state = reactive({
    station: [],
    stationCateLog: 1,
    lfsalay: [2, 5, 10, 15, 20, 25, 30, 50],
    risalay: JSON.parse(JSON.stringify(salay)),
    areaText: '',
    educationText: '',
    experienceText: '',
    salayText: '',
    jobsText: [],
});
const fromValue = reactive({
    sex: 1,
    education: '4',
    salaryMin: 2000,
    salaryMax: 2000,
    area: 0,
    jobTitleId: '',
    experience: '1',
});

onLoad((parmas) => {
    getTreeselect();
});

onMounted(() => {});

function changeSex(sex) {
    fromValue.sex = sex;
}
function changeExperience() {
    openSelectPopup({
        title: '工作经验',
        maskClick: true,
        data: [oneDictData('experience')],
        success: (_, [value]) => {
            fromValue.experience = value.value;
            state.experienceText = value.label;
        },
        change(_, [value]) {
            // this.setColunm(1, [123, 123]);
            console.log(this);
        },
    });
}

function changeEducation() {
    openSelectPopup({
        title: '学历',
        maskClick: true,
        data: [oneDictData('education')],
        success: (_, [value]) => {
            fromValue.area = value.value;
            state.educationText = value.label;
        },
    });
}

function changeArea() {
    openSelectPopup({
        title: '区域',
        maskClick: true,
        data: [oneDictData('area')],
        success: (_, [value]) => {
            fromValue.area = value.value;
            state.areaText = '青岛市-' + value.label;
        },
    });
}

function changeSalay() {
    let leftIndex = 0;
    openSelectPopup({
        title: '薪资',
        maskClick: true,
        data: [state.lfsalay, state.risalay],
        unit: 'k',
        success: (_, [min, max]) => {
            fromValue.salaryMin = min.value * 1000;
            fromValue.salaryMax = max.value * 1000;
            state.salayText = `${fromValue.salaryMin}-${fromValue.salaryMax}`;
        },
        change(e) {
            const salayData = e.detail.value;
            if (leftIndex !== salayData[0]) {
                const copyri = JSON.parse(JSON.stringify(salay));
                const [lf, ri] = e.detail.value;
                const risalay = copyri.slice(lf, copyri.length);
                this.setColunm(1, risalay);
                leftIndex = salayData[0];
            }
        },
    });
}

function changeJobs() {
    selectJobsModel.value?.open({
        title: '添加岗位',
        success: (ids, labels) => {
            fromValue.jobTitleId = ids;
            state.jobsText = labels.split(',');
        },
    });
}

function nextStep() {
    tabCurrent.value += 1;
}

// 获取职位
function getTreeselect() {
    $api.createRequest('/app/common/jobTitle/treeselect', {}, 'GET').then((resData) => {
        state.station = resData.data;
    });
}

// 登录
function loginTest() {
    // uni.share({
    //     provider: 'weixin',
    //     scene: 'WXSceneSession',
    //     type: 2,
    //     imageUrl: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png',
    //     success: function (res) {
    //         console.log('success:' + JSON.stringify(res));
    //     },
    //     fail: function (err) {
    //         console.log('fail:' + JSON.stringify(err));
    //     },
    // });
    const params = {
        username: 'test',
        password: 'test',
    };
    $api.createRequest('/app/login', params, 'post').then((resData) => {
        $api.msg('模拟帐号密码测试登录成功');
        loginSetToken(resData.token).then((resume) => {
            if (resume.data.jobTitleId) {
                // 设置推荐列表，每次退出登录都需要更新
                useUserStore().initSeesionId();
                uni.reLaunch({
                    url: '/pages/index/index',
                });
            } else {
                nextStep();
            }
        });
    });
}

function complete() {
    $api.createRequest('/app/user/resume', fromValue, 'post').then((resData) => {
        $api.msg('完成');
        getUserResume();
        uni.reLaunch({
            url: '/pages/index/index',
        });
    });
}
</script>

<style lang="stylus" scoped>
.input-nx
    position: relative
    border-bottom: 2rpx solid #EBEBEB
    padding-bottom: 30rpx
    display: flex
    flex-wrap: wrap
    .nx-item
        margin: 12rpx 12rpx 0 0;
        padding: 12rpx 25rpx;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
        border: 2rpx solid #E8EAEE;
.nx-item::before
    position: absolute;
    right: 20rpx;
    top: 60rpx;
    content: '';
    width: 4rpx;
    height: 18rpx;
    border-radius: 2rpx
    background: #697279;
    transform: translate(0, -50%) rotate(-45deg) ;
.nx-item::after
    position: absolute;
    right: 20rpx;
    top: 61rpx;
    content: '';
    width: 4rpx;
    height: 18rpx;
    border-radius: 2rpx
    background: #697279;
    transform: rotate(45deg)
.container
    // background: linear-gradient(#4778EC, #002979);
    width: 100%;
    height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
    position: fixed;
    // background: linear-gradient( 180deg, #1677FF 0%, rgba(22,119,255,0) 54%, rgba(22,119,255,0) 100%);
    // background: url('@/static/icon/background2.png') 0 0 no-repeat;
    background-size: 100% 728rpx;
    display: flex;
    flex-direction: column
    .container-hader
        height: 88rpx;
        text-align: center;
        line-height: 88rpx;
        color: #000000;
        font-weight: bold
        font-size: 32rpx

.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: #22c984;
        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;
.content-one
    padding: 60rpx 28rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between
    height: calc(100% - 120rpx)
    .content-title
        display: flex
        justify-content: space-between;
        align-items: center
        margin-bottom: 70rpx
        .title-lf
            font-size: 44rpx;
            color: #000000;
            font-weight: 600;
            .lf-text
                font-weight: 400;
                font-size: 28rpx;
                color: #6C7282;
        .title-ri
            font-size: 36rpx;
            color: #000000;
            font-weight: 600;
    .content-input
        margin-bottom: 52rpx
        .input-titile
            font-weight: 400;
            font-size: 28rpx;
            color: #6A6A6A;
        .input-con
            font-weight: 400;
            font-size: 32rpx;
            color: #333333;
            line-height: 80rpx;
            height: 80rpx;
            border-bottom: 2rpx solid #EBEBEB
            position: relative;
        .input-con::before
            position: absolute;
            right: 20rpx;
            top: calc(50% - 2rpx);
            content: '';
            width: 4rpx;
            height: 18rpx;
            border-radius: 2rpx
            background: #697279;
            transform: translate(0, -50%) rotate(-45deg) ;
        .input-con::after
            position: absolute;
            right: 20rpx;
            top: 50%;
            content: '';
            width: 4rpx;
            height: 18rpx;
            border-radius: 2rpx
            background: #697279;
            transform: rotate(45deg)
    .content-sex
        height: 110rpx;
        display: flex
        justify-content: space-between;
        align-items: flex-start;
        border-bottom: 2rpx solid #EBEBEB
        margin-bottom: 52rpx
        .sex-titile
            line-height: 80rpx;
        .sext-ri
            display: flex
            align-items: center;
            .sext-box
                height: 76rpx;
                width: 152rpx;
                text-align: center;
                line-height: 80rpx;
                border-radius: 12rpx 12rpx 12rpx 12rpx
                border: 2rpx solid #E8EAEE;
                margin-left: 28rpx
                font-weight: 400;
                font-size: 28rpx;
            .sext-boxactive
                color: #256BFA
                background: rgba(37,107,250,0.1);
                border: 2rpx solid #256BFA;
    .next-btn
        width: 100%;
        height: 90rpx;
        background: #256BFA;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
        font-weight: 500;
        font-size: 32rpx;
        color: #FFFFFF;
        text-align: center;
        line-height: 90rpx
</style>
