<template>
    <ion-page>
        <ion-content class="mine" :fullscreen="true">
            <img class="userInfo-bg" src="../assets/userBg.png" alt="" />
            <div class="userInfo" v-if="user" @click="goSetting">
                <van-image width="60" height="60" radius="4" :src="user.avatar"></van-image>
                <span class="name">
                    <div>{{ user.nickname }}</div>
                    <div class="id">ID: {{ user.id }}</div>
                </span>
                <img src="../assets/icon_bianji.png" class="icon" alt="" />
            </div>
            <div class="userInfo" v-else @click="goLogin">
                <van-image width="60" height="60" radius="4" :src="defaultAvatar"></van-image>
                <span class="name">未登录</span>
                <img src="../assets/icon_bianji.png" class="icon" alt="" />
            </div>

            <div class="order-card">
                <div class="card-left">
                    <div class="card-top">
                        <span class="text1">我的订单</span>
                        <span class="text2" @click="$router.push({ name: 'order' })">全部</span>
                        <img src="../assets/icon_inter.png" alt="" />
                    </div>
                    <van-grid class="card-content" :border="false" :column-num="3">
                        <van-grid-item
                            text="待支付"
                            @click="$router.push({ name: 'order', query: { status: 'NOT_PAID' } })"
                        >
                            <template #icon>
                                <img class="grid-icon" src="../assets/info_icon_daizhidfu.png" alt="" />
                            </template>
                        </van-grid-item>

                        <van-grid-item
                            text="待委托"
                            @click="$router.push({ name: 'order', query: { status: 'CONFIRMED' } })"
                        >
                            <template #icon>
                                <img class="grid-icon" src="../assets/info_icon_daiweituo.png" alt="" />
                            </template>
                        </van-grid-item>

                        <van-grid-item
                            text="委托中"
                            @click="$router.push({ name: 'order', query: { status: 'SELLING' } })"
                        >
                            <template #icon>
                                <img class="grid-icon" src="../assets/info_icon_weituozhong.png" alt="" />
                            </template>
                        </van-grid-item>
                    </van-grid>
                </div>
                <div class="card-right">
                    <div class="card-top">
                        <span class="text1" @click="$router.push({ name: 'wallet' })">我的钱包</span>
                    </div>
                    <van-grid class="card-content" :border="false" :column-num="1">
                        <van-grid-item :text="balanceText" @click="$router.push({ name: 'wallet' })">
                            <template #icon>
                                <img class="grid-icon" src="../assets/info_icon_qianbao.png" alt="" />
                            </template>
                        </van-grid-item>
                    </van-grid>
                </div>
            </div>

            <van-cell-group class="menu" :border="false">
                <van-cell title="我的收益" value="有新的收益" is-link :to="{ name: 'distribution' }">
                    <template #icon>
                        <img class="menu-icon" src="../assets/info_icon_shoyi.png" alt="" />
                    </template>
                    <template #right-icon>
                        <img src="../assets/icon_inter.png" alt="" class="right-icon" />
                    </template>
                </van-cell>

                <van-cell title="我的银行卡" value="未绑定" is-link>
                    <template #icon>
                        <img class="menu-icon" src="../assets/info_icon_ka.png" alt="" />
                    </template>
                    <template #right-icon>
                        <img src="../assets/icon_inter.png" alt="" class="right-icon" />
                    </template>
                </van-cell>
            </van-cell-group>

            <van-cell-group class="menu" :border="false">
                <van-cell title="收货地址" is-link @click="wait">
                    <template #icon>
                        <img class="menu-icon" src="../assets/info_icon_dizhi.png" alt="" />
                    </template>
                    <template #right-icon>
                        <img src="../assets/icon_inter.png" alt="" class="right-icon" />
                    </template>
                </van-cell>

                <van-cell title="设置" is-link :to="{ name: 'setting' }">
                    <template #icon>
                        <img class="menu-icon" src="../assets/info_icon_shezhi.png" alt="" />
                    </template>
                    <template #right-icon>
                        <img src="../assets/icon_inter.png" alt="" class="right-icon" />
                    </template>
                </van-cell>
            </van-cell-group>
        </ion-content>
    </ion-page>
