<template>
    <view class="content">
        <!-- 用户信息 -->
        <view class="info-box">
            <image src="@/static/user/user_back.png" mode="aspectFill" />
            <view class="user-flex">
                <image class="cover" @click="goSetting"
                    :src="userInfo.avatar || require('@/static/user/cover.png')" mode="aspectFill" />
                <view class="user-content">
                    <block v-if="$store.state.token != ''">
                        <view class="name">{{ userInfo.nickname }}</view>
                        <view class="tabs" v-if="userInfo.identity.length !== 0">
                            <view class="tabs-item">
                                <image src="@/static/user/icon_07.png" />
                                VIP会员
                            </view>
                        </view>
                        <view class="tabs" v-else>
                            <view class="tabs-item">
                                <image src="@/static/user/icon_07.png" />
                                普通用户
                            </view>
                        </view>
                        <view class="chainAddress" v-if="userInfo.chain_address">
                            <u-icon labelPos="left" @click="copy(userInfo.chain_address)" labelSize="14"
                                labelColor="#fff" :label="userInfo.chain_address.substr(0, 20)+'...'" space="10"
                                :name="require('@/static/imgs/copy.png')" size="16" />
                        </view>
                    </block>
                    <block v-else>
                        <view class="name" @click="isLogin()">未登录</view>
                    </block>
                </view>
            </view>
        </view>


        <!-- 会员卡 -->
        <view class="vip-card">
            <view class="title">
                <image src="@/static/user/icon_06.png" mode="widthFix" />
                ZH会员
            </view>
            <view class="subtitle">
                <u-notice-bar :text="cardText" icon="" bgColor="" duration="3000" color="#fcc692" direction="column">
                </u-notice-bar>
            </view>
            <view class="btn" @click="openVip" v-if="userInfo.identity.length === 0">开通</view>
        </view>

        <!-- 健康数据 -->
        <view class="health-flex" v-if="userInfo.has_record">
            <view class="health-flex-item">
                <view class="title">
                    体脂率
                    <image class="icon" src="@/static/user/icon_04.png" mode="widthFix" />
                </view>
                <view class="num">
                    {{ userInfo.record.fat.fat }}
                    <text>%</text>
                </view>
                <view class="hith">{{ userInfo.record.fat.text }}</view>
            </view>
            <view class="health-flex-item">
                <view class="title">
                    体重
                    <image class="icon" src="@/static/user/icon_05.png" mode="widthFix" />
                </view>
                <view class="num">
                    {{ userInfo.record.weight.weight }}
                    <text>KG</text>
                </view>
                <view class="hith">{{ userInfo.record.weight.text }}</view>
            </view>
        </view>
        <!-- 订单 -->
        <view class="order-box">
            <view class="order-box-item" @click="onBtn('Order', { index: 0 })">
                <image class="icon" src="@/static/user/order_icon_00.png" mode="widthFix" />
                <view class="title">全部订单</view>
            </view>
            <view class="order-box-item" @click="onBtn('Order', { index: 1 })">
                <image class="icon" src="@/static/user/order_icon_01.png" mode="widthFix" />
                <view class="title">待付款</view>
            </view>
            <view class="order-box-item" @click="onBtn('Order', { index: 2 })">
                <image class="icon" src="@/static/user/order_icon_02.png" mode="widthFix" />
                <view class="title">待发货</view>
            </view>
            <view class="order-box-item" @click="onBtn('Order', { index: 3 })">
                <image class="icon" src="@/static/user/order_icon_03.png" mode="widthFix" />
                <view class="title">待收货</view>
            </view>
            <view class="order-box-item" @click="onBtn('Order', { index: 4 })">
                <image class="icon" src="@/static/user/order_icon_04.png" mode="widthFix" />
                <view class="title">已完成</view>
            </view>
        </view>
        <!-- 功能块 -->
        <view class="btns-box">
            <view class="btns-box-item" @click="onWallet">
                <image class="icon" src="@/static/user/userIcon_00.png" mode="widthFix" />
                ZH钱包
                <uni-icons class="forward" type="forward" color="#999" />
            </view>
            <view class="btns-box-item" @click="onFiles">
                <image class="icon" src="@/static/user/userIcon_02.png" mode="widthFix" />
                健康档案
                <uni-icons class="forward" type="forward" color="#999" />
            </view>
            <view class="btns-box-item" @click="onBtn('Address', { type: 'edit' })">
                <image class="icon" src="@/static/user/userIcon_03.png" mode="widthFix" />
                地址管理
                <uni-icons class="forward" type="forward" color="#999" />
            </view>
        </view>
        <view class="btns-box" v-if="$store.state.token != ''">
            <view class="btns-box-item" @click="logOut">
                <image class="icon" src="@/static/user/userIcon_05.png" mode="widthFix" />
                退出登录
                <uni-icons class="forward" type="forward" color="#999" />
            </view>
        </view>
        <view class="footer-text">
            <view>ZH生态俱乐部</view>
            <view>All Rights Reserved. ZH Eco Club</view>
        </view>
    </view>
