<template>
    <div class="page">
        <view class="title">
            <view class="t1">1/5填写职位信息</view>
            <view class="t2">选择对应的职位并填写职位信息</view>
        </view>
        <view class="content">
            <view class="switch">
                <!-- <view class="active">全职</view>
        <view>兼职</view> -->
                <view
                    v-for="(item, index) in EnumWorkMode"
                    :class="item.code == formData.workMode ? 'active' : ''"
                    @tap="changeWorkMode(item.code)"
                    :key="index"
                    >{{ item.text }}
                </view>
            </view>
            <view class="form-item">
                <view class="form-item-title">职位类型</view>
                <wd-col-picker
                    v-model="value"
                    :columns="columns"
                    :column-change="columnChange"
                    @confirm="handleConfirm"
                    label-key="name"
                    value-key="id"
                    use-default-slot
                >
                    <view :class="`inner flex-between ${formData.jobTypeText ? '' : 'placeholder'}`">
                        {{ formData.jobTypeText || "请选择职位类型" }}
                        <view class="arrow"></view>
                    </view>
                </wd-col-picker>
            </view>
            <view class="form-item">
                <view class="form-item-title">职位标题</view>
                <view class="inner flex-between">
                    <input v-model="formData.jobName" type="text" placeholder-class="placeholder" placeholder="请输入职业标题" />
                </view>
            </view>
            <view class="form-item describe" style="border: 0">
                <view class="form-item-title">职位描述</view>
                <textarea v-model="formData.jobDesc" placeholder="请输入你的职位描述" />
            </view>
        </view>

        <view class="btn-wrap">
            <button class="bottom-btn" @tap="next">下一步</button>
        </view>
    </div>
</template>

<script setup>
import { getEumData } from "@/utils/utils";
import { ref } from "vue";
import { useReleasePostionStore } from "./store";
import { dictJobTypeApi } from "@/api/common";
import { getJobByIdApi } from "@/api/postion";
import _ from "lodash";
const { formData, setFormDataKey, setForm } = useReleasePostionStore();

/* 兼职全职枚举 */
const EnumWorkMode = ref([]);
const getEnumWorkMode = async () => {
    EnumWorkMode.value = await getEumData("EnumWorkMode");
};

getEnumWorkMode();
const changeWorkMode = mode => {
    setFormDataKey("workMode", mode);
    setFormDataKey("minSalary", 0);
    setFormDataKey("maxSalary", 0);
    if (mode == 2) {
        // 小时
        setFormDataKey("settlementType", 1);
    } else {
        // 月
        setFormDataKey("settlementType", 4);
    }
};
/* 职业类型 */
const value = ref([]);
const columns = ref([]);
const getJobType = () => {
    dictJobTypeApi({}).then(res => {
        columns.value.push(res.data);
    });
};
getJobType();
const columnChange = ({ selectedItem, resolve, finish }) => {
    if (selectedItem.children?.length > 0) {
        resolve(selectedItem.children);
    } else {
        finish();
    }
};
const handleConfirm = ({ selectedItems, value }) => {
    const taget = _.last(selectedItems);
    setFormDataKey("jobTypeText", taget.name);
    setFormDataKey("jobType", taget.id);
};
const next = () => {
    uni.navigateTo({
        url: "/pages/recommend/releasePostion/step2"
    });
};
</script>

<style lang="scss" scoped>
@import "./common.scss";
.describe {
    textarea {
        box-sizing: border-box;
        width: 686rpx;
        height: 272rpx;
        padding: 32rpx;
        background: #f2f5fb;
        border-radius: 8rpx;
        opacity: 1;
    }
}
.switch {
    display: flex;
    align-items: center;
    width: 320rpx;
    overflow: hidden;
    border-radius: 16rpx;
    view {
        box-sizing: border-box;
        width: 160rpx;
        padding: 14rpx 52rpx;
        font-size: 28rpx;
        color: #1f86ff;
        background: #1f86ff22;
        &.active {
            color: #ffffff;
            background-color: #1f86ff;
        }
    }
}
</style>
