<template>
    <div class="page">
        <div class="title">添加岗位信息{{ formData.positionList.length + 1 }}</div>
        <div class="form">
            <div class="grid">
                <formItem full title="岗位名称">
                    <input type="text" v-model="postItem.jobName" placeholder="请填写岗位名称" />
                </formItem>
                <formItem title="招聘人数">
                    <input type="number" v-model="postItem.recruitmentNumber" placeholder="请填写招聘的人数" />
                </formItem>
                <formItem title="年龄要求">
                    <wd-col-picker
                        v-model="age"
                        :columns="ageColumns"
                        :column-change="changeAge"
                        @confirm="confirmAge"
                        use-default-slot
                    >
                        <view :class="`inner flex-between ${ageText ? '' : 'placeholder'}`" bind:tap="onOpen">
                            {{ ageText || "请选择年龄要求" }}
                            <view class="arrow"></view>
                        </view>
                    </wd-col-picker>
                </formItem>
                <formItem title="学历要求">
                    <wd-picker
                        :columns="educationColumns"
                        value-key="code"
                        label-key="text"
                        v-model="postItem.educationRequirement"
                        @confirm="confirmEducation"
                        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>
                </formItem>

                <formItem title="薪资待遇">
                    <wd-col-picker
                        v-model="salary"
                        :columns="salaryColumns"
                        :column-change="changeSalary"
                        @confirm="confirmSalary"
                        use-default-slot
                    >
                        <view :class="`inner flex-between ${salaryText ? '' : 'placeholder'}`" bind:tap="onOpen">
                            {{ salaryText || "请选择薪资" }}
                            <view class="arrow"></view>
                        </view>
                    </wd-col-picker>
                </formItem>
                <formItem title="是否提供食宿" full>
                    <wd-radio-group shape="dot" inline v-model="postItem.accommodation">
                        <wd-radio v-for="v in EnumAccommodation" :key="v.code" :value="v.code">{{ v.text }}</wd-radio>
                    </wd-radio-group>
                </formItem>
                <formItem title="是否缴纳五险一金" full>
                    <wd-radio-group shape="dot" inline v-model="postItem.socialInsurance">
                        <wd-radio value="1">是</wd-radio>
                        <wd-radio value="0">否</wd-radio>
                    </wd-radio-group>
                </formItem>
                <formItem title="岗位专业(技能)要求" full>
                    <textarea v-model="postItem.skills" placeholder="请输入岗位专业(技能)要求" />
                </formItem>
                <!-- <formItem title="备注" full>
                    <input v-model="postItem.socialInsurance" placeholder="请填写" />
                </formItem> -->
            </div>
        </div>
        <!-- 确认提交 -->
        <wd-overlay :show="show" @click="show = false">
            <view class="wrapper flex-center">
                <view class="block" @click.stop="">
                    <img src="@/static/image/signUp.png" alt="" />
                    <p>您已填写{{ formData.companyName }}</p>
                    <p>招聘岗位{{ formData.positionList.length }}类</p>
                    <div class="btn">
                        <button class="b1" @click="show = false">继续提交</button>
                        <button class="b2" @click="submit">提交报名</button>
                    </div>
                </view>
            </view>
        </wd-overlay>
        <div class="footer">
            <button class="b1" @click="addPost">继续提交</button>
            <button class="b2" @click="openMask">提交报名</button>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { getEumData } from "@/utils/utils";
