<template>
    <div class="page">
        <NavBar :showIcon="true" :showTitle="false" title="" backgroundBox="#FFFFFF"></NavBar>
        <view class="title">
            <view class="t1">2/5福利待遇</view>
            <view class="t2">请选择岗位对应的福利待遇</view>
        </view>
        <view class="content">
            <form-row>
                <form-item title="岗位薪资" icon="" required>
                    <view
                        v-if="pinias.formData.settlementType == 4"
                        :class="`inner flex-between ${salaryText ? '' : 'placeholder'}`"
                        @click="onOpen"
                    >
                        {{ salaryText || "请选择岗位薪资待遇(月薪)" }}

                        <!-- <view class="arrow"></view> -->
                        <checkbox class="checkbox" @click="onChecked" :checked="my">面议</checkbox>
                    </view>
                    <view v-else :class="`inner flex-between ${salaryText ? '' : 'placeholder'}`" @click="onOpen">
                        {{ salaryText || "请选择岗位薪资待遇(时薪)" }}
                        <!-- <view class="arrow"></view> -->
                        <checkbox class="checkbox" @click="onChecked" :checked="my">面议</checkbox>
                    </view>
                    <wd-popup
                        v-model="show"
                        position="bottom"
                        custom-style="height:40%;border-radius: 20rpx;z-index:999;"
                        @close="handleClose"
                    >
                        <view class="title-box"
                            ><view></view>
                            <view class="title">薪资选择</view>
                            <wd-icon @click="handleClose" name="close" size="30rpx"></wd-icon>
                        </view>
                        <wd-picker-view
                            @change="handleConfirm"
                            use-default-slot
                            :columns="columns"
                            v-model="value"
                        ></wd-picker-view>
                        <view style="display: flex; justify-content: center; width: 100%"
                            ><wd-button style="width: 80%" @click="handleClose" block :round="false">确定</wd-button></view
                        >
                    </wd-popup>
                </form-item>
            </form-row>
            <form-row>
                <form-item title="是否提供食宿" icon="" required>
                    <view class="inner flex-between">
                        <wd-radio-group v-model="pinias.formData.accommodation" inline shape="dot">
                            <wd-radio v-for="(v, n) in radioOpstion" :value="v.code" :key="n">{{ v.text }}</wd-radio>
                        </wd-radio-group>
                    </view>
                </form-item>
            </form-row>

            <form-row>
                <form-item :border="false" title="福利待遇" sub-title="(选填)" icon="">
                    <view class="welfare">
                        <view
                            v-for="(item, index) in benefits"
                            :class="`t ${item.active ? 'active' : ''}`"
                            @tap="onChangeBenefits(item)"
                            :key="index"
                            >{{ item.text }}</view
                        >
                    </view>
                </form-item>
            </form-row>
        </view>
        <wd-tabbar
            @tap="next"
            custom-style="display: flex;justify-content: center !important;"
            fixed
            placeholder
            safeAreaInsetBottom
        >
            <view class="foot-btn">下一步</view>
        </wd-tabbar>
    </div>
</template>

