<template>
    <view class="container">
        <view class="header">
            <view class="title"> 工作/实习经历 </view>
            <view class="desc mt20"> 从最近的一份工作/实习经历填写哦 </view>
        </view>
        <view class="form">
            <!-- 公司名称 -->
            <view class="form-item">
                <view class="form-info">
                    <view class="label">公司名称</view>
                    <input type="text" v-model="params.companyName" placeholder="请输入" />
                </view>
            </view>
            <!-- 在职时间 -->
            <view class="form-item" bindtap="goToSelectJobType">
                <view class="form-info">
                    <view class="label">在职时间</view>
                    <view class="time-wrapper flex-r-c mt20">
                        <wd-datetime-picker
                            :default-value="new Date().getTime()"
                            :maxDate="new Date().getTime()"
                            :minDate="new Date('1960/01/01').getTime()"
                            type="year-month"
                            v-model="params.startDate"
                            class="my-datetime-picker"
                        />
                        <view class="line"></view>
                        <wd-datetime-picker
                            :default-value="new Date().getTime()"
                            :minDate="params.startDate"
                            :maxDate="new Date().getTime()"
                            type="year-month"
                            v-model="params.endDate"
                        />
                    </view>
                </view>
            </view>
            <!-- 职位类型 -->

            <wd-col-picker
                label="期望职位"
                v-model="postionValue"
                :columns="postionOpstion"
                value-key="name"
                label-key="name"
                :column-change="columnChangePostion"
                @confirm="handleConfirmPostion"
                use-default-slot
            >
                <view class="form-item">
                    <view class="form-info">
                        <view class="label">职位类型</view>
                        <view :class="['cont', 'mt20', !jobTypeText ? 'placeholder-style' : '']">{{
                            jobTypeText || "请选择"
                        }}</view>
                    </view>
                    <view class="arrow"></view>
                </view>
            </wd-col-picker>
            <!-- 工作内容 -->
            <view class="form-item">
                <view class="form-info">
                    <view class="label">工作内容</view>
                    <textarea v-model="params.content" placeholder="请输入" />
                </view>
            </view>
        </view>
        <!--         <view class="btn-wrapper" wx:if="{{isEdit && leng > 1}}">
            <button class="del-btn ml32" bindtap="delWorkExperience">删除</button>
            <button class="save-btn save-btn-samll" bindtap="save">保存</button>
        </view> -->
        <view class="btn-wrapper">
            <button class="save-btn" @tap="save">保存</button>
        </view>
    </view>
</template>

<script setup>
import { ref } from "vue";
import { dictJobTypeApi } from "@/api/common";
import { saveWorkExperienceApi } from "@/api/user";
import _ from "lodash";
const jobTypeText = ref("");
const params = reactive({
    companyName: "",
    startDate: 0,
    endDate: 0,
    position: "",
    content: ""
});

const postionValue = ref([]);
const postionOpstion = ref([]);
dictJobTypeApi({}).then(res => {
    postionOpstion.value.push(res.data);
});
const columnChangePostion = ({ selectedItem, resolve, finish }) => {
    if (selectedItem.children) {
        resolve(selectedItem.children);
    } else {
        finish();
    }
};
const handleConfirmPostion = ({ selectedItems }) => {
    console.log(selectedItems);
    jobTypeText.value = _.last(selectedItems).name;
};
const save = () => {
    params.position = jobTypeText.value;

    console.log(params);
    saveWorkExperienceApi(JSON.stringify([params])).then(res => {
        console.log(res);
        if (res.code == 200) {
            uni.showToast({
                title: "保存成功",
                icon: "success"
            });
        }
    });
};
</script>

<style lang="scss" scoped>
.container {
    min-height: 100vh;
    padding: 0 32rpx;
    background-color: #ffffff;
}
.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 {
    width: 92%;
}
.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;
}
.ml32 {
    margin-left: 32rpx;
}
.right-icon {
    width: 48rpx;
    height: 48rpx;
}
.color-grey {
    font-size: 28rpx;
    color: #a0afc3;
}
.placeholder-style {
    font-size: 28rpx !important;
    color: #a0afc3 !important;
}
.flex-r-c {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.line {
    width: 40rpx;
    height: 2rpx;
    margin: 0 80rpx;
    background-color: #8693a3;
}
.overflow-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.btn-wrapper .del-btn {
    width: 276rpx;
    height: 72rpx;
    font-size: 32rpx;
    line-height: 72rpx;
    color: #1892ff;
    background: #ffffff;
    border: 2rpx solid #1892ff;
    border-radius: 8rpx;
}
.btn-wrapper .save-btn-samll {
    width: 380rpx;
    height: 72rpx;
}
:deep(.my-datetime-picker) {
    .wd-icon-arrow-right {
        display: none;
    }
}
</style>