import formItem from "./formItem.vue";
import { useStore } from "./store";
import { jobFairRegisterApi } from "@/api/article";
const { formData } = useStore();
const show = ref(false);
const postItem = ref({
    jobName: "",
    recruitmentNumber: 1,
    minAgeRequirement: 0,
    maxAgeRequirement: 0,
    educationRequirement: "0",
    minSalary: 0,
    maxSalary: 0,
    socialInsurance: "1",
    accommodation: "0",
    skills: ""
});
/* 年龄 */
const age = ref([]);
const ageText = ref("");
const ageColumns = ref([]);
const changeAge = ({ selectedItem, resolve, finish }) => {
    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 confirmAge = ({ value, selectedItems }) => {
    const [min, max] = value;
    console.log(selectedItems);
    if (max) {
        postItem.value.minAgeRequirement = min;
        postItem.value.maxAgeRequirement = max;
    } else {
        postItem.value.minAgeRequirement = 0;
        postItem.value.maxAgeRequirement = 0;
    }
    ageText.value = selectedItems.map(v => v.label).join("~");
};
const initAgeColumns = () => {
    const temp = [
        {
            value: "不限",
            label: "不限",
            next: false
        }
    ];
    for (let i = 1; i < 50; i++) {
        temp.push({
            value: i,
            label: i + "岁",
            next: true
        });
    }
    ageColumns.value.push(temp);
};
initAgeColumns();

/* 学历 */
const educationColumns = ref([]);
const educationText = ref("");
const initEducationColumns = async () => {
    educationColumns.value = await getEumData("EnumEducationRequirement");
};
const confirmEducation = ({ selectedItems }) => {
    educationText.value = selectedItems.text;
};
initEducationColumns();

/* 薪水 */
const salary = ref([]);
const salaryText = ref("");
const salaryColumns = ref([]);
const changeSalary = ({ selectedItem, resolve, finish }) => {
    if (selectedItem.next) {
        const temp = [];
        for (let i = 1; i < 50; i++) {
            temp.push({
                value: i * 1000 + selectedItem.value,
                label: i * 1000 + selectedItem.value,
                next: false
            });
            resolve(temp);
        }
    } else {
        finish();
    }
};
const confirmSalary = ({ value, selectedItems }) => {
    const [min, max] = value;
    if (max) {
        postItem.value.minSalary = min;
        postItem.value.maxSalary = max;
    } else {
        postItem.value.minSalary = 0;
        postItem.value.maxSalary = 0;
    }
    salaryText.value = selectedItems.map(v => v.label).join("~");
};
const initsalaryColumns = () => {
    const temp = [
        {
            value: "面议",
            label: "面议",
            next: false
        }
    ];
    for (let i = 1; i < 50; i++) {
        temp.push({
            value: i * 1000,
            label: i * 1000,
            next: true
        });
    }
    salaryColumns.value.push(temp);
};
initsalaryColumns();
/* 是否提供食宿  */
const EnumAccommodation = ref([]);
const initEnumAccommodation = async () => {
    EnumAccommodation.value = await getEumData("EnumAccommodation");
};
initEnumAccommodation();
/* 添加 */
const addPost = () => {
    const { jobName, recruitmentNumber, educationRequirement, socialInsurance, accommodation, skills } = postItem.value;
    ageText;
    salaryText;
    if (
        [
            jobName,
            recruitmentNumber,
            educationRequirement,
            socialInsurance,
            accommodation,
            skills,
            ageText.value,
            salaryText.value
        ].some(v => {
            return v === "";
        })
    ) {
        uni.showToast({
            title: "请填写完整",
            icon: "none"
        });
        return;
    }
    formData.positionList.push(postItem.value);
    /* 数据清空 */
    postItem.value = {
        jobName: "",
        recruitmentNumber: "",
        educationRequirement: "",
        socialInsurance: "",
        accommodation: "",
        skills: "",
        ageText: "",
        salaryText: ""
    };
    ageText.value = "";
    salaryText.value = "";
    age.value = [];
    salary.value = [];
    console.log(postItem.value);
};
/* 提交 */
const openMask = () => {
    if (formData.positionList.length < 1) {
        uni.showToast({
            title: "请添加职位信息",
            icon: "none"
        });
        return;
    }
    show.value = true;
};
const submit = () => {
    console.log(formData);
    jobFairRegisterApi(formData).then(res => {
        console.log(res);
    });
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
.form {
    .grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 50rpx;
    }
    textarea {
        width: 100%;
        height: 140rpx;
    }
}
.footer {
    display: flex;
    button {
        width: 296rpx;
        height: 80rpx;
        line-height: 80rpx;
    }
    .b1 {
        font-size: 30rpx;
        font-weight: 600;
        color: #1f86ff;
        background: #1f86ff0f;
        &::after {
            border: 0;
        }
    }
    .b2 {
        font-size: 30rpx;
        font-weight: 600;
        color: #ffffff;
        background: #1f86ff;
    }
}
.wrapper {
    width: 100%;
    height: 100%;
    .block {
        width: 600rpx;
        height: 496rpx;
        text-align: center;
        background: #ffffff;
        border-radius: 16rpx;
        img {
            width: 274rpx;
            height: 192rpx;
            margin-top: 50rpx;
            margin-bottom: 6;
        }
        p {
            font-size: 28rpx;
            font-weight: normal;
            line-height: 48rpx;
            color: #000000;
        }
        .btn {
            display: flex;
            margin-top: 40rpx;
            button {
                width: 236rpx;
                height: 80rpx;
                line-height: 80rpx;
            }
            .b1 {
                font-size: 30rpx;
                font-weight: 600;
                color: #1f86ff;
                background: #1f86ff0f;
                &::after {
                    border: 0;
                }
            }
            .b2 {
                font-size: 30rpx;
                font-weight: 600;
                color: #ffffff;
                background: #1f86ff;
            }
        }
    }
}
</style>
