<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">
            <form-row>
                <form-item title="身份要求">
                    <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>
                    </wd-picker>
                </form-item>
            </form-row>
            <form-row :fill="false">
                <form-item title="学历要求">
                    <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>
                    </wd-picker>
                </form-item>
                <form-item title="年龄要求">
                    <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>
                    </wd-col-picker>
                </form-item>
            </form-row>
            <form-row :fill="false">
                <form-item title="专业技术职称" icon="edit">
                    <input type="text" v-model="majorInputValue" placeholder="请填写职称" />
                </form-item>
                <form-item title="">
                    <wd-picker
                        :columns="levelOptions"
                        value-key="text"
                        label-key="text"
                        v-model="majorSelectValue"
                        use-default-slot
                    >
                        <view :class="`inner flex-between ${majorSelectValue ? '' : 'placeholder'}`">
                            <view class="flex-align-center" bind:tap="onShowIdentitySelect">
                                {{ majorSelectValue || "请选择职业等级" }}
                            </view>
                        </view>
                    </wd-picker>
                </form-item>
            </form-row>
            <form-row :fill="false">
                <form-item title="职业资格/技能等级证书" icon="edit">
                    <input type="text" v-model="certificateInputValue" placeholder="请填写职业资格" />
                </form-item>
                <form-item title="">
                    <wd-picker
                        :columns="levelOptions"
                        value-key="text"
                        label-key="text"
                        v-model="certificateSelectValue"
                        use-default-slot
                    >
                        <view :class="`inner flex-between ${certificateSelectValue ? '' : 'placeholder'}`">
                            <view class="flex-align-center" bind:tap="onShowIdentitySelect">
                                {{ certificateSelectValue || "请选择职业资格等级" }}
                            </view>
                        </view>
                    </wd-picker>
                </form-item>
            </form-row>
            <form-row>
                <form-item title="特种作业证" icon="edit">
                    <input v-model="pinias.formData.specialCertificates" type="text" placeholder="请填写特种作业证" />
                </form-item>
            </form-row>
        </view>
        <wd-tabbar
            custom-style="display: flex;justify-content: center !important;z-index:1;"
            fixed
            placeholder
            safeAreaInsetBottom
        >
            <view class="foot-btn" @tap="next">下一步</view>
        </wd-tabbar>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { getEumData, getEnumText } from "@/utils/utils";
import { useReleasePostionStore } from "./store";
import FormItem from "@/components/form/form-item.vue";
import FormRow from "@/components/form/form-row.vue";
import { validateForm } from "@/utils/utils";
/* 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 levelOptions = ref(["初级", "中级", "高级", "高级以上"]);
const getEnumCertificatesLevel = async () => {
    levelOptions.value = await getEumData("EnumCertificatesLevel");
    console.log(levelOptions.value);
};
getEnumCertificatesLevel();
/* 专业 major */
const majorInputValue = ref("");
const majorSelectValue = ref("");
/* 证书 certificate */
const certificateInputValue = ref("");
const certificateSelectValue = ref("");
/* 特种作业证 specialLicense */
const specialLicenseValue = ref("");
/* 初始化页面数据 */
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();

const next = () => {
    /* majorInputValue
    majorSelectValue
    certificateInputValue
    certificateSelectValue
    specialLicenseValue */
    /* 拼接证书字段 */
    if (majorInputValue.value && majorSelectValue.value)
        pinias.formData.positionalTitle = majorInputValue.value + "-" + majorSelectValue.value;
    if (certificateInputValue.value && certificateSelectValue.value)
        pinias.formData.professionalCertificates = certificateInputValue.value + "-" + certificateSelectValue.value;
    console.log(pinias.formData);
    if (
        validateForm(pinias.formData, [
            "identityRequirement",
            "educationRequirement",
            "positionalTitle",
            "professionalCertificates",
            "specialCertificates"
        ])
    ) {
        uni.navigateTo({
            url: "/pages/recommend/releasePostion/step5"
        });
    }
};
</script>

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