<template>
    <div>
        <div class="info fx-r">
            <div class="avatar fx-h fx-bc fx-ac">
                <el-avatar :src="data.avatar"/>
                <div>{{ data.mobile }}</div>
                <div style="color: #2b85e4">{{ data.nickname }}</div>
            </div>
            <div class="fx-g1" style=" margin-left: 20px;">
                <Row class="expand-row">
                    <Col span="12">
                        <span class="expand-key">注册时间:</span>
                        <span class="expand-value" style="font-size: 10px;"> {{data.regtime }}</span>
                    </Col>


                    <Col span="12">
                        <span class="expand-key">登录时间:</span>
                        <span class="expand-value" style="font-size: 10px;"> {{data.lasttime }}</span>
                    </Col>

                    
                </Row>
				<Row class="expand-row">
					<Col span="12">
					    <span class="expand-key">用户状态：</span>
					    <span class="expand-value">
							<Tag v-if="data.status == 1" checkable color="success">正常</Tag>
							<Tag v-else checkable color="warn">禁用</Tag>
						</span>
					</Col>
					<Col span="12">
					    <span class="expand-key">父级用户：</span>
					    <span class="expand-value" style="color: #0d6eff;cursor: pointer" v-if="data.parent_uid > 0" @click="tapUserItem(data.parent_uid)">{{data.parent_nickname}}</span>
					</Col>
				</Row>

                <Row class="expand-row">
					<Col span="12">
					    <span class="expand-key">余额：</span>
					    <span class="expand-value">{{data.money || 0}}</span>
					</Col>
                    <Col span="12">
                        <span class="expand-key">积分：</span>
                        <span class="expand-value">{{data.score || 0}}</span>
                    </Col>
                    

                </Row>
            </div>

        </div>
    </div>
</template>


<script>
    import {mapState, mapActions} from 'vuex';
    import {SystemUserItem} from "../../../api/system/user";
    export default {
        name: "userInfo",
        data() {
            return {
                data: {},
                uid: 0,
            }
        },

        methods: {
            initView: function (uid) {
                this.uid = uid;
                this.initUser();
            },
            initUser:function(){
                SystemUserItem({uid: this.uid})
                    .then(res => {
                        this.loading = false;
                        if (res.code == 200) {
                            this.data = res.data;
                        } else {
                            this.$alert(res.msg);
                        }
                    })
                    .catch(err => {
                        this.loading = false
                        this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示');
                    });
            },
        }

    }
</script>
<style scoped>
    .info .avatar {
        margin-left: 20px;
    }

    .expand-row {
        padding: 10px 0;
    }
    .tab-select a{ color: #606266;  padding: 10px 0; padding-right: 12px;display: inline-block;}
    .tab-select a.active{ color: #0d6eff}
</style>
