<template>
        <view class="graphic-page">
        <nav-bar :navbarData="navbarData"></nav-bar>
        <view class="main" :style="'margin-top: ' + (height * 2 + 80) + 'rpx; height: calc(100vh - ' + (height * 2 + 80) + 'rpx)'">
            <view class="view-query" v-if="!showSearch">
                <view class="view-query-date">
                    <view
                        :data-code="item.code"
                        @tap="changeQueryDate"
                        :class="'view-query-dateBtn ' + (item.code == queryDateCode ? 'view-query-dateBtn-clicked' : '')"
                        :style="'width: ' + item.width"
                        v-for="(item, index) in queryDateRang"
                        :key="index"
                        hover-class="view-query-dateBtn-hover"
                        hover-stay-time="80"
                    >
                        <view class="buttontext">{{ item.desc }}</view>
                        <view v-if="item.code == 'dayRang'" class="dateBtn-arrow"></view>
                    </view>
                </view>
                <!-- 自定义日期范围弹层（H5 兼容：使用 picker-view 列模式，不依赖 mode=date 的 <picker>） -->
                <view v-if="calendarShow" class="dateRange-mask" @tap="onCalendarClose">
                    <view class="dateRange-panel" @tap.stop="">
                        <view class="dateRange-title">选择起止日期</view>

                        <view class="dateRange-row" @tap="openWheel('from')">
                            <view class="dateRange-label">开始日期</view>
                            <view class="dateRange-value">{{ dateFromStr || '请选择' }}</view>
                        </view>
                        <view class="dateRange-row" @tap="openWheel('to')">
                            <view class="dateRange-label">结束日期</view>
                            <view class="dateRange-value">{{ dateToStr || '请选择' }}</view>
                        </view>

                        <view class="dateRange-actions">
                            <view class="dateRange-btn dateRange-btn-cancel" @tap="onCalendarClose">取消</view>
                            <view class="dateRange-btn dateRange-btn-confirm" @tap="onDateRangeConfirm">确定</view>
                        </view>
                    </view>
                </view>

                <!-- 滚轮列弹层（picker-view，H5 可靠） -->
                <view v-if="calendarShow && activePicker" class="dateRange-wheel-mask" @tap="onWheelClose">
                    <view class="dateRange-wheel" @tap.stop="">
                        <view class="dateRange-wheel-bar">
                            <view class="dateRange-wheel-cancel" @tap="onWheelClose">取消</view>
                            <view class="dateRange-wheel-title">{{ activePicker === 'from' ? '选择开始日期' : '选择结束日期' }}</view>
                            <view class="dateRange-wheel-confirm" @tap="onWheelConfirm">完成</view>
                        </view>
                        <picker-view
                            class="dateRange-wheel-view"
                            :value="wheelIndex"
                            @change="onWheelChange"
                            :indicator-style="wheelIndicatorStyle"
                        >
                            <picker-view-column>
                                <view class="dateRange-wheel-item" v-for="(y, i) in wheelYears" :key="'y' + i">{{ y }}年</view>
                            </picker-view-column>
                            <picker-view-column>
                                <view class="dateRange-wheel-item" v-for="(m, i) in wheelMonths" :key="'m' + i">{{ m }}月</view>
                            </picker-view-column>
                            <picker-view-column>
                                <view class="dateRange-wheel-item" v-for="(d, i) in wheelDays" :key="'d' + i">{{ d }}日</view>
                            </picker-view-column>
                        </picker-view>
                    </view>
                </view>

                <view class="view-query-search" @tap="searchFun" hover-class="view-query-search-hover" hover-stay-time="80">
                    <i class="iconfont icon-sousuo view-query-search-icon"></i>
                </view>
            </view>

            <view class="page__bd" v-else>
                <view class="searchBar">
                    <i class="iconfont icon-sousuo searchBar-icon"></i>
                    <input
                        class="searchBar-input"
                        type="text"
                        placeholder="输入病人姓名查找"
                        :value="patName"
                        :focus="true"
                        confirm-type="search"
                        @input="selectPatient"
                        @confirm="onSearchConfirm"
                    />
                    <view class="searchBar-cancel" @tap="searchCancel">取消</view>
                </view>
            </view>

            <view class="head">
                <scroll-view class="tab-h" :scroll-left="scrollLeft">
                    <view
                        :class="'tab-item ' + (currentTab == index ? 'active' : '')"
                        :data-current="index"
                        :data-code="item.statusCode"
                        @tap="currentTabFun"
                        v-for="(item, index) in navTab"
                        :key="index"
                    >
                        <text>{{ item.descripts }}</text>
                    </view>
                </scroll-view>
            </view>
            <view class="body" v-if="dataList.length > 0">
                <view class="card" v-for="(item, index) in dataList" :key="index">
                    <view class="personInfo">
                        <view class="admInfo">
                            <text class="admStatus">{{ item.status }}</text>
                            <text class="status" v-if="item.statusCode == 'A'">{{ item.receiveDate }} {{ item.receiveTime }}</text>
                            <text class="status" v-if="item.statusCode == 'F'">{{ item.finishDate }} {{ item.finishTime }}</text>
                            <text class="status" v-if="item.statusCode == 'R'">距离取消：{{ item.countdown }}</text>
                        </view>
                        <view class="patient-content">
                            <view class="userIcon">
                                <image v-if="item.patImage" :src="getFullImageUrl(item.patImage)" class="patImage"></image>
                                <text v-else class="patImageFallback">{{ getAvatarText(item.patName) }}</text>
                            </view>
                            <view class="info-col">
                                <view class="info-row">
                                    <text class="person patName">{{ item.patName }}</text>
                                    <text class="person patNo">{{ item.patNo }}</text>
                                    <image class="sex person" :src="item.patSexDesc == '男' ? male : female"></image>
                                    <text class="person age">{{ item.patAge }}</text>
                                </view>
                                <view class="info-row">
                                    <view class="detail">时间:{{ item.admDate }} {{ item.admTime }}</view>
                                </view>
                            </view>
                        </view>
                    </view>

                    <view class="personDesc">
                        {{ item.symptom }}
                    </view>

                    <view class="row buttonArr">
                        <view class="startview" v-if="item.statusCode == 'R'">
                            <button data-btncode="S" :data-index="index" class="button noStart" @tap.stop.prevent="lookPatient">
                                <text class="buttonDesc">开始接诊</text>
                            </button>
                        </view>
                        <view class="startview" v-if="item.statusCode == 'F'">
                            <button data-btncode="Z" :data-index="index" class="button lookDateil" @tap.stop.prevent="lookPatient">
                                <text class="buttonDesc">咨询记录</text>
                            </button>
                        </view>
                        <view class="startview" v-if="item.statusCode == 'R'">
                            <button data-btncode="R" :data-index="index" class="button refuseButton1" @tap.stop.prevent="lookPatient">
                                <text class="buttonDesc">拒绝接诊</text>
                            </button>
                        </view>

                        <view class="startview" v-if="item.statusCode == 'A'">
                            <button :disabled="btnState" data-btncode="AR" :data-index="index" class="button refuseButton1" @tap.stop.prevent="lookPatient">
                                <text class="buttonDesc" style="color: red">取消接诊</text>
                            </button>
                        </view>
                        <view class="startview" v-if="item.statusCode == 'A'">
                            <button data-btncode="C" :data-index="index" class="button noStart" @tap.stop.prevent="lookPatient">
                                <text class="buttonDesc">继续接诊</text>
                            </button>
                        </view>
                        <view class="startview">
                            <button data-btncode="D" :data-index="index" class="button lookDateil" @tap.stop.prevent="lookPatient">
                                <text class="buttonDesc">查看详情</text>
                            </button>
                        </view>
                    </view>
                </view>
            </view>

            <view v-else>
                <image src="https://chis.e24health.com/images/icon/doctor/none.png" class="none"></image>
                <view style="text-align: center; color: #999999">暂无患者</view>
            </view>

            <view v-if="showRefusal">
                <refusal @colseRefuse="colseRefuse" :showRefusal="showRefusal" @selectData="onShow"></refusal>
            </view>
        </view>
    </view>
