<template>
    <div class="page">
        <view class="title">
            <view class="t1">2/5福利待遇</view>
            <view class="t2">给岗位选择对应福利待遇</view>
        </view>
        <view class="content">
            <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 ${salaryText ? '' : 'placeholder'}`" bind:tap="onOpen">
                        {{ salaryText || "请选择(全职为月薪兼职为时薪)" }}

                        <view class="arrow"></view>
                    </view>
                </wd-col-picker>
            </view>
            <view class="form-item">
                <view class="form-item-title">是否提供食宿</view>
                <view class="inner flex-between">
                    <!-- <van-radio-group model:value="{{ accommodation }}">
                        <van-radio name="{{item.code}}" wx:for="{{EnumAccommodation}}" wx:key="index">{{ item.text }}</van-radio>
                    </van-radio-group> -->
                    <wd-radio-group v-model="formData.accommodation" inline shape="dot">
                        <wd-radio v-for="v in radioOpstion" :value="v.code">{{ v.text }}</wd-radio>
                    </wd-radio-group>
                </view>
            </view>
            <view class="form-item describe" style="border: 0">
                <view class="form-item-title">福利待遇</view>
                <view class="welfare">
                    <view
                        v-for="(item, index) in benefits"
                        :class="`t ${item.active ? 'active' : ''}`"
                        @tap="onChangeBenefits(item)"
                        :key="index"
                        >{{ item.text }}</view
                    >
                </view>
            </view>
        </view>
        <view class="btn-wrap">
            <button class="bottom-btn" @tap="next">下一步</button>
        </view>
    </div>
</template>

<script setup>
import { useReleasePostionStore } from "./store";
import { getEumData } from "@/utils/utils";
const { formData, setFormDataKey } = useReleasePostionStore();

/* 薪资选择 */
const salaryText = ref("");
const value = ref([]);
const columns = ref([]);
console.log(formData.settlementType);

let multiple = 1;
/* 兼职薪资基准 */
if (formData.settlementType == 1) {
    multiple = 10;
} else {
    multiple = 1000;
}

const initSalaryColumns = () => {
    const temp = [
        {
            value: "面议",
            label: "面议",
            next: false
        }
    ];
    for (let i = 1; i < 50; i++) {
        temp.push({
            value: i * multiple,
            label: i * multiple,
            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 * multiple + selectedItem.value,
                label: i * multiple + selectedItem.value,
                next: false
            });
            resolve(temp);
        }
    } else {
        finish();
    }
};
const handleConfirm = ({ value, selectedItem }) => {
    salaryText.value = value.join("~");
    const [min, max] = value;
    if (max) {
        setFormDataKey("maxSalary", max);
        setFormDataKey("minSalary", min);
        setFormDataKey("negotiableSalary", 0);
    } else {
        setFormDataKey("maxSalary", 0);
        setFormDataKey("minSalary", 0);
        setFormDataKey("negotiableSalary", 1);
    }
};
/* 是否提供住宿 */
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
    }
]);
const onChangeBenefits = e => {
    e.active = !e.active;
};
// 下一页
const next = () => {
    setFormDataKey(
        "benefits",
        benefits.value
            .filter(v => v.active)
            .map(v => v.text)
            .join(",")
    );

    uni.navigateTo({
        url: "/pages/recommend/releasePostion/step3"
    });
};

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

<style lang="scss" scoped>
@import "./common.scss";
.content {
    van-radio-group {
        .van-radio-group {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
        }
        .van-radio {
            margin-right: 60rpx;
            margin-bottom: 24rpx;
        }
    }
    .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;
}
</style>
