<template>
    <view class="workbench-page">
        <!-- 顶部导航栏 -->
        <view class="nav-header">
            <view class="nav-title">工作台</view>
        </view>

        <view class="page-content">
            <!-- 累计数据区域 -->
            <view class="section-block">
                <view class="section-title">
                    <view class="title-bar"></view>
                    <text class="title-text">累计数据</text>
                </view>
                <view class="stat-cards-row">
                    <view class="stat-card-blue">
                        <text class="stat-number">{{ totalPatient }}</text>
                        <text class="stat-label">累计接诊患者</text>
                    </view>
                    <view class="stat-card-blue">
                        <text class="stat-number">{{ totalAmount }}</text>
                        <text class="stat-label">累计收费金额</text>
                    </view>
                </view>
            </view>

            <!-- 今日概览区域 -->
            <view class="section-block">
                <view class="section-title">
                    <view class="title-bar"></view>
                    <text class="title-text">今日概览</text>
                </view>
                <view class="today-cards-row">
                    <view class="today-card" v-for="(item, index) in todayStat" :key="index">
                        <text class="today-number">{{ item.number }}</text>
                        <text class="today-label">{{ item.label }}</text>
                    </view>
                </view>
            </view>

            <!-- 快捷入口区域 -->
            <view class="section-block">
                <view class="section-title">
                    <view class="title-bar"></view>
                    <text class="title-text">快捷入口</text>
                </view>
                <view class="quick-entry-row">
                    <view class="quick-item" v-for="(item, index) in quickList" :key="index" @tap="onQuickTap(item)">
                        <view class="quick-icon-wrap">
                            <text class="quick-icon">{{ item.icon }}</text>
                        </view>
                        <text class="quick-text">{{ item.name }}</text>
                    </view>
                </view>
            </view>

            <!-- 最近患者区域 -->
            <view class="section-block" v-if="patientList.length > 0 ">
                <view class="section-title">
                    <view class="title-bar"></view>
                    <text class="title-text">最近患者</text>
                </view>
                <view class="sub-section-title">
                    <text class="sub-title-text">今日接诊记录</text>
                </view>
                <view class="patient-list">
                    <view class="patient-item" v-for="(patient, index) in patientList" :key="index"  @tap="goHistory(patient)">
                        <view class="avatar-circle">
                            <text class="avatar-text">{{ patient.avatar }}</text>
                        </view>
                        <view class="patient-info">
                            <text class="patient-name">{{ patient.name }}</text>
                            <view class="status-tag" :class="'tag-' + patient.statusType">
                                <text class="status-tag-text">{{ patient.statusText }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { $http } from '../../../config/https.js';
export default {
    data() {
        return {
            quickList: [
                { icon: '💬', name: '在线客服', path: '/pages/staticPages/workbench/messageList' },
                { icon: '📋', name: '挂号查询', path: '/pages/staticPages/receptionCenter/receptionCenter' },
                { icon: '💰', name: '费用管理', path: '/pages/staticPages/workbench/refundReview' }
            ],
            // 累计数据（兜底默认值）
            totalPatient: '0',
            totalAmount: '0',
            // 今日概览（兜底默认值）
            todayStat: [
                { number: '0', label: '今日挂号' },
                { number: '0', label: '今日接诊' },
                { number: '0', label: '待接诊' },
                { number: '0', label: '退费申请' }
            ],
            // 最近患者（兜底默认值）
            patientList: []
        };
    },
    onLoad() {
        this.loadWorkbenchData();
    },
    methods: {
        goHistory(item) {
            uni.navigateTo({
                url: `/pages/staticPages/patientHistory/patientHistory?admID=${encodeURIComponent(item.admID)}`
            });
        },
        loadWorkbenchData() {
            const that = this;
            const data = { params: [{}] };
            $http.post('urlDeault', this, {
                code: '12100046',
                data: data,
                success: function (res) {
                    if (res.errorCode != '0') {
                        return;
                    }
                    const result = res.result || {};
                    // 兼容 result 为数组或对象两种返回形式
                    const info = Array.isArray(result) ? (result[0] || {}) : result;

                    // 累计数据
                    if (info.totalAdmCount !== undefined && info.totalAdmCount !== '') that.totalPatient = info.totalAdmCount;
                    if (info.totalPatAmt !== undefined && info.totalPatAmt !== '') that.totalAmount = info.totalPatAmt;

                    // 今日概览
                    that.todayStat = [
                        { number: info.todayAdmCount !== undefined ? info.todayAdmCount : 0, label: '今日挂号' },
                        { number: info.todayReceive !== undefined ? info.todayReceive : 0, label: '今日接诊' },
                        { number: info.todayWaiting !== undefined ? info.todayWaiting : 0, label: '待接诊' },
                        { number: info.todayRefund !== undefined ? info.todayRefund : 0, label: '退费申请' }
                    ];

                    // 最近患者（接口仅返回最近一位患者姓名 todayLastPatName）
                    if (info.todayLastPatName) {
                        that.patientList = [
                            {
                                avatar: info.todayLastPatName.substring(0, 1),
                                name: info.todayLastPatName,
                                admID: info.todayLastAdmID,
                                statusText: '进行中',
                                statusType: 'active'
                            }
                        ];
                    }
                }
            });
        },
        onQuickTap(item) {
            if (item.path) {
                uni.navigateTo({ url: item.path });
            }
        }
    }
};
</script>

<style scoped>
.workbench-page {
    min-height: 100vh;
    background-color: #f5f6f8;
}

.nav-header {
    height: 88rpx;
    background: linear-gradient(135deg, #4a9fff 0%, #2B84FF 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: var(--status-bar-height, 44rpx);
}

.nav-title {
    font-size: 34rpx;
    font-weight: 600;
    color: #ffffff;
}

.page-content {
    padding: 20rpx 24rpx;
}

.section-block {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
}

.section-title {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
}

.title-bar {
    width: 6rpx;
    height: 28rpx;
    background: #2B84FF;
    border-radius: 3rpx;
    margin-right: 12rpx;
}

.title-text {
    font-size: 30rpx;
    font-weight: 600;
    color: #1f2329;
}

/* 累计数据卡片 */
.stat-cards-row {
    display: flex;
    flex-direction: row;
    gap: 20rpx;
}

.stat-card-blue {
    flex: 1;
    background: linear-gradient(135deg, #4a9fff 0%, #2B84FF 100%);
    border-radius: 16rpx;
    padding: 28rpx 24rpx;
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 48rpx;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
}

.stat-label {
    font-size: 26rpx;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 8rpx;
}

/* 今日概览 */
.today-cards-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16rpx;
}

.today-card {
    width: calc((100% - 32rpx) / 2);
    background: #f7f9fc;
    border-radius: 14rpx;
    padding: 24rpx 20rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.today-number {
    font-size: 44rpx;
    font-weight: 700;
    color: #2B84FF;
    line-height: 1.2;
}

.today-label {
    font-size: 26rpx;
    color: #8b98a8;
    margin-top: 8rpx;
}

/* 快捷入口 */
.quick-entry-row {
    display: flex;
    flex-direction: row;
    gap: 16rpx;
}

.quick-item {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180rpx;
    padding: 20rpx 8rpx;
    border: 2rpx solid #e7f0ff;
    border-radius: 16rpx;
    background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
    box-shadow: 0 6rpx 14rpx rgba(43, 132, 255, 0.08);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.quick-item:active {
    transform: scale(0.97);
    box-shadow: 0 2rpx 8rpx rgba(43, 132, 255, 0.12);
}

.quick-icon-wrap {
    width: 80rpx;
    height: 80rpx;
    background: #ffffff;
    border: 2rpx solid #dcecff;
    border-radius: 18rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14rpx;
    box-shadow: 0 4rpx 10rpx rgba(43, 132, 255, 0.1);
}

.quick-icon {
    font-size: 42rpx;
    line-height: 1;
}

.quick-text {
    width: 100%;
    font-size: 24rpx;
    color: #354052;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 最近患者 */
.sub-section-title {
    margin-bottom: 16rpx;
    padding-left: 4rpx;
}

.sub-title-text {
    font-size: 28rpx;
    font-weight: 600;
    color: #1f2329;
}

.patient-list {
    display: flex;
    flex-direction: column;
}

.patient-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 16rpx 0;
    border-bottom: 1rpx solid #f0f2f5;
}

.patient-item:last-child {
    border-bottom: none;
}

.avatar-circle {
    width: 72rpx;
    height: 72rpx;
    border-radius: 50%;
    background: linear-gradient(135deg, #6bb3ff 0%, #4a9fff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
}

.avatar-text {
    font-size: 28rpx;
    font-weight: 600;
    color: #ffffff;
}

.patient-info {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.patient-name {
    font-size: 30rpx;
    font-weight: 600;
    color: #1f2329;
    margin-right: 16rpx;
}

.status-tag {
    padding: 4rpx 16rpx;
    border-radius: 20rpx;
}

.tag-active {
    background: #e6f7e6;
}

.tag-active .status-tag-text {
    color: #52c41a;
    font-size: 22rpx;
}
</style>