</template>

<script>
    import {
        info
    } from '@/apis/interfaces/user';
    import userAuth from '@/public/userAuth';
    import im from '@/utils/im/index.js'

    export default {
        data() {
            return {
                cardText: ['新用户首单即赠会员', '老用户专属验证开通会员'],
                userInfo: {
                    nickname: '',
                    avatar: '',
                    identity: []
                }
            };
        },
        onShow() {
            this.getInfo();
        },
        methods: {
            // 用户信息
            getInfo() {
                if (this.$store.state.token === '') return;
                info()
                    .then(res => {
                        uni.setNavigationBarTitle({
                            title: res.nickname
                        });
                        this.userInfo = res;
                    })
                    .catch(err => {
                        uni.showToast({
                            title: err.message,
                            icon: 'none'
                        });
                    });
            },
            // 开通会员
            openVip() {
                if (this.isLogin()) {
                    uni.showActionSheet({
                        itemList: ['我是新用户', '我是老用户'],
                        success: res => {
                            switch (res.tapIndex) {
                                case 0:
                                    uni.showModal({
                                        title: '开通提示',
                                        content: '平台新用户完成首笔订单，即可获赠ZH健康会员',
                                        showCancel: false,
                                        cancelText: '去完成',
                                        success: res => {
                                            console.log(res);
                                            this.$Router.pushTab({
                                                name: 'Store'
                                            });
                                        }
                                    });
                                    break;
                                case 1:
                                    uni.showToast({
                                        title: '老用户渠道暂未开放',
                                        icon: 'none'
                                    });
                                    break;
                            }
                        }
                    });
                }
            },
            // 开通钱包
            onWallet() {
                if (this.isLogin()) {
                    if (this.userInfo.is_wallet) this.$Router.push({
                        name: 'WalletProperty'
                    });
                    else this.$Router.push({
                        name: 'WalletAdd'
                    });
                }
            },
            // 个人档案
            onFiles() {
                if (this.isLogin()) {
                    if (!this.userInfo.has_record) {
                        this.$Router.push({
                            name: 'EssentialInfo'
                        });
                        return;
                    }
                    // this.$Router.push({ name: 'UserFiles',params:{id:this.userInfo.record_id} });
                    uni.navigateTo({
                        url: `/pages/user/files?id=${this.userInfo.record.record_id}`
                    });
                }
            },
            // 按钮导航
            onBtn(name, params) {
                if (this.isLogin()) {
                    this.$Router.push({
                        name,
                        params
                    });
                }
            },
            goSetting(){
                if (this.isLogin()) {
                    this.$Router.push({ name: 'Setting' })
                }
            },
            // 检查登录
            isLogin() {
                if (this.$store.state.token === '') {
                    const Auth = new userAuth();
                    Auth.Login();
                    return false;
                }
                return true;
            },
            // 退出登录
            logOut() {
                this.userInfo = {
                    nickname: '',
                    avatar: '',
                    identity: []
                };
                this.$store.commit('setToken', '');
                // 断开IM链接
                im.disconnect()
            },
            copy(data) {
                uni.setClipboardData({
                    data: data,
                    success: function() {
                        uni.showToast({
                            title: '复制成功',
                            icon: 'none',
                            mask:true,
                            duration:2000
                        })
                    }
                });
            }
        }
    };
</script>