<script setup>
import { getEumData } from "@/utils/utils";
import FormItem from "@/components/form/form-item.vue";
import FormRow from "@/components/form/form-row.vue";
import { useReleasePostionStore } from "./store";
/* tab */
const pinias = useReleasePostionStore();
/* 薪资选择 */
let salaryText = ref("");
const value = ref([]);
const columns = ref([]);
let my = ref(pinias.formData.negotiableSalary == 1);
const show = ref(false);
let multiple = 1;
/* 兼职薪资基准 */
if (pinias.formData.settlementType == 1) {
    multiple = 50;
} else {
    multiple = 1000;
}
// 6766 6400
const initSalaryColumns = () => {
    const temp = [];
    const maxSalary = pinias.formData.settlementType === 1 ? 1000 : 50 * multiple;
    if (pinias.formData.settlementType === 1) {
        temp.push({
            value: 10,
            label: "10",
            next: true
        });
    }
    // 生成序列
    for (let i = 1; i * multiple <= maxSalary; i++) {
        const currentValue = i * multiple;
        temp.push({
            value: currentValue,
            label: pinias.formData.settlementType === 1 ? currentValue : `${currentValue / 1000}k`,
            next: true
        });
    }

    // 确保 columns.value 是一个数组
    if (!Array.isArray(columns.value)) {
        columns.value = [];
    }

    // 清空原来的数组，以确保只包含新的数据
    columns.value.length = 0;

    // 将 temp 复制两次，推入 columns.value
    columns.value.push([...temp], [...temp]);
};
initSalaryColumns();
function onChecked() {
    my.value = !my.value;
    // 如果勾选了面议
    if (my.value) {
        salaryText.value = "";
        pinias.setFormDataKey("maxSalary", 0);
        pinias.setFormDataKey("minSalary", 0);
        pinias.setFormDataKey("negotiableSalary", 1);
    } else {
        pinias.setFormDataKey("negotiableSalary", 0);
    }
}
onShow(() => {
    // setFormDataKey("negotiableSalary", 0);
    // setFormDataKey("maxSalary", 0);
    // setFormDataKey("minSalary", 0);
});
const handleConfirm = ({ value, selectedItem }) => {
    console.log("value", value);

    if (value[1] < value[0]) {
        xma.showToast({
            title: "最高薪资不能小于最低薪资",
            icon: "none"
        });
        return;
    }

    my.value = false;

    if (pinias.formData.settlementType === 1) {
        salaryText.value = value.join("~");
    } else {
        salaryText.value = value.map(num => `${num / multiple}k`).join("~");
    }

    const [min, max] = value;
    if (max) {
        pinias.setFormDataKey("maxSalary", max);
        pinias.setFormDataKey("minSalary", min);
        pinias.setFormDataKey("negotiableSalary", 0);
    } else {
        pinias.setFormDataKey("maxSalary", 0);
        pinias.setFormDataKey("minSalary", 0);
        pinias.setFormDataKey("negotiableSalary", 1);
    }
};
function onOpen() {
    if (my.value) return;
    show.value = true;
}
function handleClose() {
    if (value.value[1] < value.value[0]) {
        xma.showToast({
            title: "最高薪资不能小于最低薪资",
            icon: "none"
        });
        return;
    }
    show.value = false;
}
/* 是否提供住宿 */
const radioOpstion = ref([]);
const initRadioOpstion = async () => {
    radioOpstion.value = await getEumData("EnumAccommodation");
};
initRadioOpstion();
/* 福利待遇 */
const benefits = ref([
    {
        text: "年底双薪",
        active: false
    },
    {
        text: "节假日福利",
        active: false
    },
    {
        text: "旅游团建",
        active: false
    },
    {
        text: "生日福利",
        active: false
    },
    {
        text: "五险一金",
        active: false
    },
    {
        text: "三险一金",
        active: false
    },
    {
        text: "其他",
        active: false
    }
]);
const onChangeBenefits = e => {
    e.active = !e.active;
};
// 下一页
const next = () => {
    pinias.setFormDataKey(
        "benefits",
        benefits.value
            .filter(v => v.active)
            .map(v => v.text)
            .join(",")
    );
    // 薪资
    if (pinias.formData.negotiableSalary == 0) {
        if (!(pinias.formData.maxSalary && pinias.formData.minSalary)) {
            xma.showToast({
                title: "请输选择薪资",
                icon: "none"
            });
            return;
        }
    }
    uni.navigateTo({
        url: "/pages/recommend/releasePostion/step3"
    });
    /* uni.redirectTo({
        url: "/pages/recommend/releasePostion/step3"
    }); */
};

/* 初始化 */
const initViewData = () => {
    // 福利
    if (pinias.formData.benefits) {
        benefits.value.forEach(v => {
            v.active = pinias.formData.benefits.indexOf(v.text) !== -1;
        });
    }
    const { negotiableSalary, maxSalary, minSalary } = pinias.formData;
    if (negotiableSalary == 1 || maxSalary || minSalary) {
        salaryText.value = pinias.formData.negotiableSalary
            ? "面议"
            : `${pinias.formData.minSalary}~${pinias.formData.maxSalary}`;
    }
};
initViewData();
</script>

<style lang="scss" scoped>
@import "./common.scss";
.content {
    .form-item {
        padding-top: 0;
    }
    van-radio-group {
        .van-radio-group {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
        }
        .van-radio {
            margin-right: 60rpx;
            margin-bottom: 24rpx;
        }
    }
    :deep(.uni-checkbox-input) {
        border-radius: 50% !important;
    }
    .title-box {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 32rpx;
    }
    .welfare {
        display: flex;
        flex-wrap: wrap;
        gap: 24rpx;
        view {
            gap: 12rpx;
            padding: 12rpx 20rpx;
            font-size: 24rpx;
            line-height: 36rpx;
            color: #1f86ff;
            background: rgb(31 134 255 / 10%);
            border-radius: 8rpx;
            &.active {
                color: #ffffff;
                background-color: #1f86ff;
            }
        }
    }
}
picker-view {
    text-align: center;
}
.popup-title {
    padding: 0 32rpx;
    font-size: 32rpx;
    font-weight: 600;
    line-height: 80rpx;
    .flex-align-center {
        gap: 12rpx;
        view {
            box-sizing: border-box;
            padding: 12rpx 20rpx;
            font-size: 24rpx;
            font-weight: normal;
            line-height: 1em;
            border: 2rpx solid #e1e2e6;
            border-radius: 10rpx;
        }
        .confirm {
            color: rgb(31 134 255 / 100%);
            background: rgb(31 134 255 / 10%);
            border: 0;
        }
    }
}
.popup-label {
    display: flex;
    justify-content: space-around;
    color: #cccccc;
}
.foot-btn {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 622rpx;
    height: 80rpx;
    color: #ffffff;
    background: #1f86ff;
    border-radius: 12rpx;
}
</style>
