const stats = {
    template: /*language=HTML*/ `
        <div class="stats-section">
            <div class="stats-family">
                <img src="/assets/platform/img/home/family.png"/>
            </div>
            <div class="stats-grid">
                <!-- 待办 -->
                <div
                        class="stat-item pending"
                        @click="handleStatClick('todo')"
                >
                    <div class="stat-content">
                        <div class="stat-label">待办</div>
                        <div class="stat-number">{{ stats.todoCount }}</div>
                    </div>
                    <div class="stat-icon">
                        <i class="fa fa-clock-o"></i>
                    </div>
                </div>

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

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

                <!-- 发起 -->
                <div
                        class="stat-item reminders"
                        @click="handleStatClick('started')"
                >
                    <div class="stat-content">
                        <div class="stat-label">发起</div>
                        <div class="stat-number">{{ stats.startedCount }}</div>
                    </div>
                    <div class="stat-icon">
                        <i class="fa fa-file-text"></i>
                    </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*/ `
        /* 右侧统计区域 */
        .stats-section {
            /*background: white;*/
            color: #333;
            padding: 20px;
            border-radius: 12px;
            z-index: 10;
            width: 80%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 20px auto 0;
            /*border: 1px solid #e8e8e8;*/
        }

        /* 子内容临时屏蔽时，同步收起统计容器，避免首页 banner 下方出现空白 */
        .stats-section {
            display: none;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
            width: 32%;
            min-width: 360px;
            margin-left: auto;
        }

        /* 临时屏蔽首页右上角“待办、已办、消息、发起”统计卡片，保留原模板便于恢复 */
        .stats-grid {
            display: none;
        }

        .stat-item {
            background: rgba(255, 255, 255, 0.4);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: #1f2937;
            padding: 20px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            cursor: pointer;
            transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
            width: 100%;
            height: 90px;
        }

        .stat-item:hover {
            background: rgba(255, 255, 255, 0.62);
            border-color: rgba(255, 255, 255, 0.55);
            transform: translateY(-5px);
            box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18);
        }

        .stat-icon {
            font-size: 26px;
            width: 44px;
            height: 44px;
            background: rgba(255, 255, 255, 0.42);
            color: rgba(31, 41, 55, 0.72);
            border: 1px solid rgba(255, 255, 255, 0.35);
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .stat-item.pending .stat-icon,
        .stat-item.completed .stat-icon,
        .stat-item.messages .stat-icon,
        .stat-item.reminders .stat-icon {
            background: rgba(255, 255, 255, 0.42);
        }

        .stat-item.pending .stat-icon {
            color: #2563eb;
        }

        .stat-item.completed .stat-icon {
            color: #16a34a;
        }

        .stat-item.messages .stat-icon {
            color: #d97706;
        }

        .stat-item.reminders .stat-icon {
            color: #0891b2;
        }

        .stat-content {
            display: flex;
            flex-direction: column;
            margin-left: 0;
            min-width: 0;
            text-align: left;
        }

        .stat-label {
            font-size: 14px;
            color: rgba(31, 41, 55, 0.78);
            text-transform: uppercase;
            letter-spacing: 1px;
            line-height: 1.2;
        }

        .stat-number {
            font-size: 28px;
            font-weight: 700;
            color: #111827;
            margin-top: 6px;
            line-height: 1;
        }

        .stats-family {
            width: 68%;
        }

        .stats-family img {
            height: 190px !important;
            border-radius: 30px;
        }

        /* 临时屏蔽“欢迎来到职工之家”图片，保留原节点便于恢复 */
        .stats-family {
            display: none;
        }
    `
};