<template>
    <div class="page">
        <div class="content">
            <div class="item flex-between">
                <p class="label">头像</p>
                <div class="flex-align-center" @click="chooseImage">
                    <image v-if="params.avatarPath" class="avatar" :src="evn.APP_IMAGE_BASE_API + params.avatarPath" mode="" />
                    <image v-else class="avatar" src="@/static/image/user/default-avatar.png" mode="" />
                    <div class="arrow"></div>
                </div>
            </div>
            <div class="item">
                <p class="label">姓名</p>
                <input type="text" v-model="params.realName" placeholder="请输入姓名" />
            </div>
            <div class="item">
                <p class="label">职位</p>
                <input type="text" v-model="params.position" placeholder="请输入职位" />
            </div>
            <div class="item">
                <p class="label">电话</p>
                <input type="number" v-model="params.phone" placeholder="请输入电话" />
            </div>
        </div>
        <div class="footer">
            <button class="bottom-btn" @click="submit">保存</button>
        </div>
    </div>
</template>

<script setup>
import evn from "@/utils/config.js";
import { uploadFiles } from "@/utils/fileUpload";
import { saveBasicInfoApi, getLoginUserApi } from "@/api/user";
const params = reactive({
    avatarPath: "",
    realName: "",
    phone: "",
    position: ""
});
/* 回显 */
getLoginUserApi().then(res => {
    console.log(res);
    if (res.code == 200) {
        const { avatarPath, realName, phone, position } = res.data;
        params.avatarPath = avatarPath;
        params.realName = realName;
        params.phone = phone;
        params.position = position;
    }
});
/* 选择图片 */
const chooseImage = () => {
    console.log(123);
    uni.chooseImage({
        count: 1,
        success: async ({ tempFiles }) => {
            const res = await uploadFiles(tempFiles);
            params.avatarPath = res[0].key;
        }
    });
};
/* 提交 */
const submit = () => {
    console.log(params);
    saveBasicInfoApi(params).then(res => {
        console.log(res);
        if (res.code == 200) {
            uni.showToast({
                title: "保存成功",
                icon: "success"
            });
            setTimeout(() => {
                uni.navigateBack();
            }, 100);
        }
    });
};
</script>

<style lang="scss" scoped>
.page {
    display: flex;
    flex-direction: column;
    height: 100%;
    .content {
        flex: 1;
        padding: 0 16px;
        .item {
            display: flex;
            align-items: center;

            // justify-content: space-between;
            padding: 16px 0;
            border-bottom: 1px solid #f3f4f8;
            .label {
                flex: 0 0 100px;
                font-size: 12px;
                font-weight: 500;
                line-height: 18px;
                color: #77818f;
            }
            input {
                font-size: 14px;
                font-weight: normal;
                line-height: 18px;
                color: #1b2026;
            }
            image {
                width: 28px;
                height: 28px;
                border-radius: 50%;
            }
        }
    }
    .footer {
        padding: 8px 0;
        border-top: 1rpx solid #1f232918;
    }
}
</style>
