<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="身份" required>
                    <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="学历" required>
                    <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="年龄" required>
                    <!-- <wd-col-picker
                        v-model="value"
                        :columns="columns"
                        :column-change="columnChange"
                        @confirm="handleConfirm"
                        use-default-slot
                    >
                </wd-col-picker> -->
                    <view
                        @click="isShowAgeSelect = true"
                        :class="`inner flex-between ${ageText ? '' : 'placeholder'}`"
                        bind:tap="onOpen"
                    >
                        {{ ageText || "请选择年龄范围" }}
                    </view>
                </form-item>
            </form-row>
            <form-row>
                <form-item title="专业" class="major" required>
                    <wd-col-picker
                        v-model="majorValue"
                        :columns="majorOpstion"
                        value-key="name"
                        label-key="name"
                        :column-change="columnChangeMajor"
                        @confirm="handleConfirmMajor"
                        use-default-slot
                    >
                        <p :class="{ placeholder: !majorText }" class="text-single" style="width: 100%">
                            {{ majorText || "请选择专业" }}
                        </p>
                    </wd-col-picker>
                </form-item>
            </form-row>
            <form-row :fill="false">
                <form-item title="专业技术职称" sub-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="职业资格/技能等级证书" sub-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" sub-title="(选填)">
                    <input v-model="pinias.formData.specialCertificates" type="text" placeholder="请填写特种作业证" />
                </form-item>
            </form-row>
        </view>
        <!-- 年龄选择器 -->
        <wd-action-sheet v-model="isShowAgeSelect" title="年龄选择" :actions="actions" @close="close">
            <div class="age-action-sheet">
                <div class="age-select-tips">
                    <p>最小年龄</p>
                    <p>最大年龄</p>
                </div>
                <wd-picker-view :columns="ageColumns" v-model="value" :column-change="onChangeAge" />
                <wd-button block @click="ageSelectConfirm">确认</wd-button>
            </div>
        </wd-action-sheet>

        <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";
import { getMajorTreeApi } from "@/api/common";
/* 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(["16", "16"]);
const ageText = ref("");
const isShowAgeSelect = ref(false);
const ageColumns = ref([]);
const onChangeAge = (pickerView, value, columnIndex, resolve) => {
    const minAge = 16;
    const maxAge = 81;
    const createColumns = (min, max) => {
        const temp = [];
        for (let i = min; i < max; i++) {
            temp.push({
                value: i,
                label: i + "岁",
                next: true
            });
        }
        return temp;
    };
    if (columnIndex === 0) {
        const min = value[0].value;
        const columns = min
            ? createColumns(min, maxAge)
            : [
                  {
                      value: "",
                      label: "不限",
                      next: false
                  }
              ];
        pickerView.setColumnData(1, columns);
    }

    // console.log(pickerView, "value", value, "columnIndex", columnIndex, resolve);
    resolve();
};

const ageSelectConfirm = () => {
    if (value.value[0]) {
        const [min, max] = value.value;
        ageText.value = `${value.value[0]}-${value.value[1]}岁`;
        pinias.formData.minAgeRequirement = min;
        pinias.formData.maxAgeRequirement = max;
    } else {
        ageText.value = "不限";
    }
    isShowAgeSelect.value = false;
};
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);
    ageColumns.value = [temp, temp];
    /* ageColumns.value = [
        [
            {
                value: "",
                label: "不限",
                next: false
            },
            ...temp
        ],
        [
            {
                value: "",
                label: "不限",
                next: false
            }
        ]
    ]; */
};
initSalaryColumns();
/* 专业 */
const majorValue = ref([]);
const majorOpstion = ref([]);
const columnChangeMajor = ({ selectedItem, resolve, finish }) => {
    if (selectedItem.children) {
        resolve(selectedItem.children);
    } else {
        finish();
    }
};
const handleConfirmMajor = ({ value }) => {
    console.log(value);
    if (value[1]) {
        majorText.value = value[1];
        pinias.formData.majorRequirement = value.join("-");
    } else {
        majorText.value = "";
    }
};
const majorText = ref("");
getMajorTreeApi().then(res => {
    console.log(res);
    if (res.code === 200) {
        majorOpstion.value.push(
            Object.keys(res.data).map(key => ({
                name: key,
                children: res.data[key]
            }))
        );
        majorOpstion.value[0].unshift({
            name: "不限"
        });
    }
});

/* 等级选择项 */
const levelOptions = ref(["初级", "中级", "高级", "高级以上"]);
const getEnumCertificatesLevel = async () => {
    levelOptions.value = await getEumData("EnumCertificatesLevel");
};
getEnumCertificatesLevel();
/* 专业 major */
const majorInputValue = ref("");
const majorSelectValue = ref("");
/* 证书 certificate */
const certificateInputValue = ref("");
const certificateSelectValue = ref("");

/* 初始化页面数据 */
const initViewData = async () => {
    // 编辑
    pinias.formData.identityRequirement &&
        (identityText.value = await getEnumText("EnumIdentityRequirement", pinias.formData.identityRequirement));
    pinias.formData.educationRequirement &&
        (educationText.value = await getEnumText("EnumEducationRequirement", pinias.formData.educationRequirement));
    // 年龄
    if (pinias.formData.maxAgeRequirement) {
        ageText.value = `${pinias.formData.minAgeRequirement}~${pinias.formData.maxAgeRequirement}岁`;
    } else {
        ageText.value = "";
    }
    // 证书
    /*   positionalTitle majorInputValue.value + "-" + majorSelectValue.value
        professionalCertificates certificateInputValue.value + "-" + certificateSelectValue.value */
    const [majorInputValue1, majorSelectValue1] = pinias.formData.positionalTitle?.split("-") || [];
    const [certificateInputValue1, certificateSelectValue1] = pinias.formData.professionalCertificates?.split("-") || [];
    majorInputValue.value = majorInputValue1;
    majorSelectValue.value = majorSelectValue1;
    certificateInputValue.value = certificateInputValue1;
    certificateSelectValue.value = certificateSelectValue1;
    majorText.value = pinias.formData.majorRequirement?.split("-")[1] || "";
};
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"], "post")) {
        /* uni.redirectTo({
            url: "/pages/recommend/releasePostion/step5"
        }); */
        uni.navigateTo({
            url: "/pages/recommend/releasePostion/step5"
        });
    }
};
</script>

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