<template>
    <view>
        <nav-bar :navbarData="navbarData"></nav-bar>
        <view class="allpatient" :style="'margin-top: ' + (height * 2 + 10) + 'rpx; height: calc(100vh - ' + (height * 2 + 10) + 'rpx)'">
        <view class="view-query">
            <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 列模式） -->
            <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="swiper-tab">
                <view
                    :class="'swiper-tab-list ' + (currentTab == item.statusCode ? 'on' : '')"
                    :data-current="item.statusCode"
                    @tap="swichNav"
                    v-for="(item, index) in videoStatus"
                    :key="index"
                >
                    {{ item.descripts || item.desc || item.statusCode }}
                </view>
            </view>
            <scroll-view class="scroll-view" :scroll-y="true" @scrolltolower="scrollLower">
                <view v-if="videoAdmList.length > 0">
                    <block v-for="(item, index) in videoAdmList" :key="index">
                        <patAdmRecord :adm-record="item" @offLine="offLine" @rejectAdm="handleRejectAdm" @cancelAdm="refreshAdmList" />
                    </block>
                </view>
                <block v-else>
                    <nothingData />
                </block>
                <view v-if="showRefusal">
                    <refusal @colseRefuse="colseRefuse" :showRefusal="showRefusal" @selectData="findVedioAdmList" :admID="admID"></refusal>
                </view>
                <van-toast id="van-toast" />
            </scroll-view>
        </view>
    </view>
</template>