</template>

<script setup>
import { computed } from 'vue'
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'
import defaultAvatar from '@/assets/png_moren.png'
import { ref, watch } from 'vue'
import { http } from '@/plugins/http'

const userStore = useUserStore()
const user = computed(() => {
    return userStore.user
})

const router = useRouter()
const goLogin = () => {
    router.push({ name: 'login' })
}

const goSetting = () => {
    router.push({ name: 'setting' })
}
const balance = ref({})
function getBalance() {
    http.get('/user/balance').then(res => {
        balance.value = res
    })
}
watch(user, val => {
    if (val) {
        getBalance()
    } else {
        balance.value = {}
    }
})
getBalance()
const balanceText = computed(() => {
    if (balance.value) {
        if (balance.value.balance > 1000000) {
            return (balance.value.balance / 1000000).toFixed(1).replace(/\.0$/, '') + 'M'
        } else if (balance.value.balance > 10000) {
            return (balance.value.balance / 10000).toFixed(1).replace(/\.0$/, '') + 'K'
        }
    }
    return 'N/A'
})
</script>

<style lang="less" scoped>
.mine {
    --ion-background-color: var(--ion-color-step-0);
}
.userInfo-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    display: block;
    z-index: 0;
}
.userInfo {
    position: relative;
    z-index: 1;
    padding: 46px 16px 36px;
    .f();
    .icon {
        width: 24px;
        height: 24px;
    }

    .name {
        font-size: 20px;
        font-weight: bold;
        color: var(--ion-color-step-0);
        line-height: 28px;
        flex-grow: 1;
        margin: 0 12px;
        .id {
            font-size: 13px;
            color: rgba(var(--ion-color-dark-contrast-rgb), 0.5);
        }
    }
}

.order-card {
    background: var(--ion-color-step-0);
    box-shadow: 0px 4px 8px 0px rgba(var(--ion-color-light-contrast-rgb), 0.04);
    border-radius: 4px;
    position: relative;
    z-index: 1;
    margin: 0 16px;
    padding: 12px;
    .f();
    .card-left {
        width: 75%;
    }

    .card-top {
        .f();
        .text1 {
            font-size: 14px;
            font-weight: bold;
            color: var(--ion-color-light-contrast);
            line-height: 24px;
            flex-grow: 1;
        }
        .text2 {
            font-size: 12px;
            color: #c8c9cc;
            line-height: 24px;
        }

        img {
            width: 24px;
            height: 24px;
        }
    }

    .card-content {
        margin-top: 8px;
        --van-grid-item-content-background: var(--ion-color-step-0);
        border-radius: 4px;
        overflow: hidden;
    }

    .grid-icon {
        width: 28px;
        height: 28px;
        display: block;
    }

    :deep(.van-grid) {
        --van-grid-item-text-color: #686868;
        --van-grid-item-content-padding: 9px 8px;

        .van-grid-item__text {
            line-height: 17px;
            margin-top: 4px;
        }
    }

    .card-right {
        width: 25%;
        margin-left: 12px;
        .card-top {
            .text1 {
                text-align: center;
            }
        }
        .card-content {
            --van-grid-item-content-background: #f8faff;
        }

        :deep(.van-grid) {
            --van-grid-item-text-color: var(--ion-color-light-contrast);
            --van-grid-item-text-font-size: 15px;
            .van-grid-item__text {
                font-weight: bold;
            }
        }
    }
}

.order-card + .menu {
    margin-top: 14px;
}

:deep(.menu) {
    --van-cell-line-height: 28px;
    --van-cell-text-color: var(--ion-color-light-contrast);
    --van-cell-font-size: 14px;
    --van-cell-vertical-padding: 16px;
    --van-cell-horizontal-padding: 30px;

    .menu-icon {
        width: 28px;
        height: 28px;
        display: block;
        margin-right: 12px;
    }
    .van-cell {
        .f();
    }

    .van-cell__value {
        font-size: 12px;
    }
}

.right-icon {
    width: 24px;
    height: 24px;
}
.menu + .menu {
    border-top: 10px solid #f2f4f5;
}
</style>
