<template>
    <view class="reception-page">
        <!-- 顶部导航栏 -->
        <view class="nav-header">
            <view class="nav-back-btn" @tap="onBack">
                <text class="back-text">返回</text>
            </view>
            <text class="nav-title">接诊中心</text>
            <view class="nav-placeholder"></view>
        </view>

        <!-- Tab 切换 -->
        <!-- <view class="tab-header">
            <view
                class="tab-item"
                :class="{ 'tab-active': currentTab === 'list' }"
                @tap="switchTab('list')"
            >
                <text class="tab-text" :class="{ 'tab-text-active': currentTab === 'list' }">接诊列表</text>
                <view v-if="currentTab === 'list'" class="tab-underline"></view>
            </view>
            <view
                class="tab-item"
                :class="{ 'tab-active': currentTab === 'query' }"
                @tap="switchTab('query')"
            >
                <text class="tab-text" :class="{ 'tab-text-active': currentTab === 'query' }">挂号查询</text>
                <view v-if="currentTab === 'query'" class="tab-underline"></view>
            </view>
        </view> -->

        <!-- 日期筛选区 -->
        <view class="filter-section">
            <view class="date-range-box">
                <picker mode="date" :value="dateFrom" @change="onDateFromChange" class="date-input">
                    <view class="date-input-inner">
                        <text class="date-value">{{ dateFrom }}</text>
                        <text class="calendar-icon">📅</text>
                    </view>
                </picker>
                <text class="date-separator">至</text>
                <picker mode="date" :value="dateTo" @change="onDateToChange" class="date-input">
                    <view class="date-input-inner">
                        <text class="date-value">{{ dateTo }}</text>
                        <text class="calendar-icon">📅</text>
                    </view>
                </picker>
                <view class="search-btn" @tap="loadReceptionData">
                    <text class="search-btn-text">查 询</text>
                </view>
            </view>
        </view>

        <!-- 状态标签栏 -->
        <view class="status-tabs">
            <view
                class="status-tab"
                :class="{ 'status-tab-active': activeStatus === item.code }"
                v-for="(item, index) in statusTabs"
                :key="index"
                @tap="selectStatus(item.code)"
            >
                <text class="status-tab-text" :class="{ 'status-tab-text-active': activeStatus === item.code }">{{ item.label }}</text>
            </view>
        </view>

        <!-- 患者列表 -->
        <scroll-view class="patient-scroll" scroll-y>
            <view class="patient-list">
                <view v-if="patientData.length < 1" style="text-align: center;padding-top: 50px;">
                    暂无数据
                </view>
                <view class="patient-card" v-for="(item, index) in patientData" :key="index">
                    <!-- 患者信息头部 -->
                    <view class="card-header">
                        <view class="avatar-circle">
                            <text class="avatar-letter">{{ item.avatar }}</text>
                        </view>
                        <text class="patient-name">{{ item.name }}</text>
                        <text class="status-badge" v-if="item.status">{{ item.status }}</text>
                    </view>

                    <!-- 患者详情 -->
                    <view class="card-body">
                        <text class="detail-line">{{ item.sex }} · {{ item.age }} · {{ item.patExtNo }} · {{ item.dept }} · {{ item.doctor }}</text>
                        <view class="detail-line">挂号时间：{{ item.time }}</view>
                    </view>

                    <!-- 操作按钮区 -->
                    <view class="card-footer">
                        <view class="color-blocks">
                            <!-- <view class="color-block block-pink"></view>
                            <view class="color-block block-orange"></view> -->
                        </view>
                        <view class="action-btn" @tap="goHistory(item)">
                            <text class="action-btn-text">查看历程</text>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import { $http } from '../../../config/https.js';