<script>
import Cache from '../../../../utils/cache';
import refusal from '../refusal/refusal';
import patAdmRecord from '@/pages/components/patAdmRecord/patAdmRecord';
import nothingData from '@/pages/components/nothingData/nothingData';
import navBar from '@/pages/components/navbar/index';
// pages/graphicConsult/graphicConsult.js
import { $http } from '../../../../config/https.js';
import Toast from '../../../../utils/toast';
import Dialog from '../../../../utils/dialog';
const userData = Cache.get('userData');
const nowDate = new Date();
const app = getApp();
export default {
    components: {
        refusal,
        patAdmRecord,
        nothingData,
        navBar
    },
    data() {
        return {
            winWidth: 0,
            winHeight: 0,
            msg: 'helloWorld',
            patID: '',
            userData: Cache.get('userData'),
            videoAdmList: [],
            searchPlaceholder: '输入病人姓名查找',
            inputShowed: false,
            inputVal: '',
            dateBtnSize: 'mini',

            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: 'currentDay',
            videoStatus: [],
            pageSize: 10,

            // 条数
            currentPage: 1,

            // 页数
            currentTab: '',

            dateFrom: '',
            dateTo: '',
            dateFromStr: '',
            dateToStr: '',
            dateFromStartStr: '',
            dateFromEndStr: '',
            videoAdmList: [],
            showRefusal: false,
            calendarShow: false,
            activePicker: '',
            wheelYears: [],
            wheelMonths: [],
            wheelDays: [],
            wheelIndex: [0, 0, 0],
            wheelIndicatorStyle: 'height: 80rpx; line-height: 80rpx;',

            // default-date="{{defaultDate}}",
            defaultDate: [
                new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate() - 2).getTime(),
                new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate()).getTime()
            ],

            //
            minCalendarDate: new Date(nowDate.getFullYear(), nowDate.getMonth() - 1, 1).getTime(),

            maxCalendarDate: new Date(nowDate.getFullYear(), nowDate.getMonth() + 1, 1).getTime(),
            patientData: {},
            hasMoreData: false,

            navbarData: {
                isGoBack: true,
                background: '',
                title: '全部患者',
                //导航栏 中间的标题
                bottom: false,
                cleanPat: 'Y'
            },

            height: app.globalData.height,
            search: '',
            admID: ''
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        if (options.goHome == 'Y') {
            let { navbarData } = this;
            navbarData.isGoHome = true;
            this.setData({
                navbarData
            });
        }
        this.setData({
          //  search: this.search.bind(this)
        });
        const freshUserData = Cache.get('userData');
        if (!freshUserData) {
            uni.showToast({
                title: '未获取到用户信息',
                icon: 'none'
            });
            return;
        }
        this.setData({
            userData: freshUserData
        }, () => {
            this.findVedioStatusList();
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
        var that = this;
        uni.getSystemInfo({
            success: function (res) {
                that.setData({
                    winWidth: res.windowWidth,
                    winHeight: res.windowHeight
                });
            }
        });
        uni.setNavigationBarTitle({
            title: '全部患者'
        });
    },
    /*** 生命周期函数--监听页面显示*/
    onShow: function () {
        if (this.currentTab !== '') {
            this.findVedioAdmList(false);
        }
    },
    /*** 生命周期函数--监听页面隐藏*/
    onHide: function () {},
    /*** 生命周期函数--监听页面卸载*/
    onUnload: function () {},
    /*** 页面相关事件处理函数--监听用户下拉动作*/
    onPullDownRefresh: function () {},
    /**   * 页面上拉触底事件的处理函数   */
    onReachBottom: function () {},
    /**   * 用户点击右上角分享   */
    onShareAppMessage: function () {},
    methods: {
        /**  *    * @param {*} e    */
        initData: function () {},

        /**刷新列表 */
        refreshAdmList: function () {
            console.log('refreshAdmList');
            this.findVedioAdmList(false);
        },

        /**
         * 获取表头数据
         * @param {*} e
         */
        findVedioStatusList: function () {
            const userData = this.userData || Cache.get('userData');
            if (!userData) {
                uni.showToast({
                    title: '未获取到用户信息',
                    icon: 'none'
                });
                return;
            }
            let data = {
                params: [
                    {
                        locID: userData.locID,
                        hospID: userData.hospID,
                        userID: userData.userID
                    }
                ]
            };
            $http.post('urlDeault', this, {
                code: '03100021',
                data: data,
                success: function (res) {
                    if (res.errorCode == '0') {
                        let list = res.result || [];
                        if (list.data && Array.isArray(list.data)) {
                            list = list.data;
                        }
                        if (list.length > 0) {
                            let currentTab = '';
                            list.forEach((element) => {
                                if (element['defaultFlag'] !== undefined && element['defaultFlag'] === 'Y') {
                                    currentTab = element['statusCode'];
                                }
                            });
                            if (!currentTab) {
                                currentTab = list[0].statusCode;
                            }
                            this.setData(
                                {
                                    videoStatus: list,
                                    currentTab
                                },
                                () => {
                                    this.findVedioAdmList(false);
                                }
                            );
                        } else {
                            uni.showToast({
                                title: '未查询到视频问诊状态列表数据',
                                icon: 'none'
                            });
                        }
                    }
                }
            });
        },

        /**
         * 切换日期
         * @param {*} e
         */
        changeQueryDate: function (e) {
            let queryDateCode = e.currentTarget.dataset.code;
            this.setData({
                queryDateCode: queryDateCode
            });
            if (queryDateCode === 'dayRang') {
                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: '',
                    currentPage: 1
                });
                this.findVedioAdmList(false);
            }
        },

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

        /**
         * 选中日历
         */
        onCalendarConfirm: function (e) {
            console.log(e);
            this.setData({
                calendarShow: false,
                dateFrom: e.detail[0],
                dateTo: e.detail[1],
                currentPage: 1
            });
            this.findVedioAdmList(false);
        },

        /**
         * 打开"开始/结束"日期对应的滚轮
         */
        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();
            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: '',
                currentPage: 1,
                dateFrom: parse(this.dateFromStr),
                dateTo: parse(this.dateToStr)
            });
            this.findVedioAdmList(false);
        },

        /**
         * 切换tabs
         */
        swichNav: function (e) {
            // console.log(e);
            let currentTab = e.target.dataset.current;
            let that = this;
            if (this.currentTab === currentTab) {
                return false;
            } else {
                this.setData({
                    currentTab: currentTab,
                    currentPage: 1
                });
                // console.log("currentTab", this.data.currentTab);
                //获取就诊记录
                this.findVedioAdmList(false);
            }
        },

        /**
         * 获取就诊记录
         */

        findVedioAdmList: function (searchType) {
            let { dateFrom, currentTab, dateTo, queryDateCode, videoAdmList, pageSize, currentPage } = this;
            let userData = Cache.get('userData');
            if (Cache.get('userData') == undefined) {
                uni.showToast({
                    title: '未获取到用户信息',
                    icon: 'none'
                });
                return;
            }
            if (queryDateCode === 'dayRang') {
                if (dateFrom != '' && dateTo != '') {
                    dateFrom = `${dateFrom.getFullYear()}-${dateFrom.getMonth() + 1}-${dateFrom.getDate()}`;
                    dateTo = `${dateTo.getFullYear()}-${dateTo.getMonth() + 1}-${dateTo.getDate()}`;
                }
                queryDateCode = '';
            }
            let data = {
                params: [
                    {
                        locID: userData.locID,
                        hospID: userData.hospID,
                        userID: userData.userID,
                        statusCode: currentTab,
                        dateFrom: dateFrom,
                        dateTo: dateTo,
                        dateRangeCode: queryDateCode
                    }
                ],
                pagination: [
                    //页码信息
                    {
                        pageSize: pageSize,
                        currentPage: currentPage
                    }
                ]
            };
            $http.post('urlDeault', this, {
                code: '03100022',
                data: data,
                success: function (res) {
                    if (res.errorCode == '0') {
                        if (res.result.data) {
                            // console.log("res-data", res.result.data)
                            let newHasMoreData = false;
                            if (res.result.data.length === pageSize) {
                                newHasMoreData = true;
                            }
                            let newVideoAdmList = [];
                            if (searchType == true) {
                                newVideoAdmList = videoAdmList.concat(res.result.data);
                            } else {
                                newVideoAdmList = res.result.data;
                            }
                            this.setData({
                                videoAdmList: newVideoAdmList,
                                hasMoreData: newHasMoreData
                            });
                        } else {
                        }
                    }
                }
            });
        },

        /**
         * 点击取消接诊
         */
        handleRejectAdm: function (event) {
            console.log('就诊ID:', event);
            let { admID, patientData } = event.detail;
            if (admID == '') {
                uni.showToast({
                    title: '请选择患者操作',
                    icon: 'none'
                });
                return;
            }
            this.setData({
                showRefusal: true,
                admID: event.detail.admID
            });
            Cache.set('patientData', {
                patID: patientData.patID,
                admID: admID
            });
        },

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

        /**屏幕下滑至最底部 */
        scrollLower: function () {
            let { hasMoreData, currentPage } = this;
            if (hasMoreData) {
                Toast.loading({
                    mask: true,
                    message: '加载中...'
                });
                this.setData(
                    {
                        currentPage: currentPage + 1
                    },
                    () => {
                        this.findVedioAdmList(true); // 传参标识 表示是滚动加载
                    }
                );
            } else {
                uni.showToast({
                    title: '没有更多数据啦',
                    icon: 'none'
                });
            }
        },

        /**
         * 搜索患者
         */
        searchFun: function (value) {
            let { queryDateCode, dateFrom, dateTo } = this;
            if (queryDateCode === 'dayRang') {
                if (dateFrom != '' && dateTo != '') {
                    dateFrom = `${dateFrom.getFullYear()}-${dateFrom.getMonth() + 1}-${dateFrom.getDate()}`;
                    dateTo = `${dateTo.getFullYear()}-${dateTo.getMonth() + 1}-${dateTo.getDate()}`;
                }
                queryDateCode = '';
            }
            let params = `dateRangeCode=${queryDateCode}&dateFrom=${dateFrom}&dateTo=${dateTo}`;
            uni.navigateTo({
                url: '../searchPatient/searchPatient?' + params,
                // events: {
                //   // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
                //   acceptDataFromOpenedPage: function(data) {
                //     console.log(data)
                //   },
                //   someEvent: function(data) {
                //     console.log(data)
                //   }
                // },
                success: function (res) {
                    // 通过eventChannel向被打开页面传送数据
                    res.eventChannel.emit('acceptDataFromOpenerPage', {
                        queryDateCode,
                        dateFrom,
                        dateTo
                    });
                }
            });
            // return new Promise((resolve, reject) => {
            //   setTimeout(() => {
            //     resolve([{
            //       text: '彭若谷',
            //       value: 1
            //     }, {
            //       text: '刘建安',
            //       value: 2
            //     }])
            //   }, 200)
            // })
        },

        /**
         * 选中患者
         */
        selectedPat: function (e) {
            console.log('select result', e.detail.item.value);
            this.setData({
                patID: e.detail.item.value
            });
        },

        /**
         * 接诊
         */
        acceptAdm: function (event) {
            // console.log(event)
            let { admid, statuscode, url, patient } = event.target.dataset;
            let admType = '';
            let admTypeCode = patient.admTypeCode;
            if (admTypeCode == 'W') {
                admType = 'video';
            }
            if (admid !== '') {
                uni.navigateTo({
                    url: url + '?admtype=' + admType
                });
                // console.log('patientData', patient)
                try {
                    Cache.set('patientData', patient);
                } catch (error) {
                    console.log('CatchClause', error);
                    console.log('CatchClause', error);
                    console.log(error);
                }
                this.findVedioAdmList(false);
            }
        },

        offLine: function (data) {
            let { navbarData } = this;
            navbarData.overlayVisible = true;
            navbarData.message = '您处于离线状态，请先登录';
            navbarData.login = true;
            this.setData({
                navbarData
            });
        }
    }
};
</script>
<style>
/* pages/graphicConsult/graphicConsult.wxss */
@import '../../../../assets/css/iconfont.css';

