<template>
    <div class="page">
        <NavBar :showIcon="true" :showTitle="false" title="" backgroundBox="#FFFFFF"></NavBar>
        <!--         <Filter /> -->
        <view class="title">
            <view class="t1">1/5填写岗位信息</view>
            <view class="t2">新选择对应的职位类别填写岗位信息</view>
        </view>
        <view class="content">
            <selectbox
                @update="changeWorkMode"
                :options="EnumWorkMode"
                label-key="text"
                value-key="code"
                v-model="pinias.formData.workMode"
            ></selectbox>
            <form-row>
                <form-item title="职位类型" required>
                    <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 ${pinias.formData.jobTypeName ? '' : 'placeholder'}`">
                            {{ pinias.formData.jobTypeName || "请选择职位类型" }}
                        </view>
                    </wd-col-picker>
                </form-item>
            </form-row>
            <form-row>
                <form-item required title="岗位名称" icon="edit">
                    <input type="text" v-model="pinias.formData.name" placeholder="输入岗位名称" />
                </form-item>
            </form-row>
            <form-row>
                <form-item required title="岗位描述" :border="false" icon="">
                    <textarea v-model="pinias.formData.positionDesc" placeholder="请输入您的岗位描述" maxlength="800"></textarea>
                </form-item>
            </form-row>
        </view>
        <wd-tabbar
            @tap="next"
            custom-style="display: flex;justify-content: center !important;z-index:1;"
            fixed
            placeholder
            safeAreaInsetBottom
        >
            <view class="foot-btn">下一步</view>
        </wd-tabbar>
    </div>
</template>

<script setup>
import Filter from "@/components/filter/index.vue";
import { getEumData } from "@/utils/utils";
import { ref } from "vue";
import { dictJobTypeApi } from "@/api/common";
import { getJobByIdApi } from "@/api/postion";
import { validateForm } from "@/utils/utils";
import _ from "lodash";

import { useReleasePostionStore } from "./store";

import FormItem from "@/components/form/form-item.vue";
import FormRow from "@/components/form/form-row.vue";
import Selectbox from "@/components/form/selectbox.vue";
const pinias = useReleasePostionStore();

onLoad(option => {
    const { id } = option;
    if (!id) {
        pinias.resetForm();
    }
});
/* 兼职全职枚举 */
const EnumWorkMode = ref([]);
const workModeValue = ref();
const getEnumWorkMode = async () => {
    EnumWorkMode.value = await getEumData("EnumWorkMode");
};

getEnumWorkMode();
const changeWorkMode = mode => {
    pinias.setFormDataKey("workMode", mode);
    pinias.setFormDataKey("minSalary", 0);
    pinias.setFormDataKey("maxSalary", 0);
    // console.log("mode", mode);
    if (mode == 2) {
        // 小时
        pinias.setFormDataKey("settlementType", 1);
    } else {
        // 月
        pinias.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 }) => {
    pinias.setFormDataKey("jobTypeName", selectedItems[1].name);
    pinias.setFormDataKey("jobTypeId", selectedItems[1].id);
    pinias.setFormDataKey("jobTypePid", selectedItems[0].id);
};
const next = () => {
    xma.hideKeyboard();
    console.log(pinias.formData);

    if (validateForm(pinias.formData, ["jobTypeId", "jobTypeName", "name", "positionDesc"], "post")) {
        /* uni.redirectTo({
            url: "/pages/recommend/releasePostion/step2"
        }); */
        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;
    }
}
.page {
    .textarea {
        max-height: 272rpx;
        margin-top: 32rpx;
        background: #f2f5fb;
        :deep(.wd-textarea__value) {
            width: 100%;
            max-height: 272rpx;
            padding: 0 !important;
            background: #f2f5fb !important;
        }
        :deep(.wd-textarea__count) {
            background: none !important;
        }
    }
}
.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;
        }
    }
} */
textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 32rpx;
    background: #f2f5fb;
    border-radius: 8rpx;
}
.foot-btn {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 622rpx;
    height: 80rpx;
    color: #ffffff;
    background: #1f86ff;
    border-radius: 12rpx;
}
</style>
