<template>
    <div class="page">
        <NavBar :showIcon="true" :showTitle="false" title="" backgroundBox="#FFFFFF"></NavBar>
        <view class="title">
            <view class="t1">4/5填写职位信息</view>
            <view class="t2">设置招聘偏好，让报名更精准</view>
        </view>
        <view class="content">
            <view class="form-item">
                <view class="form-item-title">身份要求</view>
                <wd-picker
                    :columns="identityPostion"
                    value-key="code"
                    label-key="text"
                    v-model="pinias.formData.identityRequirement"
                    @confirm="handleConfirmIdentity"
                    use-default-slot
                >
                    <view :class="`inner flex-between ${identityText ? '' : 'placeholder'}`">
                        <view class="flex-align-center" bind:tap="onShowIdentitySelect">
                            {{ identityText || "请选择身份要求" }}
                        </view>
                        <view class="arrow"></view>
                    </view>
                </wd-picker>
            </view>
            <view class="form-item">
                <view class="form-item-title">学历要求</view>
                <wd-picker
                    :columns="educationPostion"
                    value-key="code"
                    label-key="text"
                    v-model="pinias.formData.educationRequirement"
                    @confirm="handleConfirmEducation"
                    use-default-slot
                >
                    <view :class="`inner flex-between ${educationText ? '' : 'placeholder'}`">
                        <view class="flex-align-center" bind:tap="onShowIdentitySelect">
                            {{ educationText || "请选择学历要求" }}
                        </view>
                        <view class="arrow"></view>
                    </view>
                </wd-picker>
            </view>
            <view class="form-item">
                <view class="form-item-title">年龄要求</view>
                <wd-col-picker
                    v-model="value"
                    :columns="columns"
                    :column-change="columnChange"
                    @confirm="handleConfirm"
                    use-default-slot
                >
                    <view :class="`inner flex-between ${ageText ? '' : 'placeholder'}`" bind:tap="onOpen">
                        {{ ageText || "请选择年龄要求" }}

                        <view class="arrow"></view>
                    </view>
                </wd-col-picker>
            </view>
        </view>
        <wd-tabbar
            @tap="next"
            custom-style="display: flex;justify-content: center !important;z-index:1;"
            fixed
            placeholder
            safeAreaInsetBottom
        >
            <view class="foot-btn">下一步</view>
        </wd-tabbar>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { getEumData, getEnumText } from "@/utils/utils";
import { useReleasePostionStore } from "./store";
/* tab */
const pinias = useReleasePostionStore();
const identityText = ref("");
const educationText = ref("");
const identityPostion = ref([]);
const educationPostion = ref([]);
const initPostion = async () => {
    identityPostion.value = await getEumData("EnumIdentityRequirement");
    educationPostion.value = await getEumData("EnumEducationRequirement");
};
initPostion();

// 选择身份
const handleConfirmIdentity = ({ selectedItems }) => {
    identityText.value = selectedItems.text;
};
// 选择学历
const handleConfirmEducation = ({ selectedItems }) => {
    educationText.value = selectedItems.text;
};
/* 年龄要求 */
const value = ref([]);
const columns = ref([]);
const ageText = ref("");
const initSalaryColumns = () => {
    const temp = [
        {
            value: "不限",
            label: "不限",
            next: false
        }
    ];
    for (let i = 16; i < 81; i++) {
        temp.push({
            value: i,
            label: i + "岁",
            next: true
        });
    }
    columns.value.push(temp);
};
initSalaryColumns();

const columnChange = ({ selectedItem, resolve, finish }) => {
    console.log(selectedItem);
    if (selectedItem.next) {
        const temp = [];
        for (let i = 1; i < 50; i++) {
            temp.push({
                value: i + selectedItem.value,
                label: i + selectedItem.value + "岁",
                next: false
            });
            resolve(temp);
        }
    } else {
        finish();
    }
};
const handleConfirm = ({ value, selectedItem }) => {
    ageText.value = value.join("~");
    const [min, max] = value;
    console.log([min, max]);
    if (max) {
        // 没有选择不限
        pinias.setFormDataKey("maxAgeRequirement", max);
        pinias.setFormDataKey("minAgeRequirement", min);
    } else {
        pinias.setFormDataKey("maxAgeRequirement", 0);
        pinias.setFormDataKey("minAgeRequirement", 0);
    }
};

const next = () => {
    console.log(pinias.formData);
    uni.navigateTo({
        url: "/pages/recommend/releasePostion/step5"
    });
};

/* 初始化页面数据 */
const initViewData = async () => {
    if (pinias.formData.id) {
        identityText.value = await getEnumText("EnumIdentityRequirement", pinias.formData.identityRequirement);
        educationText.value = await getEnumText("EnumEducationRequirement", pinias.formData.educationRequirement);
        if (pinias.formData.maxAgeRequirement) {
            ageText.value = `${pinias.formData.minAgeRequirement}~${pinias.formData.maxAgeRequirement}`;
        } else {
            ageText.value = "不限";
        }
    }
};
initViewData();
</script>

<style lang="scss" scoped>
@import "./common.scss";
.foot-btn {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 622rpx;
    height: 80rpx;
    color: #ffffff;
    background: #1f86ff;
    border-radius: 12rpx;
}
</style>