Page {
    background-color: #f1f1f1;
    overflow: hidden;
    height: 100%;
}

.allpatient {
    width: 100%;
}

.view-query {
    display: flex;
    flex-direction: row;
    height: 90rpx;
}

.view-query-date {
    margin-top: 10rpx;
    margin-left: 24rpx;
    width: calc(100% - 115rpx);
}

.view-query-dateBtn {
    /* margin-left: 5rpx; */
    height: 80rpx !important;
    padding: 15rpx 0 !important;
    border-radius: 0;
    background: #fff;
    width: 25%;
    font-size: 32rpx !important;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    line-height: 50rpx;
}

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

.buttontext {
    height: 50rpx !important;
    margin: auto 0;
    line-height: 50rpx !important;
}

.view-query-dateBtn-clicked {
    border-radius: 0;
    font-size: 36rpx;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: rgba(24, 144, 255, 1);
}

/* .van-calendar__footer {
  padding: none;
}
.van-calendar__footer--safe-area-inset-bottom {
  margin-left: 150rpx !important
  padding-left: 150rpx !important;
} */

.view-query-search {
    margin-top: 12rpx;
    height: 70rpx;
    width: 79rpx;
    background-color: #fff;
    margin-left: 12rpx;
    padding-top: 7rpx;
    margin-right: 24rpx;
}

