<template>
    <!-- Main Start -->
    <main class="main-wrap setting-page mb-xxl">
        <div class="user-panel">
            <div class="media">
                <div class="avatar-wrap">
                    <a href="javascript:void(0)">
                        <img :src="form.headimg" alt="avatar" />
                    </a>
                    <span class="edit"> <i class="icon-pencil"></i></span>
                </div>
                <div class="media-body">
                    <h2 class="title-color">{{ form.real_name }}</h2>
                </div>
            </div>
        </div>

        <!-- Form Section Start -->
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="form.real_name" name="real_name" placeholder="真實姓名" />
                <van-field v-model="form.mobile_phone" name="mobile_phone" placeholder="行動電話" />
                <van-field v-model="form.email" name="email" placeholder="電子郵件" />
                <van-popup v-model:show="showPicker" position="bottom">
                    <van-date-picker @confirm="onConfirm" @cancel="showPicker = false" />
                </van-popup>
            </van-cell-group>
            <div style="margin: 16px">
                <van-button round block color="#0baf9a" native-type="submit"> 提交 </van-button>
            </div>
        </van-form>
        <!-- Form Section End -->
    </main>
    <!-- Main End -->
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getUserInfo } from "@/services/user";

const showPicker = ref(false);

const form = ref({
    sex: "0",
});

onMounted(async () => {
    let res = await getUserInfo();
    console.log('res',res)
    if (res.code == 200) {
        form.value = {
            real_name: res.data.real_name,
            email: res.data.email,
            mobile_phone: res.data.mobile_phone,
            headimg: res.data.headimg,
        };
    }
});

const onSubmit = () => {
    console.log(form.value);
};
</script>

<style lang="less" scoped></style>
