<template>
    <view class="app">
        <view
            class="user-center-card__header__transparent"
            v-if="isLogin"
            :style="{width: isLogin ? '100%' : '70%'}"
        >
            <view class="user-center-card__header__avatar">
                <nut-avatar size="large">
                    <img
                        src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
                    />
                </nut-avatar>
            </view>
            <view class="user-center-card__header__info">
                <view class="user-center-card__header__info__name">小明</view>
                <view class="user-center-card__header__info__desc"
                    >ID:{{ 1 }}</view
                >
            </view>
            <view class="rightIcon">
                <Setting @click="toSetting" size="22" />
            </view>
        </view>
        <view v-else class="user-center-card__header__transparent">
            <view class="user-center-card__header__avatar">
                <nut-avatar size="large">
                    <img
                        src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
                    />
                </nut-avatar>
            </view>
            <view class="user-center-card__header__info">
                <view
                    class="user-center-card__header__info__name"
                    @tap="clickLogin"
                    >点击立即授权</view
                >
            </view>
        </view>
        <view class="container">
            <!--我的订单-->
            <view class="cell-card">
                <view class="top">
                    <view>我的订单</view>
                    <view class="sub" @click="toOrderList(0)">
                        <view>全部订单</view>
                        <ArrowRight />
                    </view>
                </view>
                <view class="center">
                    <view class="center-t" @click="toOrderList(1)">
                        <Order size="25px" />
                        <view class="center-text">待付款</view>
                    </view>
                    <view class="center-t" @click="toOrderList(2)">
                        <Clock size="25px" />
                        <view class="center-text">待使用</view>
                    </view>
                    <view class="center-t" @click="toOrderList(3)">
                        <Shop size="25px" />
                        <view class="center-text">已使用</view>
                    </view>
                    <view class="center-t" @click="toOrderList(4)">
                        <Del size="25px" />
                        <view class="center-text">已失效</view>
                    </view>
                </view>
            </view>

            <!--  我的服务  -->
            <view class="user-center">
                <view>我的服务</view>
                <view class="box">
                    <view
                        class="box-mini"
                        v-for="item in userMenuList"
                        :key="item.id"
                    >
                        <!-- <image :src="item.icon" /> -->
                        <IconFont size="40" :name="item.icon"></IconFont>
                        <view class="label">{{ item.label }}</view>
                    </view>
                </view>
            </view>

            <!--  商家管理  -->
            <view class="mer-box">
                <nut-grid :gutter="10" :border="false">
                    <nut-grid-item
                        :border="false"
                        text="订单核销"
                        @click="toPage('/pages/admin/verify/index')"
                    >
                        <IconFont
                            size="50"
                            name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
                        ></IconFont>
                    </nut-grid-item>
                    <nut-grid-item text="订单统计">
                        <IconFont
                            size="50"
                            name="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
                        ></IconFont>
                    </nut-grid-item>
                </nut-grid>
            </view>
        </view>
        <!-- 登录 -->
        <Auth :visible="isShowLogin" @update:visible="cancelLogin" />
    </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import {
    ArrowRight,
    Order,
    Del,
    Clock,
    Shop,
    Setting,
    IconFont,
} from "@nutui/icons-vue-taro";
import Taro from "@tarojs/taro";
import Auth from "../../components/Auth.vue";

const isShowLogin = ref(false);

const isLogin = ref(false);

// const userInfo = ref({});

Taro.useLoad(() => {
    const token = Taro.getStorageSync("token");
    if (token) {
        isLogin.value = true;
    }
});

const cancelLogin = () => {
    isShowLogin.value = false;
};

const toOrderList = (e: number) => {
    Taro.navigateTo({
        url: `/pages/users/order_list/index?type=${e}`,
    });
};

const userMenuList = ref([
    {
        id: 1,
        label: "我的账户",
        url: "/pages/users/account/index",
        icon: "http://jdt168.com/uploads/default/20220829/e819815623276fdbb9a54d685292e5c7.png",
    },
    // {
    //     id: 2,
    //     label: "商家入驻",
    //     url: "/pages/users/account/index",
    //     icon: "http://jdt168.com/uploads/default/20220829/583fd6cbd729b24eab9c3cae20ae694d.png",
    // },
    {
        id: 3,
        label: "分销中心",
        url: "/pages/users/account/index",
        icon: "http://jdt168.com/uploads/default/20220829/73656833c1d849c050638f9ee9903b9d.png",
    },
    {
        id: 4,
        label: "关注商家",
        url: "/pages/users/account/index",
        icon: "http://jdt168.com/uploads/default/20220829/13637589cd20785aa21fca1d4f9b26bc.png",
    },
    {
        id: 5,
        label: "问题反馈",
        url: "/pages/users/account/index",
        icon: "http://jdt168.com/uploads/default/20220829/7437d90fdd0fba868084bd9cd0b59049.png",
    },
]);

const toSetting = () => {
    Taro.navigateTo({
        url: "/pages/users/setting/index",
    });
};

const clickLogin = () => {
    isShowLogin.value = true;
};

const toPage = (url: string) => {
    Taro.navigateTo({
        url: url,
    });
};
</script>

<style lang="scss">
.app {
    box-sizing: border-box;
    background-color: #f5f5f5;
    height: 100vh;
    background-image: url("https://cdn-we-retail.ym.tencent.com/miniapp/template/user-center-bg-v1.png");
    background-size: auto 40%;
    background-repeat: no-repeat;
    position: relative;
    color: var(--nut-grid-item-text-color, var(--nut-title-color2, #666666));
}

.user-center-card__header__transparent {
    position: absolute;
    left: 30px;
    top: 200px;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    text-align: left;

    .user-center-card__header__info {
        margin-left: 20px;
        width: 400px;
        color: #333;
        font-weight: bolder;
    }

    .rightIcon {
        height: 100px;
        margin: auto;
    }
}

.container {
    position: absolute;
    top: 350px;
    width: 710px;
}

.cell-card {
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 20px;
    margin: 20px;
    padding: 30px;
    width: 710px;

    .top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .sub {
            display: flex;
            color: #c9c9c9;
            align-items: center;
        }
    }

    .center {
        display: flex;
        justify-content: space-between;
        color: #666;
        padding: 0 30px;

        .center-t {
            margin-top: 30px;
            display: flex;
            flex-direction: column;
            align-items: center;

            .center-text {
                margin-top: 20px;
            }
        }
    }
}

.user-center {
    background-color: #fff;
    border-radius: 20px;
    margin: 20px;
    padding: 30px;
    width: 710px;
    box-sizing: border-box;

    .box {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;

        .box-mini {
            display: flex;
            box-sizing: border-box;
            flex-direction: column;
            align-items: center;
            width: 150px;
            margin-bottom: 20px;
            margin-right: 13px;

            .label {
                font-size: 25px;
                margin-top: 10px;
                color: #333;
            }

            image {
                width: 80px;
                height: 80px;
            }
        }
    }
}

.mer-box {
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 20px;
    margin: 20px;
    //padding: 30px;
    width: 710px;
}
</style>
