<template>
     <ul>
        <li>
            <label @click="setAvatar">头像
                <span class="details-icon">
                    <img class="head-portrait user-avatar" :src="head_ico" @error="imgerror">
                    <span class="icon icon-right"></span>
                </span>
            </label>
        </li>
        <li>
            <label>昵称<input class="nickname" v-model='nickname' maxlength="16" @input="setNickname" @change="checkNickname"></label>
        </li>
        <li>
            <label @click="setAender">性别
                <span class="details-gender">
                    <span class="gender">{{ gender ? gender : '选择性别' }}</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='birthday' @change="setBirthday" required></input>
                </span>
            </label>
        </li>
        <li>
            <label>会员等级
                <a class="grade" href="/me/grade">
                    <span class="icon icon-right"></span>
                </a>
            </label>
        </li>
    </ul>
</template>

<script>
    const $ = require('jquery');
    const yoho = require('yoho');
    const tip = require('common/tip');
    const genderSel = require('common/select')([{
        key: '1',
        val: 'MEN'
    }, {
        key: '2',
        val: 'WOMEN'
    }]);

    module.exports = {
        props: ['head_ico', 'nickname', 'gender', 'birthday'],
        data() {
            return {
                currentval: this.nickname
            };
        },
        computed: {
            spanbirthday: function() {
                const arr = this.birthday.split('-');

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

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

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