<template>
    <div class="page">
        <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="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="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>
        <view class="btn-wrap">
            <button class="bottom-btn" @tap="next">下一步</button>
        </view>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { getEumData, getEnumText } from "@/utils/utils";
import { useReleasePostionStore } from "./store";
const { formData, setFormDataKey } = 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 = 1; i < 50; 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) {
        // 没有选择不限
        setFormDataKey("maxAgeRequirement", max);
        setFormDataKey("minAgeRequirement", min);
    } else {
        setFormDataKey("maxAgeRequirement", 0);
        setFormDataKey("minAgeRequirement", 0);
    }
};

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

/* 初始化页面数据 */
const initViewData = async () => {
    if (formData.id) {
        console.log(formData);

        identityText.value = await getEnumText("EnumIdentityRequirement", formData.identityRequirement);
        educationText.value = await getEnumText("EnumEducationRequirement", formData.educationRequirement);
        if (formData.maxAgeRequirement) {
            ageText.value = `${formData.minAgeRequirement}~${formData.maxAgeRequirement}`;
        }
    }
};
initViewData();
</script>

<style lang="scss" scoped>
@import "./common.scss";
</style>