</template>

<script>
import Cache from '../../../../utils/cache';
import refusal from '../refusal/refusal';
import patAdmRecord from '../../../components/patAdmRecord/patAdmRecord';
import navBar from '@/pages/components/navbar/index';
import { $http } from '../../../../config/https.js';
import { httpconfig } from '../../../../config/httpconfig';
import Dialog from '../../../../utils/dialog';
const nowDate = new Date();
const app = getApp();
export default {
    components: {
        refusal,
        patAdmRecord,
        navBar
    },
    data() {
        return {
            imgDomain: httpconfig.imgDomain,
            btnState: false,
            male: httpconfig.imgDomain + '/images/icon/doctor/male.png',
            female: httpconfig.imgDomain + '/images/icon/doctor/female.png',
            navTab: [],
            currentTab: 1,
            dataList: [],
            sendList: [],
            statusCode: 'R',
            showRefusal: false,
            showSearch: false,
            patName: '',
            patientData: Cache.get('patientData'),
            userData: Cache.get('userData'),

            queryDateRang: [
                {
                    id: 0,
                    code: 'currentDay',
                    desc: '今日',
                    width: '20%'
                },
                {
                    id: 1,
                    code: 'threeDay',
                    desc: '3天',
                    width: '20%'
                },
                {
                    id: 2,
                    code: 'sevenDay',
                    desc: '7天',
                    width: '20%'
                },
                {
                    id: 3,
                    code: 'dayRang',
                    desc: '自定义',
                    width: 'auto'
                }
            ],

            queryDateCode: 'threeDay',
            calendarShow: false,
            minCalendarDate: new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate() - 30).getTime(),
            maxCalendarDate: new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate()).getTime(),
            dateFrom: '',
            dateTo: '',
            dateFromStr: '',
            dateToStr: '',
            dateFromStartStr: '',
            dateFromEndStr: '',

            // 滚轮列（picker-view）相关
            activePicker: '', // '' | 'from' | 'to'
            wheelYears: [],
            wheelMonths: [],
            wheelDays: [],
            wheelIndex: [0, 0, 0],
            wheelIndicatorStyle: 'height: 80rpx; line-height: 80rpx;',

            navbarData: {
                isGoBack: true,
                background: '',
                title: '图文咨询',
                //导航栏 中间的标题
                bottom: false,
                cleanPat: 'Y'
            },

            height: app.globalData.height,
            defaultDate: [
                new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate() - 2).getTime(),
                new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate()).getTime()
            ],
            search: '',
            scrollLeft: 0
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        this.setData(
            {
                userData: Cache.get('userData')
            },
            () => {
                this.getData();
                this.getColum();
            }
        );
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        this.getData();
        this.setData({
            userData: Cache.get('userData'),
            patientData: Cache.get('patientData')
        });
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        //this.getData()
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        /**
         * 拼接图片完整 URL
         * 后端返回的 image / patImage 可能是相对路径（如 /images/photo/xxx.png），
         * H5 端需要拼上 imgDomain 才能正确加载
         */
        getFullImageUrl: function (url) {
            if (!url) return '';
            if (/^(https?:)?\/\//i.test(url) || url.startsWith('data:')) {
                return url;
            }
            return this.imgDomain + url;
        },

        /**
         * 头像为空时显示首字作为占位
         */
        getAvatarText: function (name) {
            if (!name) return '?';
            return String(name).charAt(0);
        },

        selectResult: function (e) {
            // console.log('select result', e.detail)
        },

        selectPatient: function (e) {
            this.setData(
                {
                    patName: e.detail.value
                },
                () => {
                    this.getData();
                }
            );
        },

        searchCancel: function (e) {
            this.setData(
                {
                    patName: '',
                    showSearch: false
                },
                () => {
                    this.getData();
                }
            );
        },

        searchFun: function () {
            this.setData({
                showSearch: !this.showSearch
            });
        },

        currentTabFun: function (e) {
            if (this.currentTab == e.currentTarget.dataset.current) {
                return;
            }
            this.setData(
                {
                    currentTab: e.currentTarget.dataset.current,
                    statusCode: e.currentTarget.dataset.code
                },
                () => {
                    this.getData();
                }
            );
            this.sendList = [];
            //this.getData()
        },

        getColum: function () {
            let data = {
                params: [
                    {
                        hospID: this.userData.hospID,
                        userID: this.userData.userID,
                        locID: this.userData.locID
                    }
                ]
            };
            let that = this;
            $http.post('urlDeault', this, {
                code: '03100010',
                data: data,
                success: function (res) {
                    if (res.errorCode == '0') {
                        this.setData({
                            navTab: res.result
                        });
                    }
                }
            });
        },

        getData: function () {
            let that = this;
            var dateFrom = this.dateFrom;
            var dateTo = this.dateTo;
            if (dateFrom != '' && dateTo != '') {
                dateFrom = `${dateFrom.getFullYear()}-${dateFrom.getMonth() + 1}-${dateFrom.getDate()}`;
                dateTo = `${dateTo.getFullYear()}-${dateTo.getMonth() + 1}-${dateTo.getDate()}`;
            }
            let data = {
                params: [
                    {
                        hospID: this.userData.hospID,
                        userID: this.userData.userID,
                        locID: this.userData.locID,
                        statusCode: that.statusCode,
                        dateFrom: dateFrom,
                        dateTo: dateTo,
                        dateRangeCode: this.queryDateCode,
                        patName: this.patName
                    }
                ]
            };
            $http.post('urlDeault', this, {
                code: '03100011',
                data: data,
                success: function (res) {
                    if (res.errorCode == '0') {
                        this.setData({
                            dataList: res.result.data
                        });
                    }
                }
            });
        },

        agree: function (e) {
            // console.log(e)
        },

        refuse: function (e) {
            // console.log(e)
        },

        lookPatient: function (e) {
            var status = e.currentTarget.dataset.status;
            var btncode = e.currentTarget.dataset.btncode;
            var index = e.currentTarget.dataset.index;
            Cache.set('patientData', this.dataList[index]);
            if (btncode == 'S') {
                if (!this.ifOnline()) {
                    return;
                }
            }
            if (btncode == 'S') {
                var admType = 'graphic';
                //this.arriveAdm()
                uni.navigateTo({
                    url: '../treatment/treatment?admtype=' + admType
                });
            }
            if (btncode == 'C') {
                var admType = 'graphic';
                uni.navigateTo({
                    url: '../treatment/treatment?admtype=' + admType
                });
            }
            if (btncode == 'Z') {
                uni.navigateTo({
                    url: '../treatmentrecord/treatmentrecord'
                });
            }
            if (btncode == 'D') {
                uni.navigateTo({
                    url: '../graphicDateil/graphicDateil'
                });
            }
            if (btncode == 'R') {
                this.setData({
                    showRefusal: true
                });
            }
            if (btncode == 'AR') {
                this.setData({
                    btnState: true
                }); //请求前禁用标记改为true,防止重复请求
                let _this = this;
                let userData = Cache.get('userData');
                let data = {
                    params: [
                        {
                            hospID: userData.hospID,
                            userID: userData.userID,
                            admID: this.dataList[index].admID
                        }
                    ]
                };
                $http.post(
                    'urlDeault',
                    this,
                    {
                        code: '03100107',
                        data: data,
                        success: function (res) {
                            if (res.errorCode == '0') {
                                this.setData({
                                    btnState: false
                                });
                                this.getData();
                            } else {
                                this.setData({
                                    btnState: false
                                });
                                Dialog.alert({
                                    title: '提示',
                                    message: res.errorMessage,
                                    context: this
                                });
                            }
                        }
                    },
                    {
                        error: 'Y'
                    }
                );
            }
        },

        colseRefuse: function () {
            this.setData({
                showRefusal: false
            });
        },

        changeQueryDate: function (e) {
            let queryDateCode = e.currentTarget.dataset.code;
            this.setData({
                queryDateCode: queryDateCode
            });
            if (queryDateCode === 'dayRang') {
                // 初始化 picker 起始/结束日期（今天 - 30天 ~ 今天）
                const fmt = (d) => {
                    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
                };
                const today = new Date();
                const start = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 30);
                this.setData({
                    calendarShow: true,
                    activePicker: '',
                    dateFromStr: this.dateFrom ? fmt(this.dateFrom) : '',
                    dateToStr: this.dateTo ? fmt(this.dateTo) : '',
                    dateFromStartStr: fmt(start),
                    dateFromEndStr: fmt(today)
                });
            } else {
                //清空日期范围
                this.setData({
                    dateFrom: '',
                    dateTo: '',
                    dateFromStr: '',
                    dateToStr: ''
                });
                this.getData();
            }
        },

        /**
         * 关闭日历
         */
        onCalendarClose: function () {
            this.setData({
                calendarShow: false,
                activePicker: ''
            });
        },

        /**
         * 打开"开始/结束"日期对应的滚轮
         */
        onPickerRowTap: function (type) {
            this.openWheel(type);
        },

        /**
         * 滚轮打开
         */
        openWheel: function (type) {
            const fmt = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
            const today = new Date();
            // 限制在 [dateFromStartStr, dateFromEndStr] 范围
            const min = this.dateFromStartStr ? new Date(this.dateFromStartStr) : new Date(today.getFullYear() - 5, 0, 1);
            const max = this.dateFromEndStr ? new Date(this.dateFromEndStr) : today;

            const years = [];
            for (let y = min.getFullYear(); y <= max.getFullYear(); y++) years.push(y);
            const months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

            // 当前选中的字符串
            const curStr = type === 'from' ? this.dateFromStr : this.dateToStr;
            let cur = curStr ? new Date(curStr) : today;
            if (cur < min) cur = min;
            if (cur > max) cur = max;

            // 当前年/月下该显示哪些"日"
            const daysInMonth = new Date(cur.getFullYear(), cur.getMonth() + 1, 0).getDate();
            const days = [];
            for (let d = 1; d <= daysInMonth; d++) days.push(d);

            const yearIdx = years.indexOf(cur.getFullYear());
            const monthIdx = cur.getMonth();
            const dayIdx = cur.getDate() - 1;

            this.setData({
                activePicker: type,
                wheelYears: years,
                wheelMonths: months,
                wheelDays: days,
                wheelIndex: [Math.max(0, yearIdx), monthIdx, Math.max(0, dayIdx)]
            });
        },

        /**
         * 滚轮值变化
         */
        onWheelChange: function (e) {
            const val = e.detail.value;
            const [yIdx, mIdx, dIdx] = val;
            const year = this.wheelYears[yIdx] || this.wheelYears[0];
            const month = this.wheelMonths[mIdx] || 1;
            // 月份变了，校正日
            const daysInMonth = new Date(year, month, 0).getDate();
            let days = this.wheelDays;
            if (days.length !== daysInMonth) {
                days = [];
                for (let d = 1; d <= daysInMonth; d++) days.push(d);
            }
            let dayIdx = dIdx;
            if (dayIdx > days.length - 1) dayIdx = days.length - 1;
            this.setData({
                wheelDays: days,
                wheelIndex: [yIdx, mIdx, dayIdx]
            });
        },

        /**
         * 滚轮确认
         */
        onWheelConfirm: function () {
            const [yIdx, mIdx, dIdx] = this.wheelIndex;
            const year = this.wheelYears[yIdx];
            const month = this.wheelMonths[mIdx];
            const day = this.wheelDays[dIdx];
            if (!year || !month || !day) {
                this.setData({ activePicker: '' });
                return;
            }
            const pad = (n) => String(n).padStart(2, '0');
            const str = `${year}-${pad(month)}-${pad(day)}`;

            if (this.activePicker === 'from') {
                if (this.dateToStr && str > this.dateToStr) {
                    Dialog.alert({ title: '提示', message: '开始日期不能晚于结束日期', context: this });
                    return;
                }
                this.setData({ dateFromStr: str, activePicker: '' });
            } else if (this.activePicker === 'to') {
                if (this.dateFromStr && str < this.dateFromStr) {
                    Dialog.alert({ title: '提示', message: '结束日期不能早于开始日期', context: this });
                    return;
                }
                this.setData({ dateToStr: str, activePicker: '' });
            } else {
                this.setData({ activePicker: '' });
            }
        },

        /**
         * 关闭滚轮
         */
        onWheelClose: function () {
            this.setData({ activePicker: '' });
        },

        /**
         * 确认自定义日期范围
         */
        onDateRangeConfirm: function () {
            if (!this.dateFromStr || !this.dateToStr) {
                Dialog.alert({ title: '提示', message: '请选择完整的开始和结束日期', context: this });
                return;
            }
            const parse = (str) => {
                const parts = str.split('-');
                return new Date(+parts[0], +parts[1] - 1, +parts[2]);
            };
            this.setData({
                calendarShow: false,
                activePicker: '',
                dateFrom: parse(this.dateFromStr),
                dateTo: parse(this.dateToStr)
            });
            this.getData();
        },

        /**
         * 选中日历（保留旧方法以兼容）
         */
        onCalendarConfirm: function (e) {
            this.setData({
                calendarShow: false,
                dateFrom: e.detail[0],
                dateTo: e.detail[1]
            });
            this.getData();
        },

        ifOnline: function () {
            let TIMInfo = Cache.get('TIMInfo');
            let { navbarData } = this;
            if (TIMInfo.loginStatus == 'N') {
                navbarData.overlayVisible = true;
                navbarData.message = '您处于离线状态，请先登录';
                navbarData.login = true;
                this.setData({
                    navbarData
                });
                return false;
            } else {
                return true;
            }
        },

        onShow() {
            console.log('占位：函数 onShow 未声明');
        }
    }
};
</script>
<style>
@import '../../../../assets/css/iconfont.css';
</style>
<style scoped>
page {
    background: #f4f6fa;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.graphic-page {
    width: 100%;
    min-height: 100vh;
    background: #f4f6fa;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.main {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: #f4f6fa;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0 24rpx 24rpx;
}

