<!--
 * @Author: PoJun
 * @Date: 2023-05-15 19:59:55
 * @LastEditors: XuanJi
 * @LastEditTime: 2024-05-24 12:37:03
 * @Message: Nothing
-->
<template>
    <view class="index">
        <view v-if="vuex_userInfo && vuex_userInfo.attr.BusinessRole">
            <view class="index-banner">
                <uv-image :src="BannerImg" height="300px" width="100%">
                    <template v-slot:loading>
                        <uv-loading-icon></uv-loading-icon>
                    </template>
                </uv-image>
            </view>
            <!-- 管理员角色 -->
            <view class="content" v-if="vuex_userInfo.attr.BusinessRole == 'orgMember'">
                <!-- 排名 -->
                <view class="content-container">
                    <supplier-list></supplier-list>
                </view>
                <!-- 统计图 -->
                <view class="content-container">
                    <home-chart :times="times" :showChart="showChart"></home-chart>
                </view>
            </view>
            <!-- 供应商角色 -->
            <view class="content" v-else-if="vuex_userInfo.attr.BusinessRole == 'supplier'">
                <view class="boxContent">
                    <uv-grid col="2">
                        <uv-grid-item>
                            <uv-tags
                                :text="score ? score : '无'"
                                plain
                                shape="circle"
                                type="error"
                                size="mini"
                                class="score"
                            ></uv-tags>
                            <text class="grid-text">评分</text>
                        </uv-grid-item>
                        <uv-grid-item @click="toAppeal">
                            <uv-icon name="file-text" :size="30"></uv-icon>
                            <text class="grid-text">申诉</text>
                        </uv-grid-item>
                    </uv-grid>
                </view>
                <view></view>
                <!-- 合作记录 -->
                <view class="content-container">
                    <records-list></records-list>
                </view>
                <!-- 产品目录 -->
                <view class="content-container">
                    <products-list :times="times"></products-list>
                </view>
            </view>
        </view>
        <!-- 未登录和未认证角色 -->
        <no-auth v-else :title="!vuex_userInfo ? '没有检测到您的登录状态' : '角色认证尚未完成'">
            <uv-button
                v-if="!vuex_userInfo || vuex_userInfo.attr.auditState != 1"
                :text="!vuex_userInfo ? '去登录' : '去认证'"
                @click="toLogin"
                size="small"
                :hairline="false"
                plain
                throttleTime="100"
                shape="circle"
            ></uv-button>
        </no-auth>
    </view>
</template>

<script>
import { checkAppUpdate } from "@/utils/utils.js";
import supplierList from "./components/supplier-list.vue";
import homeChart from "./components/home-chart.vue";
import recordsList from "./components/records-list.vue";
import productsList from "./components/products-list.vue";
import NoAuth from "@/components/no-auth/index.vue";

import BannerImg from "@/static/banner.png";
import { getMySupplierInfo } from "@/config/http.js";
export default {
    components: {
        supplierList,
        homeChart,
        recordsList,
        productsList,
        NoAuth,
    },
    data() {
        return {
            BannerImg,
            times: 0, //图形的渲染有时候会出问题.
            showChart: false,
            score: 0,
        };
    },

    onShow() {
        this.loadData();
        if (this.vuex_userInfo) {
            this.showChart = true;
            this.times++;
        } else {
            this.showChart = false;
        }
        console.log("show");
    },
    methods: {
        toLogin() {
            if (!this.vuex_userInfo) {
                uni.$uv.route("/pages/login/index");
            } else {
                uni.$uv.route("/subpkg/setting/authentication");
            }
        },
        toAppeal() {
            uni.$uv.route("/subpkg/home/representations");
        },
        methodToTrigger() {
            // console.log("登录成功后触发");
            this.showChart = false;
        },
        async loadData() {
            if (this.vuex_userInfo) {
                this.showChart = true;
                if (this.vuex_userInfo.attr.BusinessRole == "supplier") {
                    const res = await getMySupplierInfo();
                    this.score = res.mark;
                }
            } else {
                this.showChart = false;
            }
            uni.$on("triggerMethod", this.methodToTrigger);
        },
    },
    onLoad() {
        checkAppUpdate();
        console.log("首页onload");
    },
    onUnload() {
        console.log("首页unload");
        uni.$off("triggerMethod", this.methodToTrigger);
    },
};
</script>

<style lang="scss">
page {
    background-color: $uni-bg-color-grey;
}
.index {
    .banner {
        height: 300px;
        min-height: 300px;
    }
    .content {
        padding: 24rpx;
        transform: translateY(-40px);
        /* 增加个边距吧具体放下来 */
        margin-bottom: -50px;
        &-container {
            background-color: #fff;
            border-radius: 14rpx;
            margin-top: 24rpx;
            overflow: hidden;
            margin-bottom: 24rpx;
        }
    }
    .boxContent {
        padding: 36rpx 0;
        border-radius: 14rpx;
        background: #fff;
        overflow: hidden;
        .score {
            margin: 8rpx 0;
        }
        .grid-text {
            font-size: 26rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
        }
    }
}
</style>
