<template>
    <NavBar :showIcon="true" :showTitle="true" title="求职意向" backgroundBox="#ffffff"></NavBar>
    <view class="container">
        <view class="header">
            <view class="title"> 求职意向 </view>
            <view class="desc mt20"> 将根据求职意向，为您推荐最合适的工作 </view>
        </view>
        <view class="form">
            <!-- 期望职位 -->
            <colPicker
                label="期望职位"
                v-model="value"
                :columns="columns"
                v-model:mValue="mValue"
                value-key="id"
                label-key="name"
                :column-change="columnChange"
                :before-confirm="beforeConfirm"
                @confirm="handleConfirm"
                @delete:mValue="handleDelete"
                use-default-slot
            >
                <view class="form-item">
                    <view class="form-info">
                        <view class="label"><span style="color: red">*</span>选择岗位</view>
                    </view>
                    <div>{{ mValue.map(v => v.name).join("|") }}</div>

                    <view class="arrow"></view>
                </view>
            </colPicker>
            <!-- 工作地点 -->
            <wd-col-picker
                label="期望职位"
                v-model="cityValue"
                :columns="cityOpstion"
                value-key="code"
                label-key="name"
                :column-change="columnChangeCity"
                @confirm="handleConfirmCity"
                use-default-slot
            >
                <view class="form-item">
                    <view class="form-info">
                        <view class="label"><span style="color: red">*</span>工作地点</view>
                    </view>
                    <div>{{ cityText }}</div>

                    <view class="arrow"></view>
                </view>
            </wd-col-picker>
            <!-- 薪资要求 -->
            <!-- <wd-col-picker
                label="期望职位"
                v-model="salaryValue"
                :columns="salaryOpstion"
                :column-change="columnChangeSalary"
                @confirm="handleConfirmSalary"
                use-default-slot
            >
                <view class="form-item">
                    <view class="form-info">
                        <view class="label">薪资要求</view>
                    </view>
                    <div>{{ salaryText }}</div>
                    <view class="arrow"></view>
                </view>
            </wd-col-picker> -->
            <view class="form-item" @click="onOpen">
                <view class="form-info">
                    <view class="label"><span style="color: red">*</span>薪资要求</view>
                </view>
                <div>{{ salaryText }}</div>
                <view class="arrow"></view>
            </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="handleConfirm2" use-default-slot :columns="columns2" v-model="value2"></wd-picker-view>
                <view style="display: flex; justify-content: center; width: 100%; margin-top: 30rpx"
                    ><wd-button style="width: 80%" @click="confirmSalary" block :round="false">确定</wd-button></view
                >
            </wd-popup>
            <view class="my-info-list pd-b-38">
                <view class="my-info-title label">
                    <span style="color: red">*</span>
                    <text>是否需要提供住宿</text>
                </view>
                <!-- <wd-radio-group v-model="accommodation" shape="dot" inline>
                    <wd-radio :value="1" >是</wd-radio  >
                    <wd-radio :value="0" >否</wd-radio  >
                </wd-radio-group> -->
                <wd-radio-group v-model="accommodation3.active" shape="dot" inline>
                    <wd-radio v-for="item in accommodation3" :key="item.code" :value="item.code">{{ item.text }}</wd-radio>
                </wd-radio-group>
            </view>
            <view class="my-info-list pd-b-38">
                <view class="my-info-title label">
                    <span style="color: red">*</span>
                    <text>工作类型</text>
                </view>
                <wd-radio-group v-model="accommodation2.active" shape="dot" inline>
                    <wd-radio v-for="item in accommodation2" :key="item.code" :value="item.code">{{ item.text }}</wd-radio>
                </wd-radio-group>
            </view>
        </view>
        <view class="btn-wrapper">
            <button class="save-btn" @tap="submit">保存</button>
        </view>
    </view>
</template>

<script setup>
import { dictJobTypeApi, getTreeListApi } from "@/api/common";
import { saveJobIntentionApi, getCityNameByCodeApi, getCityNameByCodeApi2 } from "@/api/user";
import { ref } from "vue";
import colPicker from "@/components/wd-col-picker22/wd-col-picker.vue";
import { getEnumText, getEumData } from "@/utils/utils";
import _ from "lodash";
/* 岗位 */
const value = ref([]);
const mValue = ref([]);
const columns = ref([]);
const salaryText = ref("");