export default {
    data() {
        return {
            currentTab: 'list',
            dateFrom: '',
            dateTo: '',
            loading: false,
            activeStatus: 'all',
            statusTabs: [
                { code: 'all', label: '全部' },
                // { code: '115', label: '预挂号' },
                { code: '111', label: '挂号' },
                // { code: '116', label: '取消预挂号' },
                { code: 'C', label: '取消' }
            ],
            patientData: [],
            allPatientData: [],
        };
    },
    onLoad() {
        // 默认查询日期范围为当天
        const today = this.formatDate(new Date());
        this.dateFrom = today;
        this.dateTo = today;
        this.loadReceptionData();
    },
    methods: {
        // 格式化日期为 YYYY-MM-DD
        formatDate(date) {
            const y = date.getFullYear();
            const m = String(date.getMonth() + 1).padStart(2, '0');
            const d = String(date.getDate()).padStart(2, '0');
            return `${y}-${m}-${d}`;
        },
        onBack() {
            uni.navigateBack({
                delta: 1,
                fail: () => {
                    uni.switchTab({ url: '/pages/tabBar/home/home' });
                }
            });
        },
        switchTab(tab) {
            this.currentTab = tab;
        },
        goHistory(item) {
            uni.navigateTo({
                url: `/pages/staticPages/patientHistory/patientHistory?admID=${encodeURIComponent(item.admID)}`
            });
        },
        selectStatus(code) {
            this.activeStatus = code;
            this.applyStatusFilter();
        },
        applyStatusFilter() {
            const code = this.activeStatus;
            if (!code || code === 'all') {
                this.patientData = this.allPatientData;
            } else {
                this.patientData = this.allPatientData.filter(
                    (item) => item.category === code
                );
            }
        },
        onDateFromChange(e) {
            const val = e.detail.value;
            if (val > this.dateTo) {
                uni.showToast({ title: '开始日期不能晚于结束日期', icon: 'none' });
                return;
            }
            this.dateFrom = val;
            this.loadReceptionData();
        },
        onDateToChange(e) {
            const val = e.detail.value;
            if (val < this.dateFrom) {
                uni.showToast({ title: '结束日期不能早于开始日期', icon: 'none' });
                return;
            }
            this.dateTo = val;
            this.loadReceptionData();
        },
        loadReceptionData() {
            const that = this;
            if (that.loading) return;
            that.loading = true;
            const data = {
                params: [{
                    startDate: that.dateFrom,
                    endDate: that.dateTo
                }]
            };
            $http.post('urlDeault', this, {
                code: '12100047',
                data: data,
                success: function (res) {
                    that.loading = false;
                    if (res.errorCode != '0') {
                        return;
                    }
                    const result = res.result || {};
                    // 兼容 result 为数组或对象两种返回形式
                    const list = Array.isArray(result) ? result : (result.list || result.data || []);
                    if (!Array.isArray(list) || list.length === 0) {
                        that.allPatientData = [];
                        that.patientData = [];
                        return;
                    }
                    const mapped = list.map((item) => {
                        const statusCode = item.StatusCode || '';
                        return {
                            ...item,
                            avatar: (item.Name || '').substring(0, 1) || '?',
                            name: item.Name || '',
                            sex: item.Gender || '',
                            age: item.AdmAge || '',
                            dept: item.Loc || '',
                            doctor: item.Doctor || '',
                            admID: item.admID || '',
                            status: item.Status || '',
                            statusCode: statusCode,
                            category: statusCode,
                            time: [item.CreateDate, item.CreateTime].filter(Boolean).join(' ')
                        };
                    });
                    that.allPatientData = mapped;
                    that.applyStatusFilter();
                },
                fail: function () {
                    that.loading = false;
                }
            });
        }
    }
};
</script>

<style scoped>
.reception-page {
    min-height: 100vh;
    background-color: #f5f6f8;
    display: flex;
    flex-direction: column;
}

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

.nav-back-btn {
    padding: 8rpx 16rpx;
    border-radius: 24rpx;
}

.back-text {
    font-size: 26rpx;
    color: #ffffff;
}

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

