{extend name="public/base"/}
{block name="css"}
<style>
    .content-linear {background:url("__MIMAGES__/bg_my.png") no-repeat 100% 100%;}
    .user-info {padding:20px 16px;display:flex;position:relative;align-items:center;}
    .user-info .person-wrap {margin-left:10px;}
    .user-info .person-wrap .nickname{font-size:18px;}
    .user-info .person-wrap .phone{font-size:14px;margin-top:5px;}
    .user-info .setting {position:absolute;top:10px;right:40px;}
    .user-info .chat {position:absolute;top:10px;right:10px;}
    .user-grid {padding:10px 16px;}
    .user-grid .van-grid {border-radius:10px;overflow:hidden;}
    .user-grid .grid-text {font-size:12px;color:#1a1a1a;margin-top:5px;}
    body {background:#f5f5f5;}
</style>
{/block}
{block name="body"}
<van-nav-bar
        class="nav-theme"
        :fixed="true"
        :placeholder="true"
        @click-left="onBack"
>
    <template #title>
        <span class="text-white">个人中心</span>
    </template>
</van-nav-bar>
<div class="content-linear">
    <div class="user-info">
        <div class="avatar-wrap">
            <van-image
                    width="50"
                    height="50"
                    fit="cover"
                    round
                    :src="avatar"
            ></van-image>
        </div>
        <div class="person-wrap">
            <div class="nickname">{{user.nickname}}</div>
            <div class="phone" v-if="user.mobile">{{user.mobile}}</div>
        </div>
        <div class="setting" @click="navTo('{:url('my/info')}')">
            <van-icon name="setting-o" size="20"></van-icon>
        </div>
        <div class="chat" @click="navTo('{:url('my/notice')}')">
            <van-icon name="chat-o" size="20" dot></van-icon>
        </div>
    </div>
    <div class="user-grid">
        <van-grid :border="false">
            <van-grid-item @click="navTo('{:url('my/info')}')">
                <van-image
                        width="30"
                        height="30"
                        src="__MIMAGES__/icon_info.png"
                ></van-image>
                <div class="grid-text">个人资料</div>
            </van-grid-item>
            <van-grid-item @click="navTo('{:url('my/password')}')">
                <van-image
                        width="30"
                        height="30"
                        src="__MIMAGES__/icon_password.png"
                ></van-image>
                <div class="grid-text">修改密码</div>
            </van-grid-item>
            <van-grid-item @click="navTo('{:url('my/mobile')}')">
                <van-image
                        width="30"
                        height="30"
                        src="__MIMAGES__/icon_phone.png"
                ></van-image>
                <div class="grid-text">换绑手机</div>
            </van-grid-item>
            <van-grid-item @click="navTo('{:url('my/auth')}')">
                <van-image
                        width="30"
                        height="30"
                        src="__MIMAGES__/icon_name_auth.png"
                ></van-image>
                <div class="grid-text">实名认证</div>
            </van-grid-item>
        </van-grid>
    </div>
</div>

<van-cell-group inset>
    <van-cell title="绑定微信" v-if="!user.openid" is-link url="{:url('login/wechat')}"></van-cell>
    <van-cell title="意见反馈" is-link url="{:url('my/feedback')}"></van-cell>
    <van-cell title="关于我们" is-link url="{:url('my/about')}"></van-cell>
    <van-cell title="退出" is-link url="{:url('login/logout')}"></van-cell>
</van-cell-group>

<van-tabbar v-model="active" @change="onTab" :placeholder="true">
    <van-tabbar-item icon="wap-home-o" url="{:url('/')}">首页</van-tabbar-item>
    <van-tabbar-item icon="description" url="{:url('article/index')}">文章</van-tabbar-item>
    <van-tabbar-item icon="user-circle-o">我的</van-tabbar-item>
</van-tabbar>
{/block}
{block name="script"}
<script>
    function v_setup() {
        let base = {};

        base.active = 2;
        base.user = {$user};
        base.navTo = (url) => {
            location.href = url;
        };

        base.avatar = Vue.computed(()=>{
            return base.user.avatar ? base.user.avatar : "__COMMON_IMAGES__/default_avatar.png";
        });

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