.view-query {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: auto;
    padding: 16rpx 0 10rpx;
}

.view-query-date {
    flex: 1;
    min-width: 0;
    margin: 0;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 8rpx;
    box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4rpx;
}

.view-query-dateBtn {
    flex: 1 1 0;
    min-width: 0;
    height: 64rpx;
    padding: 0 6rpx;
    border-radius: 12rpx;
    background: transparent;
    font-size: 28rpx;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #4a5160;
    line-height: 64rpx;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
}

.view-query-dateBtn-hover {
    background: #f4f7fb;
    opacity: 1;
}

.view-query-dateBtn:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 16rpx;
    bottom: 16rpx;
    width: 1rpx;
    background: #eef0f3;
}

.view-query-dateBtn-clicked {
    background: #eaf4ff;
    color: #1687ff;
    font-weight: 600;
}

.view-query-dateBtn-clicked::after {
    display: none;
}

.buttontext {
    line-height: 64rpx;
    height: 64rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dateBtn-arrow {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 8rpx;
    border-left: 8rpx solid transparent;
    border-right: 8rpx solid transparent;
    border-top: 8rpx solid currentColor;
    opacity: 0.6;
    flex-shrink: 0;
}

.view-query-search {
    flex: 0 0 76rpx;
    width: 76rpx;
    height: 76rpx;
    margin: 0 0 0 12rpx;
    padding: 0;
    border-radius: 18rpx;
    background-color: #ffffff;
    box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.view-query-search-hover {
    background-color: #f2f5fa;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
}

.view-query-search-icon {
    font-size: 36rpx !important;
    line-height: 1;
    color: #5f6b7a;
    display: inline-block;
}

.page__bd {
    flex-shrink: 0;
    padding: 16rpx 0 10rpx;
}

.searchBar {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 76rpx;
    width: 100%;
    padding: 0 20rpx;
    background: #ffffff;
    border-radius: 18rpx;
    box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
}

.searchBar-icon {
    flex: 0 0 auto;
    font-size: 36rpx !important;
    line-height: 1;
    color: #5f6b7a;
    margin-right: 16rpx;
    display: inline-block;
}

.searchBar-input {
    flex: 1;
    min-width: 0;
    height: 76rpx;
    line-height: 76rpx;
    font-size: 28rpx;
    color: #1f2329;
    background: transparent;
    border: 0;
    padding: 0;
    box-sizing: border-box;
    /* 兼容 H5：去掉默认外观 */
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.searchBar-input::placeholder {
    color: #b6bcc7;
    font-size: 28rpx;
}

.searchBar-cancel {
    flex: 0 0 auto;
    margin-left: 20rpx;
    padding: 0 8rpx;
    height: 76rpx;
    line-height: 76rpx;
    font-size: 28rpx;
    color: #4a5160;
    white-space: nowrap;
}

.head {
    flex-shrink: 0;
    height: auto;
    margin-bottom: 14rpx;
}

.tab-h {
    height: 88rpx;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
    line-height: 88rpx;
    font-size: 28rpx;
    white-space: nowrap;
    background: #ffffff;
    border-radius: 16rpx;
    box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.04);
}

.tab-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 136rpx;
    height: 88rpx;
    margin: 0;
    padding: 0 16rpx;
    box-sizing: border-box;
    position: relative;
    color: #4a5160;
}

.tab-item.active {
    font-size: 30rpx;
    font-family: Microsoft YaHei;
    font-weight: 600;
    color: #1687ff;
    border-bottom: 0;
    height: 88rpx;
}

.tab-item.active::after {
    content: '';
    position: absolute;
    left: 34rpx;
    right: 34rpx;
    bottom: 0;
    height: 4rpx;
    border-radius: 4rpx;
    background: #1687ff;
}

.body {
    flex: 1;
    min-height: 0;
    width: 100%;
    margin-top: 0;
    overflow-y: auto;
    padding-bottom: 12rpx;
    box-sizing: border-box;
}

.card {
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    position: relative;
    margin: 0 0 20rpx;
    color: #4a5160;
    border: 0;
    border-radius: 18rpx;
    overflow: hidden;
    box-shadow: 0 8rpx 24rpx rgba(15, 23, 42, 0.06);
}

.detail {
    font-size: 26rpx;
    color: #8b98a8;
    line-height: 40rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status {
    margin-top: 0;
    text-align: right;
    float: none;
    font-size: 26rpx;
    color: #8b98a8;
    white-space: nowrap;
    flex-shrink: 0;
}

.button {
    height: 60rpx;
    width: auto;
    min-width: 140rpx;
    border-radius: 30rpx;
    line-height: 58rpx;
    font-size: 26rpx;
    padding: 0 24rpx;
    margin: 0;
    box-sizing: border-box;
    font-family: Microsoft YaHei;
}

.noStart {
    background-color: #1687ff;
    border: 1rpx solid #1687ff;
    color: #ffffff;
}

.buttonDesc {
    width: auto;
    margin-left: 0 !important;
    padding: 0 !important;
    font-size: 26rpx;
    line-height: 58rpx;
}

.lookDateil {
    background-color: #ffffff;
    border: 1rpx solid #1687ff;
    color: #1687ff;
}

.personInfo {
    color: #1f2329;
    font-size: 30rpx;
    margin: 0;
}

.patient-content {
    padding: 18rpx 24rpx 20rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20rpx;
    box-sizing: border-box;
}

.info-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.info-row {
    min-height: 40rpx;
    line-height: 40rpx;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.info-row + .info-row {
    margin-top: 8rpx;
}

.personDesc {
    min-height: 60rpx;
    width: auto;
    color: #3f4a5a;
    font-size: 28rpx;
    padding: 16rpx 20rpx;
    margin: 0 24rpx 16rpx;
    background: #f7f9fc;
    border-radius: 12rpx;
    box-sizing: border-box;
    line-height: 40rpx;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
}

.buttonArr {
    width: 100%;
    margin: 0;
    min-height: 96rpx;
    height: auto;
    border-top: 1rpx solid #edf1f6;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    padding: 14rpx 20rpx;
    box-sizing: border-box;
    gap: 12rpx;
}

.startview {
    width: auto;
    height: auto;
    margin: 0;
    text-align: right;
    display: flex;
    float: none;
}

.userIcon {
    flex: 0 0 88rpx;
    width: 88rpx;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admStatus {
    font-size: 28rpx;
    font-weight: 600;
    color: #1f2329;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admInfo {
    padding: 18rpx 24rpx;
    border-bottom: 1rpx solid #edf1f6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16rpx;
    box-sizing: border-box;
}

.age {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44rpx;
    max-width: 100rpx;
    background: #eaf4ff;
    color: #1687ff;
    font-size: 22rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 32rpx;
    height: 32rpx;
    padding: 0 8rpx;
    border-radius: 4rpx;
    text-align: center;
    box-sizing: border-box;
    flex-shrink: 0;
}

.sex {
    height: 32rpx;
    width: 32rpx;
    padding-top: 0;
    flex-shrink: 0;
    margin-right: 8rpx;
}

.person {
    float: none;
    color: #1f2329;
    font-size: 30rpx;
    line-height: 40rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.patName {
    font-size: 32rpx;
    font-weight: 600;
    max-width: 200rpx;
}

.patNo {
    color: #8b98a8;
    font-size: 26rpx;
    margin-left: 12rpx;
    max-width: 200rpx;
    font-weight: 400;
}

.refuseButton1 {
    background-color: #ffffff;
    border: 1rpx solid #f56c6c;
    color: #f56c6c;
}

button:after {
    border-radius: 0;
    border: 0;
}

.weui-icon {
    margin-top: 10rpx;
}

.none {
    height: 264rpx;
    width: 300rpx;
    display: block;
    margin: 190rpx auto 10rpx;
}

/* ========== 自定义日期范围弹层 ========== */
.dateRange-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dateRange-panel {
    width: 600rpx;
    max-width: 90vw;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 32rpx 32rpx 24rpx;
    box-sizing: border-box;
    box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    /* 防止 view 默认垂直排列影响 picker 行 */
    flex-wrap: nowrap;
}

.dateRange-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #1f2329;
    text-align: center;
    line-height: 44rpx;
    margin-bottom: 24rpx;
}

.dateRange-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 80rpx;
    line-height: 80rpx;
    padding: 0 20rpx;
    margin-bottom: 16rpx;
    background: #f7f9fc;
    border-radius: 12rpx;
    box-sizing: border-box;
    font-size: 28rpx;
}

.dateRange-label {
    flex: 0 0 auto;
    color: #4a5160;
    font-size: 28rpx;
    white-space: nowrap;
    margin-right: 16rpx;
}

.dateRange-picker {
    flex: 1;
    min-width: 0;
    text-align: right;
    color: #1f2329;
    font-size: 28rpx;
    /* picker 内部需要正常横向排列 */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

.dateRange-value {
    color: #1f2329;
    font-size: 28rpx;
    line-height: 80rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.dateRange-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 16rpx;
    gap: 20rpx;
}

.dateRange-btn {
    flex: 1;
    height: 72rpx;
    line-height: 72rpx;
    text-align: center;
    border-radius: 36rpx;
    font-size: 28rpx;
    box-sizing: border-box;
    border: 1rpx solid transparent;
}

.dateRange-btn-cancel {
    background: #f4f6fa;
    color: #4a5160;
    border-color: #e5e9f0;
}

.dateRange-btn-confirm {
    background: #1687ff;
    color: #ffffff;
    border-color: #1687ff;
}

/* ========== picker-view 滚轮弹层 ========== */
.dateRange-wheel-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.dateRange-wheel {
    width: 100%;
    background: #ffffff;
    border-top-left-radius: 24rpx;
    border-top-right-radius: 24rpx;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dateRange-wheel-bar {
    height: 88rpx;
    line-height: 88rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 24rpx;
    border-bottom: 1rpx solid #edf1f6;
    background: #fafbfc;
    font-size: 28rpx;
}

.dateRange-wheel-title {
    flex: 1;
    text-align: center;
    color: #1f2329;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dateRange-wheel-cancel {
    flex: 0 0 auto;
    color: #8b98a8;
    padding: 0 8rpx;
}

.dateRange-wheel-confirm {
    flex: 0 0 auto;
    color: #1687ff;
    font-weight: 600;
    padding: 0 8rpx;
}

.dateRange-wheel-view {
    width: 100%;
    height: 480rpx;
    background: #ffffff;
}

.dateRange-wheel-item {
    line-height: 80rpx;
    height: 80rpx;
    text-align: center;
    font-size: 30rpx;
    color: #1f2329;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.patImage {
    width: 80rpx;
    height: 80rpx;
    padding: 0;
    border-radius: 50%;
    background: #eef2f7;
    display: block;
}

.userIcon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.patImageFallback {
    width: 80rpx;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 50%;
    background: #5cadff;
    color: #ffffff;
    font-size: 32rpx;
    font-weight: 500;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