.view-query-search-icon {
    margin-left: 10rpx !important;
}

.swiper-tab {
    background-color: #fff;
    width: calc(100% - 48rpx);
    text-align: center;
    line-height: 80rpx;
    margin: 8rpx 24rpx;
    height: 85rpx;
    border-radius: 16rpx;
    box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.04);
    overflow: hidden;
    white-space: nowrap;
    font-size: 0;
}

.swiper-tab-list {
    font-size: 28rpx;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 136rpx;
    height: 85rpx;
    margin: 0;
    padding: 0 16rpx;
    box-sizing: border-box;
    color: #4a5160;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.on {
    color: #1687ff;
    font-weight: 600;
    font-size: 30rpx;
    border-bottom: 0;
}

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

.patAdmRecord {
    overflow: hidden;
}

.scroll-view {
    height: calc(100% - 90rpx - 105rpx - 16rpx);
    padding-bottom: 20rpx;
}

.scroll-view-item {
    display: flex;
    flex-direction: row;
}

.scroll-view-item-Info {
    display: flex;
    flex-direction: column;
    font-size: 14px;
}

.scroll-view-item-image {
    width: 40px;
    height: 40px;
    padding-left: 8px;
    padding-top: 8px;
    /* border-radius:50%;  */
}

.scroll-view-item-baseInfo {
    display: flex;
    font-size: 15px;
    flex-wrap: nowrap;
}

.scroll-view-item-baseInfo-surplusTime {
    /* align-items: flex-end; */
    margin-left: 20px;
    font-size: 13px;
}

.noStart {
    color: #f93;
}

.scroll-view-item-timeRang {
    margin-top: 3px;
    font-size: 13px;
    flex-wrap: nowrap;
}

.scroll-view-item-status {
    align-self: flex-end;
    margin-left: 64px;
}

.noOverTime {
    color: #0079fe;
}

.scroll-view-item-admType {
    font-size: 13px;
    color: #f93;
}

.btn-view {
    margin-top: 3px;
    align-self: flex-end;
    display: flex;
    flex-wrap: nowrap;
}

.btn-view-botBtn {
    font-size: 12px !important;
    color: #0079fe !important;
    border: 1px solid #0079fe !important;
    margin-left: 9rpx !important;
    /* margin-left: 34px; */
}

.btn-view-botBtn2 {
    font-size: 12px !important;
    color: rgb(247, 247, 248) !important;
    background-color: #0079fe !important;
    margin-left: 9rpx !important;
}
.none {
    height: 100%;
    width: 408rpx;
    margin: 50rpx 0 10rpx 150rpx;
}
.weui-half-screen-dialog__hd .weui-icon-btn {
    display: none;
    width: 0;
    height: 0;
}
</style>

<style scoped>
.allpatient {
    width: 100%;
    background: #f4f6fa;
    display: flex;
    flex-direction: column;
}

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

.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;
}

/* ========== 自定义日期范围弹层 ========== */
.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;
}

.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-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;
}
</style>
