const user = {
    template: /*language=HTML*/ `
        <div class="user-wrapper">
            <div class="user-container">
                <div class="user-info-section">
                    <div class="user-details">
                        <div class="user-name">${@auth.getPrincipalProperty('username')}</div>
                        <div class="user-meta">
                            <div class="meta-item">
                                <span class="meta-label">工号：</span>
                                <span class="meta-value">${@auth.getPrincipalProperty('loginname')}</span>
                            </div>
                            <div class="meta-item">
                                <span class="meta-label">单位：</span>
                                <span class="meta-value">
                                  <!--#if(!isEmpty(@auth.getPrincipalProperty('unit'))){#-->
                                        ${@auth.getPrincipalProperty('unit').getName()}
                                    <!--#}#-->
                             </span>
                            </div>
                            <div class="meta-item">
                                <span class="meta-label">分工会：</span>
                                <span class="meta-value">
                                  <!--#if(!isEmpty(@auth.getPrincipalProperty('union'))){#-->
                                    ${@auth.getPrincipalProperty('union').getName()}
                                    <!--#}#-->
                             </span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="stats-section">
                    <div class="stats-grid">
                        <div class="stat-item pending" @click="handleStatClick('todo')">
                            <div class="stat-icon">
                                <i class="fa fa-clock-o"></i>
                            </div>
                            <div class="stat-content">
                                <div class="stat-label">待办</div>
                                <div class="stat-number">{{ stats.todoCount }}</div>
                            </div>
                        </div>

                        <div class="stat-item completed" @click="handleStatClick('done')">
                            <div class="stat-icon">
                                <i class="fa fa-check-circle"></i>
                            </div>
                            <div class="stat-content">
                                <div class="stat-label">已办</div>
                                <div class="stat-number">{{ stats.doneCount }}</div>
                            </div>
                        </div>

                        <div class="stat-item messages" @click="handleStatClick('notification')">
                            <div class="stat-icon">
                                <i class="fa fa-bell"></i>
                            </div>
                            <div class="stat-content">
                                <div class="stat-label">消息</div>
                                <div class="stat-number">{{ stats.notifications }}</div>
                            </div>
                        </div>

                        <div class="stat-item reminders" @click="handleStatClick('started')">
                            <div class="stat-icon">
                                <i class="fa fa-file-text"></i>
                            </div>
                            <div class="stat-content">
                                <div class="stat-label">发起</div>
                                <div class="stat-number">{{ stats.startedCount }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `,
    data() {
        return {
            stats: {
                todoCount: 0,
                doneCount: 0,
                notifications: 0,
                startedCount: 0
            }
        }
    },
    methods: {
        handleStatClick(type) {
            if (['todo', 'done', 'started'].includes(type)) {
                window.open('/flow/todoCenter?status=' + type)
            } else if (type === 'notification') {
                window.open('/platform/v4/msg')
            }
        },
        loadStats() {
            this.$axios.post("/flow/todoCenter/statistics").then(res => {
                if (res.code === 0) {
                    this.stats = res.data;
                }
            })
        }
    },
    mounted() {
        this.loadStats();
    },
    style: /*language=CSS*/ `
        .user-wrapper {
            width: 100%;
            background-image: url(https://www.ncu.edu.cn/images/bbg1.jpg);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .user-container {
            width: 80%;
            max-width: 80%;
            margin: 0 auto;
            padding: 20px;
            display: flex;
            gap: 30px;
            overflow: hidden;
        }

        .user-info-section {
            display: flex;
            align-items: center;
            min-width: 0;
            width: 390px;
            background-image: url(https://cdgh.ncu.edu.cn/images/index_bg2.png);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            padding: 12px;
        }

        .user-details {
            flex: 1;
            min-width: 0;
        }

        .user-name {
            font-size: 20px;
            font-weight: 600;
            color: #1a1a1a;
            margin-bottom: 12px;
        }

        .user-meta {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .meta-item {
            display: flex;
            align-items: center;
            font-size: 14px;
        }

        .meta-label {
            color: #666;
            min-width: 60px;
            flex-shrink: 0;
        }

        .meta-value {
            color: #333;
            font-weight: 500;
        }

        /* 右侧统计区域 */
        .stats-section {
            flex: 1;
            min-width: 0;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 32px;
            height: 100%;
        }

        .stat-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            padding: 16px;
            position: relative;
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYEAAAB4CAYAAAAUs05BAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANrSURBVHgB7dzNapNZAMfh0zbNYGgosYql4wiCFEEZXLiYG3DrdryPuQbvpXMB7t24m4UOCiKuEtCKsaVNiTRaXhshLvyoSd/Yzf95oORA827PLycn5yxsdZ/crKql+6WG1uLy0d3Lm29Pes+jfm+1N9w/VwD4qXtXbmyf9P/Hu29Wng/6K6WOqnq6WACI1ZgM1pqt0Z31qztlBoMPh0sPXr+8OMsztzsbe9fanfcFgG9sdZ+tz/L+6+0LB7c6lw5meWZ7OGg+7HfPj8dWAgDBRAAgmAgABBMBgGAiABBMBACCiQBAsIV5nBiehXMCAD826zmBWpwYBsi2UFXV5vHrP6WGycnhae4QAuD0JncGneak8He8sBIACCYCAMEa//b+bx5vDJ/dRgQAtY2/EprDVdJ9KwGAYLWukgbgbI03g+tuCLtKGoDPRAAgmAgABBMBgGAiABBMBACCiQBAMBEACCYCAMFEACCYCAAEEwGAYCIAEEwEAIKJAEAwEQAIJgIAwUQAIJgIAAQTAYBgIgAQTAQAgokAQDARAAgmAgDBRAAgmAgABBMBgGAiABBMBACCiQBAMBEACCYCAMFEACCYCAAEEwGAYCIAEEwEAIKJAEAwEQAIJgIAwUQAIJgIAAQTAYBgIgAQTAQAgokAQDARAAgmAgDBRAAgmAgABBMBgGAiABBMBACCiQBAMBEACCYCAMFEACCYCAAEEwGAYCIAEEwEAIKJAEAwEQAIJgIAwUQAIJgIAAQTAYBgIgAQTAQAgokAQDARAAgmAgDBRAAgmAgABBMBgGAiABBMBACCiQBAMBEACCYCAMFEACCYCAAEEwGAYCIAEKwxGbwbDZtb3WfrpYbW4vLR3cubbwsAv8Tj3Tcrzwf9lTInVgIAwRp///Hn6Ph1u9Qw+HC49OD1y4sFgDNxvX3h4Fbn0kGpZ8dKACCYCAAEW9jqPrlZVUv3yymtNVujv9Y29qb9Ouh2Z2PvWrvzvgDwjWl+oLM/OlwefBw1fm+1682lVfXUSgAg2JefiI4/0d9Zv7oz7YPbw0HzYb97fjxuL/92dO/KjRM3lx/1e6u94f65AsBPnTSnTubfWeftr58fj60EAIKJAEAwEQAIJgIAwUQAIJgIAAQTAYBgc71Kehr/7b5aHf8VAGqZx7xtJQAQ7BOP4saDQA2PwQAAAABJRU5ErkJggg==) no-repeat;
            background-size: 100% 100%;
        }

        .stat-item:hover {
            transform: translateY(-2px);
        }

        .stat-icon {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            font-size: 16px;
            color: #999;
        }

        .stat-icon i {
            font-size: 32px;
            color: var(--color-primary-3);
        }

        .stat-content {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .stat-label {
            font-size: 16px;
            color: #333;
            font-weight: 700;
            line-height: 1;
            text-align: center;
            padding: 15px 0;
        }

        .stat-number {
            font-size: 32px;
            font-weight: 700;
            color: var(--color-primary);
            line-height: 1;
            flex: 1;
            text-align: center;
        }

    `
}