<template>
    <div>
        <header-box title="个人信息" ref="header"></header-box>
        <ul>
            <li>
                <label @click="setAvatar">头像
                    <span class="details-icon">
                        <img class="head-portrait user-avatar" :src="currentIco" @error="imgerror">
                        <span class="icon icon-right"></span>
                    </span>
                </label>
            </li>
            <li>
                <label>昵称<input class="nickname" v-model='currentNick' maxlength="16" @input="setNickname" @change="checkNickname"></label>
            </li>
            <li>
                <label @click="setAender">性别
                    <span class="details-gender">
                        <span class="gender">{{ currentGender ? currentGender : '选择性别' }}</span>
                        <span class="icon icon-right"></span>
                    </span>
                </label>
            </li>
            <li>
                <label>生日
                    <span class="details-birthday">
                        <span class="birthday-span">{{spanbirthday}}</span>
                        <input class="birthday" type="date" v-model='currentBirthday' @change="setBirthday" required></input>
                    </span>
                </label>
            </li>
            <li>
                <label>会员等级
                    <a class="grade" href="/me/grade">
                        <span class="vip-span">{{vip_level}}</span>
                        <span class="icon icon-right"></span>
                    </a>
                </label>
            </li>
        </ul>
    </div>
</template>

<script>
    import $ from 'jquery';
    import yoho from 'yoho';
    import tip from 'common/tip';
    import select from 'common/select';
    import HeaderBox from 'component/header.vue';

    const genderSel = select([{
        key: '1',
        val: 'MEN'
    }, {
        key: '2',
        val: 'WOMEN'
    }]);

    export default {
        props: ['head_ico', 'nickname', 'gender', 'birthday', 'vip_level'],
        data() {
            return {
                currentNick: this.nickname,
                currentIco: this.head_ico,
                currentGender: this.gender,
                currentBirthday: this.birthday
            };
        },
        computed: {
            spanbirthday: function() {
                const arr = this.currentBirthday.split('-');

                return arr.length === 3 ? `${arr[0]}年${arr[1]}月${arr[2]}日` : '1900年01月01日';
            }
        },
        methods: {
            imgerror: function() {
                // 图片报错时，给个默认透明图片
                this.currentIco = 'data:image/png;base64,R0lGODlhFAAUAIAAAP///wAAACH5BAEAAAAALAAAAAAUABQAAAIRhI+py+0Po5y02ouz3rz7rxUAOw==';
            },
            setAvatar: function() {
                yoho.goSetAvatar();
            },
            checkNickname: function() {
                if (!(this.currentNick.trim())) {
                    tip('昵称不能为空');
                    this.currentNick = this.nickname;
                    return false;
                }
            },
            setNickname: function() {
                if (!(this.currentNick.trim()) || this.nickname === this.currentNick) {
                    return false;
                }

                this.saveDetails({
                    nickname: this.currentNick
                });
            },
            setAender: function() {
                genderSel.show(item => {
                    this.currentGender = item.val;
                    this.saveDetails({
                        nickname: this.currentNick,
                        gender: item.key
                    });
                });
            },
            setBirthday: function() {
                this.saveDetails({
                    nickname: this.currentNick,
                    birthday: this.currentBirthday
                });
            },
            saveDetails: function(params) {
                $.ajax({
                    method: 'POST',
                    url: '/me/save-mydetails',
                    data: params
                }).then(result => {
                    if (result.code !== 200) {
                        tip(result.message || '设置失败');
                    }
                }).fail(() => {
                    tip('网络错误');
                });
            }
        },
        components: {HeaderBox}
    };
</script>

<style>
    @import "../../scss/me/_details.css";
</style>