<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">选择岗位</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">工作地点</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="my-info-list pd-b-38">
                <view class="my-info-title label">
                    <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">
                    <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 } 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;
        getCityNameByCodeApi(citySelectedItems[2]).then(res => {
            cityText.value  = res.data.provinceName+ "-" + res.data.cityName+ "-" + res.data.districtName;
        })
        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 + "元";
        console.log("salarySelectedItems", salarySelectedItems);
    }
    
});
// 获取工作类型
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);
    console.log(cityOpstion);
});
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 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 = salarySelectedItems[0].value;
    params.maxSalary = salarySelectedItems[1].value;
    params.provinceCode = p;
    params.cityCode = c;
    params.districtCode = d;
    params.needAccommodation = accommodation3.value.active;
    params.workMode = accommodation2.value.active;
    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;
}
.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>