onLoad(async options => {
    // 获取工作类型
    await getEumDataFn();
    // 住宿
    await getEumDataFn2();
    if (options.data) {
        const data = JSON.parse(decodeURIComponent(options.data));
        console.log("datadata", data);
        const preferredPositionList = data.positionNames.split("|");
        mValue.value = preferredPositionList.map((item, index) => {
            return {
                name: item,
                id: data.positionIds[index],
                parentId: data.positionParentIds[index]
            };
        });

        accommodation3.value.active = data.needAccommodation.toString();
        accommodation2.value.active = data.workMode.toString();
        citySelectedItems = data.citySelectedItems;
        const code = citySelectedItems[2]
            ? citySelectedItems[2]
            : citySelectedItems[1]
            ? citySelectedItems[1]
            : citySelectedItems[0];
        getCityNameByCodeApi2(code).then(res => {
            if (!res.data) {
                cityText.value = "全国";
                return;
            }
            const { provinceName, cityName, districtName } = res.data;
            cityText.value = districtName
                ? `${provinceName}-${cityName}-${districtName}`
                : cityName
                ? `${provinceName}-${cityName}`
                : provinceName;
        });
        // salarySelectedItems = [{ value: data.minSalary.slice(0, -1) * 1000 }, { value: data.maxSalary.slice(0, -1) * 1000 }];
        salaryText.value = data.minSalary.slice(0, -1) * 1000 + "元" + "~" + data.maxSalary.slice(0, -1) * 1000 + "元";
        minSalary = data.minSalary.slice(0, -1) * 1000;
        maxSalary = data.maxSalary.slice(0, -1) * 1000;
        console.log("datadata", data);
    }
});
// 获取工作类型
const getEumDataFn = async () => {
    const data = await getEumData("EnumWorkMode");
    accommodation2.value = data;
    accommodation2.value.active = "";
};

// 是否提供住宿
const getEumDataFn2 = async () => {
    const data = await getEumData("EnumAccommodation");
    accommodation3.value = data;
    accommodation3.value.active = "";
};

const handleDelete = index => {
    mValue.value.splice(index, 1);
};
dictJobTypeApi({}).then(res => {
    columns.value.push(res.data);
    console.log(columns);
});
const columnChange = ({ selectedItem, resolve, finish }) => {
    console.log("columnChange", selectedItem);
    if (selectedItem.children) {
        resolve(selectedItem.children);
    } else {
        finish();
    }
};
const beforeConfirm = (value2, selectedItems, resolve) => {
    console.log("selectedItems", selectedItems);
    /* 判断是否点到重复的 */
    const tagter = _.last(selectedItems);
    const index = mValue.value.indexOf(tagter);
    if (index != -1) {
        mValue.value.splice(index, 1);
    } else {
        console.log("tagter", tagter);
        mValue.value.push(tagter);
        // if (mValue.value.length >= 3) {
        // _.pullAt(mValue.value, 0);
        resolve(true);
        // }
    }
    resolve(false);
};
const handleConfirm = ({ selectedItems }) => {};
/* 城市 */
const cityOpstion = ref([]);
const cityValue = ref([]);
const cityText = ref("");
let citySelectedItems = [];
getTreeListApi().then(res => {
    cityOpstion.value.push(res.data);
    cityOpstion.value[0].forEach(item => {
        item.children.unshift({
            name: "不限",
            code: null,
            children: null
        });
        item.children.forEach(item2 => {
            if (item2.children) {
                item2.children.unshift({
                    name: "不限",
                    code: null,
                    children: null
                });
            }
        });
    });
    cityOpstion.value[0].unshift({
        name: "全国",
        code: null,
        children: null
    });
    console.log("cityOpstion", cityOpstion.value[0]);
});
const columnChangeCity = ({ selectedItem, resolve, finish }) => {
    if (selectedItem.children) {
        resolve(selectedItem.children);
    } else {
        finish();
    }
};
const handleConfirmCity = ({ selectedItems }) => {
    cityText.value = selectedItems.map(v => v.name).join("-");
    citySelectedItems = selectedItems.map(item => item.code);
};
const show = ref(false);
const columns2 = ref([]);
const value2 = ref([]);
let minSalary = null;
let maxSalary = null;
let satisfy = true;

function onOpen() {
    // if (my.value) return;
    show.value = true;
}
function handleClose() {
    show.value = false;
}
const confirmSalary = () => {
    if (!satisfy) {
        xma.showToast({
            title: "最高薪资必须大于最低薪资！",
            icon: "none"
        });
        minSalary = null;
        maxSalary = null;
        return;
    }
    show.value = false;
};

const handleConfirm2 = ({ value, selectedItem }) => {
    minSalary = value[0].slice(0, -1) * 1;
    maxSalary = value[1].slice(0, -1) * 1;
    if (minSalary >= maxSalary) {
        satisfy = false;
        return;
    }
    satisfy = true;
    salaryText.value = value[0] + "~" + value[1];
    // 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 generateArray() {
    return Array.from({ length: 50 }, (_, index) => `${(index + 1) * 1000}元`);
}

columns2.value.push(generateArray());
columns2.value.push(generateArray());

