<template>
    <view class="item">
        <view class="label">学校名称</view>
        <input v-model="params.schoolName" placeholder="请输入用户名" border="{{ false }}" />
    </view>
    <view class="item">
        <view class="label">专业名称</view>
        <input v-model="params.major" placeholder="请输入用户名" border="{{ false }}" />
    </view>

    <view class="item">
        <view class="label">开始时间</view>
        <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"
            use-default-slot
            class="my-datetime-picker"
        >
            <view :class="`inner ${params.startDate ? '' : 'placeholder'}`">
                {{ format(params.startDate) || "选择开始时间" }}
            </view>
        </wd-datetime-picker>
    </view>
    <view class="item">
        <view class="label">结束时间</view>
        <wd-datetime-picker
            :default-value="new Date().getTime()"
            :minDate="params.startDate"
            :maxDate="new Date().getTime()"
            type="year-month"
            v-model="params.endDate"
            use-default-slot
            class="my-datetime-picker"
        >
            <view :class="`inner ${params.endDate ? '' : 'placeholder'}`">
                {{ format(params.endDate) || "结束时间" }}
            </view>
        </wd-datetime-picker>
    </view>
    <view class="btn-wrap">
        <button @click="submit">保存</button>
    </view>
</template>

<script setup>
import { saveEducationExperienceApi } from "@/api/user";
import dayjs from "dayjs";
import { reactive } from "vue";
const params = reactive({ schoolName: "", startDate: 0, endDate: 0, major: "" });
const format = date => date && dayjs(date).format("YYYY-MM-DD");
const submit = () => {
    saveEducationExperienceApi(JSON.stringify([params])).then(res => {
        if (res.code === 200) {
            uni.showToast({
                title: "保存成功",
                icon: "none"
            });
            setTimeout(() => {
                uni.navigateBack();
            }, 1000);
        }
    });
};
</script>

<style lang="scss" scoped>
.item {
    display: flex;
    align-items: center;
    margin: 0 32rpx;
    border-bottom: 2rpx solid #f3f4f8;
    .label {
        flex: 0 0 160rpx;
        padding: 32rpx 0;
        font-size: 24rpx;
        font-weight: 500;
        line-height: 24rpx;
        color: #77818f;
    }
    .placeholder {
        color: #77818f;
    }
    .inner {
        height: 88rpx;
        padding: 0 32rpx;
        font-size: 28rpx;
        line-height: 88rpx;
    }
    textarea {
        box-sizing: border-box;
        width: 100%;
        height: 272rpx;
        padding: 32rpx;
        margin: 10rpx auto 32rpx;
        background: #f2f5fb;
        border-radius: 8rpx;
    }
}
.btn-wrap {
    position: fixed;
    bottom: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 16rpx 64rpx;
    border-top: 2rpx solid rgb(31 35 41 / 15%);
    button {
        font-size: 30rpx;
        font-weight: 600;
        color: #ffffff;
        background: #1f86ff;
        border-radius: 12rpx;
    }
}
</style>
