{extend name="public/base"/}
{block name="css"}
<style>
    .avatar {width:100px;height:100px;margin:0 auto;}
</style>
{/block}
{block name="body"}
<van-nav-bar
        class="nav-theme"
        :fixed="true"
        :placeholder="true"
        left-text="返回"
        left-arrow
        @click-left="onBack"
>
    <template #title>
        <span class="text-white">个人信息</span>
    </template>
</van-nav-bar>
<van-form @submit="onSubmit">
    <van-cell-group>
        <div style="width:100%;height:10px;"></div>
        <div class="avatar">
            <van-uploader :after-read="afterRead" :before-read="beforeRead" :max-size="1024 * 1024" @oversize="onOversize">
                <van-image
                        width="100"
                        height="100"
                        fit="cover"
                        round
                        :src="avatar"
                ></van-image>
            </van-uploader>
        </div>
        <div style="width:100%;height:10px;"></div>
        <van-field
                v-if="!user.has_account"
                v-model="user.account"
                required
                label="账号"
                placeholder="请输入账号"
                :rules="[{ required: true, message: '请输入账号' }]"
        ></van-field>
        <van-field
                v-if="user.has_account"
                v-model="user.account"
                disabled
                label="账号"
        ></van-field>
        <van-field
                v-model="user.nickname"
                label="昵称"
                required
                placeholder="请输入昵称"
                :rules="[{ required: true, message: '请输入昵称' }]"
        ></van-field>
        <van-field
                required
                label="性别"
                :rules="[{ required: true, message: '请选择性别' }]"
        >
            <template #input>
                <van-radio-group v-model="user.gender" direction="horizontal">
                    <van-radio :name="1">男</van-radio>
                    <van-radio :name="2">女</van-radio>
                </van-radio-group>
            </template>
        </van-field>
        <van-field
                v-model="user.birthday"
                required
                readonly
                label="出生日期"
                placeholder="请选择出生日期"
                @click="toggleBirthday(true)"
                :rules="[{ required: true, message: '请选择出生日期' }]"
        ></van-field>
        <van-popup v-model:show="birthday_show" position="bottom">
            <van-date-picker
                    v-model="birthday"
                    title="出生日期"
                    :min-date="minDate"
                    @confirm="onBirthday"
                    @cancel="toggleBirthday(false)"
            ></van-date-picker>
        </van-popup>
    </van-cell-group>
    <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
            提交
        </van-button>
    </div>
</van-form>
{/block}
{block name="script"}
<script>
    function v_setup() {
        let base = {};

        //基础
        let user = {$user};
        base.birthday = Vue.ref(user.birthday ? user.birthday.split('-') : []);
        base.has_account = (user.account !== '');
        base.user = Vue.reactive(user);
        base.onBack = () => {
            location.href = "{:url('my/index')}";
        };

        //头像
        base.avatar = Vue.computed(()=>{
            return base.user.avatar ? base.user.avatar : "__COMMON_IMAGES__/default_avatar.png";
        });
        base.beforeRead = (file) => {
            if (file.type.indexOf('image/') === -1) {
                vant.showToast('请上传图片');
                return false;
            }

            return true;
        };
        base.afterRead = (file) => {
            const formData = new FormData();
            formData.append("file", file.file);

            postFile("upload/image",formData).then(({data})=>{
                base.user.avatar = data.src;
            });

            return true;
        };
        base.onOversize = () => {
            vant.showToast('文件大小不能超过1MB');
            return false;
        };

        //日期
        base.birthday_show = Vue.ref(false);
        base.minDate = new Date(1900, 0, 1);
        base.toggleBirthday = (value) => {
            base.birthday_show.value = value;
        };
        base.onBirthday = (value) => {
            base.user.birthday = value.selectedValues.join('-');
            base.birthday_show.value = false;
        };

        //表单提交
        base.onSubmit = () => {
            if (base.user.avatar === '') {
                vant.showToast('请上传头像');
            }
            if (base.user.gender === 0) {
                vant.showToast('请选择性别');
            }

            postJson('/my/infoPost',base.user).then(() => {
                location.href = "{:url('my/index')}";
            });
        };

        return base;
    }
</script>
{/block}