/* 薪水 */
// const salaryOpstion = ref([]);
// const salaryValue = ref([]);
const accommodation = ref(1);
const accommodation2 = ref([]);
const accommodation3 = ref([]);
// let salarySelectedItems = [];
// const initSalaryOpstion = () => {
//     let temp = [];
//     for (let i = 1; i < 50; i++) {
//         temp.push({
//             value: i * 1000,
//             label: i * 1000 + "元",
//             next: true
//         });
//     }
//     salaryOpstion.value.push(temp);
// };
// initSalaryOpstion();
// const columnChangeSalary = ({ selectedItem, resolve, finish }) => {
//     let temp = [];
//     if (selectedItem.next) {
//         // resolve(selectedItem.children);
//         console.log(selectedItem);
//         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 handleConfirmSalary = ({ selectedItems }) => {
//     console.log(selectedItems);
//     salaryText.value = selectedItems.map(v => v.label).join("~");
//     salarySelectedItems = selectedItems;
// };
const submit = () => {
    let params = {};
    const [p, c, d] = citySelectedItems;
    console.log("mValue.valuemValue.value", mValue.value);
    params.positionNames = mValue.value.map(v => v.name).join(",");
    params.positionIds = mValue.value.map(v => v.id).join(",");
    params.positionParentIds = mValue.value.map(v => v.parentId).join(",");
    params.minSalary = minSalary || null;
    params.maxSalary = maxSalary || null;
    params.provinceCode = p || null;
    params.cityCode = c || null;
    params.districtCode = d || null;
    params.needAccommodation = accommodation3.value.active;
    params.workMode = accommodation2.value.active;
    console.log("params", params);
    saveJobIntentionApi(params).then(res => {
        console.log(res);
        if (res.code == 200) {
            uni.showToast({
                title: "操作成功"
            });
            uni.navigateBack();
        } else {
            uni.showToast({
                title: res.message,
                icon: "none"
            });
        }
    });
};
</script>

<style lang="scss" scoped>
.container {
    min-height: 100vh;
    padding: 0 32rpx;
    background-color: #ffffff;
}
.title-box {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32rpx;
    margin: 30rpx;
}
.my-info-list {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx 0;
    padding-top: 48rpx;
    padding-right: 5rpx;

    /* height: 96rpx;
    line-height: 96rpx; */
    overflow: hidden;
    background: #ffffff;
    border-bottom: 1rpx solid #e9e9e9;

    /* picker {
      flex: 1;
    } */
    .wd-radio-group {
        text-align: end;
    }
    .label {
        flex: 0 0 200rpx;
        margin: 0;
        font-size: 24rpx;
        font-weight: 500;
        line-height: 36rpx;
        color: #77818f;
    }
    .placeholder-style {
        font-size: 28rpx;
        font-weight: normal;
        line-height: 36rpx;
        color: #77818f;
    }
    .my-info-form {
        flex: 1;
        padding: 0;
    }
    .radios {
        font-size: 28rpx;
        line-height: 36rpx;
        color: #1b2026;
        .radios-item {
            display: flex;
            align-items: center;
            margin-right: 48rpx;
            .inner {
                box-sizing: border-box;
                width: 32rpx;
                height: 32rpx;
                margin-right: 16rpx;
                border: 2rpx solid #77818f;
                border-radius: 50%;
            }
            &.active {
                .inner {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-color: #1f86ff;
                    &::after {
                        display: block;
                        width: 16rpx;
                        height: 16rpx;
                        content: "";
                        background-color: #1f86ff;
                        border-radius: 50%;
                    }
                }
            }
        }
    }
}
.container .header {
    padding: 30rpx 0;
}
.container .header .title {
    font-size: 32rpx;
    font-weight: 600;
    color: #213452;
}
.container .header .desc {
    font-size: 24rpx;
    color: #5c7396;
}
.form-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 36rpx 0;
    border-bottom: 1rpx solid #e9e9e9;
}
.form-item .form-info .label {
    font-size: 24rpx;
    color: #616c7a;
}
.form-item .form-info .cont {
    font-size: 28rpx;
    font-weight: 600;
    color: #213452;
}

/* 保存按钮 */
.btn-wrapper {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 12rpx 0;
    border-top: 1rpx solid #ebebeb;
}
.btn-wrapper .save-btn {
    width: 600rpx;
    height: 72rpx;
    font-size: 32rpx;
    line-height: 72rpx;
    color: #ffffff;
    background: #1892ff;
    border-radius: 8rpx;
}
.mt20 {
    margin-top: 20rpx;
}
.right-icon {
    width: 48rpx;
    height: 48rpx;
}
.color-grey {
    font-size: 28rpx;
    color: #a0afc3;
}
.placeholder-style {
    font-size: 28rpx !important;
    color: #a0afc3 !important;
}
</style>