.nav-placeholder {
    width: 80rpx;
}

/* Tab 切换 */
.tab-header {
    background: #ffffff;
    display: flex;
    flex-direction: row;
    justify-content: center;
    border-bottom: 1rpx solid #eef0f3;
}

.tab-item {
    padding: 24rpx 48rpx;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tab-text {
    font-size: 30rpx;
    color: #666666;
}

.tab-text-active {
    color: #2B84FF;
    font-weight: 600;
}

.tab-underline {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 64rpx;
    height: 5rpx;
    background: #2B84FF;
    border-radius: 3rpx;
}

/* 日期筛选 */
.filter-section {
    background: #ffffff;
    padding: 20rpx 24rpx;
    border-bottom: 1rpx solid #f0f2f5;
}

.date-range-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12rpx;
}

.date-input {
    flex: 1;
    height: 68rpx;
    box-sizing: border-box;
}

.date-input-inner {
    width: 100%;
    height: 68rpx;
    background: #f7f9fc;
    border-radius: 12rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 16rpx;
    box-sizing: border-box;
}

.date-value {
    font-size: 26rpx;
    color: #1f2329;
}

.calendar-icon {
    font-size: 28rpx;
}

.date-separator {
    font-size: 26rpx;
    color: #8b98a8;
    flex-shrink: 0;
}

.search-btn {
    width: 120rpx;
    height: 68rpx;
    background: #2B84FF;
    border-radius: 12rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.search-btn-text {
    font-size: 26rpx;
    color: #ffffff;
    font-weight: 500;
}

/* 状态标签 */
.status-tabs {
    background: #ffffff;
    padding: 16rpx 20rpx 20rpx;
    display: flex;
    flex-direction: row;
    gap: 16rpx;
    overflow-x: auto;
    white-space: nowrap;
}

.status-tab {
    padding: 12rpx 28rpx;
    border-radius: 28rpx;
    background: #f4f6fa;
    flex-shrink: 0;
}

.status-tab-active {
    background: #2B84FF;
}

.status-tab-text {
    font-size: 26rpx;
    color: #4a5160;
}

.status-tab-text-active {
    color: #ffffff;
    font-weight: 500;
}

/* 患者列表滚动区 */
.patient-scroll {
    flex: 1;
    padding: 20rpx 24rpx;
    box-sizing: border-box;
    height: calc(100vh - 480rpx);
}

.patient-list {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    padding-bottom: 40rpx;
}

.patient-card {
    background: #ffffff;
    border-radius: 16rpx;
    padding: 24rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
}

.card-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 16rpx;
}

.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: 18rpx;
}

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

.patient-name {
    font-size: 32rpx;
    font-weight: 600;
    color: #1f2329;
}

.status-badge {
    margin-left: auto;
    padding: 4rpx 16rpx;
    background: #fef0f0;
    color: #e34d59;
    border-radius: 20rpx;
    font-size: 22rpx;
}

.card-body {
    margin-bottom: 18rpx;
    padding-bottom: 18rpx;
    border-bottom: 1rpx solid #f0f2f5;
}

.detail-line {
    font-size: 26rpx;
    color: #8b98a8;
    line-height: 40rpx;
}

.card-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.color-blocks {
    display: flex;
    flex-direction: row;
    gap: 12rpx;
}

.color-block {
    width: 80rpx;
    height: 56rpx;
    border-radius: 8rpx;
}

.block-pink {
    background: linear-gradient(135deg, #ffd6e7 0%, #ffb3d0 100%);
}

.block-orange {
    background: linear-gradient(135deg, #ffe4bc 0%, #ffc999 100%);
}

.action-btn {
    padding: 12rpx 32rpx;
    background: #eaf4ff;
    border-radius: 28rpx;
}

.action-btn-text {
    font-size: 26rpx;
    color: #2B84FF;
    font-weight: 500;
}
</style>