<style lang="scss" scoped>
    .content {
        background: $window-color;
        min-height: 100vh;
    }

    // 版权信息
    .footer-text {
        text-align: center;
        font-size: $title-size-sm;
        padding: $padding $padding $padding * 2;
        color: $text-gray-m;
    }

    // 用户信息
    .info-box {
        position: relative;
        background: linear-gradient(to right, #34ce98, #22aa98);
        color: white;
        @extend .ios-top;

        &>image {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            // z-index: 100;
        }

        .user-flex {
            position: relative;
            padding: $padding * 2 $padding ($padding * 2 + 60);
            height: 128rpx;

            .cover {
                position: absolute;
                width: 128rpx;
                height: 128rpx;
                border-radius: 50%;
                border: solid 6rpx white;
                box-sizing: border-box;
                z-index: 100;
            }

            .user-content {
                padding-left: 158rpx;
                height: 140rpx;
                display: flex;
                flex-direction: column;
                justify-content: center;
                position: relative;

                .chainAddress {
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    font-size: $title-size-m;
                    padding-top: 10rpx;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: flex-start;
                    position: relative;
                    z-index: 200;
                }

                .name {
                    line-height: 40rpx;
                    font-weight: bold;
                    font-size: $title-size + 8;
                    @extend .nowrap;
                }

                .tabs {
                    padding-top: 10rpx;

                    &-item {
                        background: rgba($color: #000000, $alpha: 0.3);
                        font-size: $title-size-sm - 4;
                        display: inline-block;
                        line-height: 36rpx;
                        padding: 0 20rpx;
                        border-radius: 20rpx;

                        image {
                            width: 26rpx;
                            height: 26rpx;
                            vertical-align: middle;
                            margin-bottom: 2rpx;
                            margin-right: 8rpx;
                        }
                    }
                }
            }
        }
    }

    // 会员卡
    .vip-card {
        position: relative;
        margin: -60rpx $margin $margin;
        background: linear-gradient(to right bottom, #3e5364, #31364a);
        border-radius: $radius;
        box-sizing: border-box;
        color: #fcc692;
        padding: $padding ($padding + 170) $padding $padding;

        .title {
            font-weight: bold;
            font-size: $title-size-lg;
            line-height: 40rpx;

            image {
                width: 32rpx;
                height: 32rpx;
                margin-right: 10rpx;
                vertical-align: middle;
                margin-bottom: 4rpx;
            }
        }

        .subtitle {
            font-size: $title-size-sm;
            margin-top: 10rpx;

            .u-notice-bar {
                padding: 0;
            }
        }

        .btn {
            position: absolute;
            right: $margin;
            margin-top: -30rpx;
            top: 50%;
            height: 60rpx;
            line-height: 60rpx;
            background: linear-gradient(to right, #fce3c5, #fcc590);
            color: #31364a;
            font-weight: bold;
            width: 150rpx;
            text-align: center;
            font-size: $title-size-m;
            border-radius: 30rpx;
        }
    }

    // 订单信息
    .order-box {
        margin: $margin;
        background: white;
        border-radius: $radius;
        display: flex;
        justify-content: space-between;

        &-item {
            width: 25%;
            padding: $padding $padding/2;
            text-align: center;

            .icon {
                width: 48rpx;
                height: 48rpx;
                vertical-align: top;
            }

            .title {
                font-size: $title-size-sm;
                margin-top: $margin/3;
            }
        }
    }

    // 健康数据
    .health-flex {
        display: flex;
        margin: $margin ($margin - 10);

        &-item {
            margin: 0 10rpx;
            background: white;
            width: calc(50% - 20rpx);
            border-radius: $radius;
            padding: $padding;
            box-sizing: border-box;

            .title {
                font-size: $title-size-lg;

                .icon {
                    width: 32rpx;
                    height: 32rpx;
                    vertical-align: middle;
                    margin-left: 10rpx;
                    margin-bottom: 2rpx;
                }
            }

            .num {
                font-weight: bold;
                font-size: $title-size + 10;
                padding: $padding/3 0;

                text {
                    font-size: 70%;
                    padding-left: 10rpx;
                }
            }

            .hith {
                font-size: $title-size-sm;
                color: $text-gray;
            }
        }
    }

    // 模块
    .btns-box {
        background: white;
        margin: $margin;
        border-radius: $radius;

        &-item {
            position: relative;
            line-height: 90rpx;
            padding: $padding * 0.6 $padding;
            font-size: $title-size-lg;

            &::after {
                position: absolute;
                height: 1rpx;
                content: ' ';
                left: $margin;
                right: $margin;
                bottom: 0;
                background-color: #f9f9f9;
            }

            &:last-child::after {
                display: none;
            }

            .forward {
                position: absolute;
                right: $margin;
            }

            .icon {
                width: 44rpx;
                height: 44rpx;
                vertical-align: middle;
                margin-right: $margin/2;
                margin-bottom: 8rpx;
            }
        }
    }
</style>
