<template>
    <view class="all">
        <view class="head">
            <view class="row userInfo">
                <view class="col-3">
                    <view class="userIcon">
                        <image class="icon" :src="domain + (userData.image || treatmentInfo.image)"></image>
                    </view>
                </view>
                <view class="col-9 userInfoDateil">
                    <view class="infos">
                        <view class="user-name-row">
                            <text class="userName">{{ userData.userName }}</text>
                            <view class="online-switch-wrap" @click="toggleOnlineStatus">
                                <view class="switch-bg" :class="{ 'switch-on': onlineStatus === 'Y' }">
                                    <text class="switch-text">{{ onlineStatus === 'Y' ? '在线' : '离线' }}</text>
                                    <view class="switch-dot" :class="{ 'dot-on': onlineStatus === 'Y' }"></view>
                                </view>
                            </view>
                        </view>
                        <text class="userArrivetitle">{{ userData.locDesc }}</text>
                        <text class="userArrivetitle">{{ userData.titleDesc }}</text>
                    </view>
                    <view class="consult">
                        <text class="userArrivetitle">问诊量:</text>
                        <text class="userArrive">{{ treatmentInfo.totalNum }}</text>
                    </view>
                </view>
            </view>
            <view class="row grade">
                <view class="col-4 bodyItem" @tap="scoreDetail">
                    <image :src="imgDomain + '/images/icon/doctor/score.png'" style="height: 50px; width: 50px"></image>
                    <view class="gradeTop">综合评分</view>
                    <text class="number">{{ treatmentInfo.score }}</text>
                    分
                </view>

                <view class="col-4 bodyItem" @tap="admDetail" data-admType="image">
                    <image :src="imgDomain + '/images/icon/doctor/mypicture.png'" style="height: 50px; width: 50px"></image>
                    <view class="gradeTop">图文咨询</view>
                    <text class="number">{{ treatmentInfo.imageNum }}</text>
                    人次
                </view>
                <!-- <view class="col-4 bodyItem" @tap="admDetail" data-admType="video">
                    <image :src="imgDomain + '/images/icon/doctor/myvideo.png'" style="height: 50px; width: 50px"></image>
                    <view class="gradeTop">线上门诊</view>
                    <text class="number">{{ treatmentInfo.videoNum }}</text>
                    人次
                </view> -->
            </view>
        </view>
        <view class="myBody">
            <view class="scendBody">
                <view :data-itemdata="item" @tap="tapName" v-for="(item, index) in myFunction" :key="index">
                    <view class="scendItem" :style="'border-bottom:' + (index == myFunction.length - 1 ? '0px' : '1px solid #f5f4f4')">
                        <image :src="imgDomain + '/images/icon/doctor/' + item.image"></image>
                        <view class="opreationDesc">
                            <text>{{ item.title }}</text>
                            <view class="cell-r">
                                <text class="titleDesc">{{ item.desc }}</text>
                                <view class="arrow-right"></view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <button @tap="loginout" class="loginout">退出登录</button>
        </view>
    </view>
</template>

<script>
import Cache from '../../../utils/cache';
// pages/PersonalCenter/personalcenter.js
import { $http } from '../../../config/https.js';
import { httpconfig as httpConfig } from '../../../config/httpConfig.js';
import messageUtil from '../../../utils/message.js';
import Util from '../../../utils/util.js';

export default {
    components: {},
    data() {
        return {
            myFunction: [
                {
                    title: '我的名片',
                    icon: 'imac',
                    image: 'card.png',
                    desc: '专属二维码',
                    url: '../personalcenter/doctorCard/doctorCard',
                    code: 'M'
                },
                {
                    title: '我的排班',
                    icon: 'imac',
                    image: 'schedule.png',
                    desc: '查看详情',
                    url: '../../oneselfCenter/page/scheduling/scheduling',
                    code: 'S',
                    error: ''
                },
                {
                    title: '快捷回复模板',
                    icon: 'imac',
                    image: 'replyTemplate.png',
                    desc: '聊天',
                    url: '../../oneselfCenter/page/replyTemplate/replyTemplate',
                    code: 'R',
                    error: ''
                },
                // {
                //     title: '个人公告',
                //     icon: 'imac',
                //     image: 'notice.png',
                //     desc: '公告',
                //     url: '../../oneselfCenter/page/notice/notice',
                //     code: 'R',
                //     error: ''
                // },
                {
                    title: '我的科室',
                    icon: 'imac',
                    image: 'loc.png',
                    desc: '切换科室',
                    url: '../personalcenter/locList/locList',
                    code: 'L',
                    error: ''
                },
                // {
                //     title: '帮助和反馈',
                //     icon: 'imac',
                //     image: 'helpandback.png',
                //     desc: '客服',
                //     url: '../../oneselfCenter/page/help/help',
                //     code: 'N',
                //     error: ''
                // }
                // {
                //   title: '客服',
                //   icon: 'imac',
                //   image: 'loc.png',
                //   desc: '客服帮助',
                //   url: '/pages/myConsultRoom/page/treatment/treatment',
                //   code: 'H',
                // }
            ],

            userData: {
                image: '',
                userName: '',
                locDesc: '',
                titleDesc: ''
            },

            onlineStatus: 'Y', // 在线状态 Y-在线 N-离线

            treatmentInfo: {
                image: '',
                totalNum: '',
                score: '',
                imageNum: '',
                videoNum: ''
            },

            //接诊信息
            schedulingAuth: 'Y',

            //Y 允许排班
            userUploadPath: '',

            //图片上传地址
            domain: httpConfig.domain,

            imgDomain: httpConfig.imgDomain,
            userPicAddress: '',

            // 出诊类型ID，用于上线排班
            resourceTypeID: '',

            // 是否已排班 Y-已排班 N-未排班
            isScheduled: 'N'
        };
    },
    moved: function () {},
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },
    destroyed: function () {},
    methods: {
        ready: function () {
            var userData = Cache.get('userData');
            this.setData(
                {
                    userData: userData
                },
                () => {
                    this.getDoctorAdmQty();
                    this.getDoctorOnlineStatus();
                    this.getResourceTypeID();
                }
            );
            let TIMInfo = Cache.get('TIMInfo');
            if (TIMInfo == '' || TIMInfo.loginStatus == 'N') {
                messageUtil.initTim();
            }
        },

        // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
        attached: function () {},

        /**
         * 查询医生在线状态
         */
        getDoctorOnlineStatus: function () {
            let that = this;
            const userData = Cache.get('userData');
            if (!userData.userID) return;
            let data = {
                params: [{
                    doctorID: userData.userID
                }]
            };
            $http.post('urlDeault', that, {
                code: '03100179',
                data: data,
                success: function (res) {
                    if (res.errorCode == '0') {
                        const data = res.data || {};
                        const status = data.status || 'Y';
                        const isScheduled = data.isScheduled || 'N';
                        that.setData({ onlineStatus: status, isScheduled: isScheduled });
                        userData.onlineStatus = status;
                        userData.isScheduled = isScheduled;
                        Cache.set('userData', userData);
                    }
                }
            });
        },

        // 组件所在页面的生命周期函数
        handlePageShow: function () {
            var userData = Cache.get('userData');
            this.setData(
                {
                    userData: userData
                },
                () => {
                    this.getDoctorAdmQty();
                    this.getDoctorOnlineStatus();
                    this.getDoctorSchedulingPermi();
                    this.getUserPicAddress();
                    this.getResourceTypeID();
                }
            );
        },

        handlePageHide: function () {},
        handlePageResize: function () {},

        tapName: function (event) {
            let { currentTarget } = event;
            let itemdata = currentTarget.dataset.itemdata;
            let url = itemdata.url;
            if (url == '' || !url) {
                console.log('填写跳转路径');
            }
            if (itemdata.error != '' && itemdata.error != undefined) {
                uni.showToast({
                    title: itemdata.error,
                    icon: 'none'
                });
                return;
            }
            if (itemdata.code == 'H') {
                url = url + '?help=true';
            }
            if (itemdata.code == 'S') {
                if (this.schedulingAuth == 'N') {
                    uni.showToast({
                        title: '没有排班权限',
                        icon: 'none'
                    });
                    return;
                }
            }
            uni.navigateTo({
                //目的页面地址
                url: url,
                success: function (res) {},
                fail: function (res) {
                    console.log(res);
                }
            });
        },

        /**
         * 用户点击右上角分享
         */
        onShareAppMessage: function () {},

        loginout: function () {
            let that = this;
            uni.showModal({
                title: '提示',
                content: '确定要退出登录吗？',
                confirmText: '退出',
                cancelText: '取消',
                success: function (modalRes) {
                    if (!modalRes.confirm) return;
                    that.doLogout();
                }
            });
        },

        // 真正的退出逻辑：先做不可阻断的本地清理与父组件通知，
        // 后端 / openid / IM 登出全部作为“尽力而为”的副作用，失败不影响 UI 退出
        doLogout: function () {
            let that = this;
            // 1) IM 登出（H5 下 timObj 可能为空，message.js 内部已做兜底）
            try {
                messageUtil.loginOut();
            } catch (e) {
                console.warn('[logout] messageUtil.loginOut error:', e);
            }

            // 2) 通知父组件清理本地缓存并切回登录页面（必须最先生效，保证“立刻退出”）
            that.$emit('loginOut');

            // 3) 通知后端账号下线（拿不到 openid 或接口失败都忽略）
            const accountInfo = typeof uni.getAccountInfoSync === 'function'
                ? uni.getAccountInfoSync()
                : { miniProgram: { appId: '' } };
            const appID = accountInfo.miniProgram.appId;
            if (typeof uni.login !== 'function') return;
            uni.login({
                success(res) {
                    if (!res || !res.code) return;
                    Util.getOpenID(res.code, (openid) => {
                        if (!openid) return;
                        $http.post('urlDeault', that, {
                            code: '03100013',
                            data: {
                                params: [{ openID: openid, appID: appID, status: 'N' }]
                            },
                            success: function () {}
                        });
                    });
                },
                fail() { /* 无微信登录能力，忽略 */ }
            });
        },

        getDoctorAdmQty: function () {
            let that = this;
            const userData = Cache.get('userData');
            if (userData.userID) {
                let data = {
                    params: [
                        {
                            userID: userData.userID,
                            locID: userData.locID,
                            hospID: userData.hospID
                        }
                    ]
                };
                $http.post('urlDeault', that, {
                    code: '03100071',
                    data: data,
                    success: function (res) {
                        let errorCode = res.errorCode;
                        if (errorCode == '0') {
                            that.setData({
                                treatmentInfo: res.result
                            });
                            if (res.result.image) {
                                userData.image = res.result.image;
                                Cache.set('userData', userData);
                            }
                        } else {
                            that.$emit('loginOut');
                        }
                    }
                });
            }
        },

        getDoctorSchedulingPermi: function () {
            let that = this;
            const userData = Cache.get('userData');
            if (userData.userID) {
                let data = {
                    params: [
                        {
                            userID: userData.userID
                        }
                    ]
                };
                $http.post('urlDeault', that, {
                    code: '03100009',
                    data: data,
                    success: function (res) {
                        let errorCode = res.errorCode;
                        if (errorCode == '0') {
                            //  let index = this.data.myFunction.findIndex(data=>{
                            //     return data.code == "S"
                            //   });
                            // if(res.result == "N"){
                            this.setData({
                                schedulingAuth: res.result
                            });
                            // if(index !== -1){
                            // this.data.myFunction.splice(index,1);
                            // this.setData({myFunction:this.data.myFunction});
                            // }
                        }
                        // }
                    }
                });
            }
        },

        /**
         * 评分详情
         */
        scoreDetail: function () {
            uni.navigateTo({
                url: '../../oneselfCenter/page/comprehensiveScore/comprehensiveScore'
            });
        },

        /**
         *
         * @param {急诊详情} e
         */
        admDetail: function (e) {
            console.log(e);
            let admTypeCode = e.currentTarget.dataset.admtype;
            uni.navigateTo({
                url: '../../oneselfCenter/page/finishAdmRecord/finishAdmRecord?admTypeCode=' + admTypeCode
            });
        },

        /**
         * 切换在线/离线状态
         */
        toggleOnlineStatus: function () {
            let that = this;
            const userData = Cache.get('userData');
            const isOnline = that.onlineStatus === 'Y';

            // 上线逻辑：已排班直接上线，未排班先跳转排班页面
            if (!isOnline) {
                if (that.isScheduled === 'Y') {
                    that.doctorGoOnline();
                } else {
                    if (!that.resourceTypeID) {
                        uni.showToast({ title: '未获取到出诊类型，请稍后重试', icon: 'none' });
                        that.getResourceTypeID();
                        return;
                    }
                    uni.navigateTo({
                        url: '../../oneselfCenter/page/onlineScheduling/onlineScheduling',
                        events: {
                            onlineSchedulingConfirm: function () {
                                that.doctorGoOnline();
                            }
                        },
                        success: function (res) {
                            res.eventChannel.emit('onlineSchedulingInit', {
                                resourceTypeID: that.resourceTypeID,
                                depDoctorID: userData.userID
                            });
                        },
                        fail: function () {
                            uni.showToast({ title: '打开排班页面失败', icon: 'none' });
                        }
                    });
                }
                return;
            }

            // 下线直接调用接口
            that.doctorGoOffline();
        },

        /**
         * 医生上线
         */
        doctorGoOnline: function () {
            let that = this;
            const userData = Cache.get('userData');
            that.setData({ onlineStatus: 'Y' });
            $http.post('urlDeault', that, {
                code: '03100178',
                data: {
                    params: [{
                        doctorID: userData.userID,
                        status: 'Y'
                    }]
                },
                success: function (res) {
                    if (res.errorCode !== '0') {
                        that.setData({ onlineStatus: 'N' });
                        uni.showToast({ title: res.errorMessage || '上线失败', icon: 'none' });
                    } else {
                        userData.onlineStatus = 'Y';
                        Cache.set('userData', userData);
                    }
                },
                fail: function () {
                    that.setData({ onlineStatus: 'N' });
                    uni.showToast({ title: '网络异常，请重试', icon: 'none' });
                }
            });
        },

        /**
         * 医生下线
         */
        doctorGoOffline: function () {
            let that = this;
            const userData = Cache.get('userData');
            that.setData({ onlineStatus: 'N' });
            $http.post('urlDeault', that, {
                code: '03100178',
                data: {
                    params: [{
                        doctorID: userData.userID,
                        status: 'N'
                    }]
                },
                success: function (res) {
                    if (res.errorCode !== '0') {
                        that.setData({ onlineStatus: 'Y' });
                        uni.showToast({ title: res.errorMessage || '下线失败', icon: 'none' });
                    } else {
                        userData.onlineStatus = 'N';
                        Cache.set('userData', userData);
                    }
                },
                fail: function () {
                    that.setData({ onlineStatus: 'Y' });
                    uni.showToast({ title: '网络异常，请重试', icon: 'none' });
                }
            });
        },

        /**
         * 获取默认出诊类型ID（用于上线排班）
         */
        getResourceTypeID: function () {
            let that = this;
            const userData = Cache.get('userData');
            if (!userData.hospID) return;
            $http.post('urlDeault', that, {
                code: '03100079',
                data: {
                    params: [{
                        hospID: userData.hospID
                    }]
                },
                success: function (res) {
                    if (res.errorCode == '0') {
                        const list = Array.isArray(res.result) ? res.result : [];
                        const defaultItem = list.find((item) => item.defaultFlag == 'Y' || item.defaultFlag == 1);
                        that.setData({
                            resourceTypeID: defaultItem ? defaultItem.id : (list[0] && list[0].id) || ''
                        });
                    }
                }
            });
        },

        /**
         * 获取用户图片上传路径
         */
        getUserPicAddress: function () {
            // 初始值下拉列表值
            let data = {
                params: [
                    {
                        dataAry: [
                            {
                                productAppCode: 'FileServer',
                                appPropCode: ['UserPhotoPath', 'UserUploadPath']
                            },
                            {}
                        ]
                    }
                ]
            };
            $http.post('urlDeault', this, {
                code: '01040211',
                data: data,
                success: function (res) {
                    let errorCode = res.errorCode;
                    if (errorCode === '0') {
                        this.setData({
                            userPicAddress: res.result.defaultValue[0].appPropCode[1].defaultValue || ''
                        });
                    }
                }
            });
        },

        /**选择图片 */
        onChooseImage: async function (e) {
            let that = this;
            uni.chooseImage({
                count: 1,
                sourceType: ['album', 'camera'],
                success: async (imgres) => {
                    that.VerificationImg(imgres);
                },
                fail: async function (res) {
                    console.log('fail', res);
                }
            });
        },

        VerificationImg: function (imgres) {
            let base64 = 'data:image/png;base64,' + uni.getFileSystemManager().readFileSync(imgres.tempFilePaths[0], 'base64');
            // 初始值下拉列表值
            let data = {
                params: [
                    {
                        imageBase64: base64.substring(base64.indexOf(',') + 1)
                    }
                ]
            };
            let that = this;
            $http.post('urlDeault', this, {
                code: '88010021',
                data: data,
                success: function (res) {
                    let errorCode = res.errorCode;
                    if (errorCode == '0') {
                        that.handleUploadFile(imgres, res.result.faceValue);
                    } else {
                        uni.showModal({
                            title: '提示',
                            content: res.errorMessage,
                            showCancel: false,
                            confirmText: '知道了'
                        });
                        ///faceValue faceValue: "AAD6RAAAdEOha/M7+6ECvpQdTT25Z9+7rKWevWlhv7u43tm9SOYMvXFdcL0qqlW917oFPtZzubwyyrg9nixBOuPgdL2zdQs6NTpovcq/cD1KqkU9DqsbvC2aij3iiQk9tXxNPeU4w71i6tw89fSWPUfvqD32xq49CGcTPdWIDL2k/CW6hWUAPr3MvDw9biS9j9jQPbdRrD0ctZS9e9ekvU51PL0XMZK8wrnqvF1vgT3xpIW9HUqsvTioaD0PzBm+aGjhvTELNDzdSVg9AC1DPe/Dn73G2Za7bvh2O1D/ij2qiBK9ymhOvWR8rb1cbNs86jYxvGWd5720TCU+hVQdvUDPDLwsKci9rVakvX414j3m4o69rdzMvEGfAb2AJzI6yJS1uzF+Fz24m4A9xeXRPcSvUz0v0YA9yTyEvDVZbT010CS8HrfVvQXq+bkkAts9NC2dPQVBBj6vnqs9R9hZvYUhaDvjoIG9aCXCPF27UL3iLR6+YPk/Od5ykj090iM9uvQoPfpMRL2cGZ49j2/3PdfWGrs+RTk8nvyePc5L+bz16gk90/FWOyOmhTygiei8SISkvaiyCT2/EWo8ifSSvbxu3zwgbzy9rVjhvbG0Ob04d7G8U9KfvPQA3L0vbuK8GKJtPJVGUz14gRM+1Lbbve8XLr2Yc4+9uJ7WPIIcoL1V3Y08rH4rPYYsTzyU/nU9kZCGvbdlAr7IFh+9BSmwPQOeWT2L45M98taLPU5cXj1u1fY85ZtrvSu6h73lP369rlaRvIiE4r1iaFu86S2IvA8uUbyvsS+9OjqNvSEbsbzSob28T5qBvKQwPj27Y0E9wtfsvTXRfL1bSSU90/8pPWkdfzyhuZw8S6ilPFd9Ur31MKm973SBu8YiNj31FZS9rIMwvRmnDD3vceO61+n5vYWsA73235S9d9X8PLSqtr1+oiK8YK2OPRZnFLy0l7G8eLjFPDxsZL2/v988ZvWJvRunWj30cIG7QX3evaOsAjtdic+9MUSIu+57FD0XSH68WkUNPPFuXj3Qg409OfHNvH51jjyh7EG9uIOxvbiuVT2F49k8cklnvXpNNjzcgZS6QHCovW2CB77rHh48347XPWnutz1ZdmU9DD56PBRLBD25S6M94/iPvLM7jjuFE10949cavIRtCz0nyme800Y6vZGl6zt5aoe9NhU4vpIxoLxCTa69MIBcvIx8YzvdDLw97LzWvJehgrxFrky8YCQ7vSGio7yMhbE9AuZmPCebtbw7csK8msrevcjpjL0TdDw9UFt6PaqZSrzl5RA9pVkJvUG41r0PyH+9lSpyuxXHAb3xaL48EwmmPbPNDT3lz589JCz5vMHno704Z8485byTvVFEq7sLOJm9"
                        ///userID
                        ///userPicName
                    }
                }
            });
        },

        // 图片上传
        handleUploadFile: function (fileData, faceValue) {
            let that = this;
            let path = fileData.tempFilePaths instanceof Array && fileData.tempFilePaths.length > 0 ? fileData.tempFilePaths[0] : '';
            let imgType = path.split('.')[path.split('.').length - 1];
            if (imgType === 'jpg' || imgType === 'png' || imgType === 'jpeg' || imgType === 'gif') {
                uni.uploadFile({
                    url: that.userPicAddress,
                    //仅为示例，非真实的接口地址
                    filePath: path,
                    name: 'file',
                    success: (unloadres) => {
                        if (unloadres.statusCode === 200) {
                            let imgName = JSON.parse(unloadres.data).filePath;
                            that.updateUserImage(imgName, faceValue);
                        } else {
                            uni.showToast({
                                title: '上传失败',
                                icon: 'none'
                            });
                        }
                    },
                    fail: (res) => {
                        uni.showToast({
                            title: '上传失败',
                            icon: 'none'
                        });
                    }
                });
            } else {
                uni.showToast({
                    title: '图片格式不正确',
                    icon: 'none'
                });
            }
        },

        /**
         * 更新用户头像
         * @param {*} imageName
         */
        updateUserImage: function (imageName, faceValue) {
            let that = this;
            let userData = Cache.get('userData');
            // 初始值下拉列表值
            let data = {
                params: [
                    {
                        userID: userData.userID,
                        faceValue: faceValue,
                        userPicName: imageName
                    }
                ]
            };
            $http.post('urlDeault', this, {
                code: '01040212',
                data: data,
                success: function (res) {
                    let errorCode = res.errorCode;
                    if (errorCode == '0') {
                        userData.image = res.image;
                        Cache.set('userData', userData);
                        that.setData({
                            userData: userData
                        });
                    }
                }
            });
        }
    },
    created: function () {}
};
</script>
<style>
/* pages/PersonalCenter/personalcenter.wxss */

page {
    height: 100%;
    width: 100%;
}

.all {
    min-height: 100%;
    width: 100%;
    overflow: auto;
    padding: 118rpx 20rpx 32rpx;
    box-sizing: border-box;
    background: #f5f7fb;
    background-size: 96% 75px;
}

.myBody {
    min-height: calc(100% - 435rpx);
    width: 100%;
}

.personalcenter {
    height: 100%;
    width: 100%;
}

.logoutbtn {
    display: block;
    width: 60% !important;
    height: 80rpx !important;
    border-radius: 5px;
    text-align: center;
    line-height: 80rpx !important;
    letter-spacing: 4px;
    font-size: 32rpx;
    color: #fff;
    background: #4169e1;
    margin: 0 20% !important;
    position: absolute;
    bottom: 200rpx;
}

.block {
    height: 20rpx;
    width: 100%;
    background: #f2f2f2;
}

.modules {
    border-top: 2rpx solid #eee;
    margin: 30rpx 0;
    width: 98%;
}

.grid {
    height: 150rpx;
    line-height: 110rpx;
    border: 2rpx solid #eee;
    border-top: none;
    margin-left: -5rpx;
    font-size: 30rpx;
    color: #666;
    position: relative;
}

.box_label {
    position: absolute;
    height: 20rpx;
    line-height: 20rpx;
    left: 0;
    top: 80rpx;
    color: #ccc;
    width: 100%;
    text-align: left;
    font-size: 26rpx;
}

.box_label2 {
    top: 110rpx;
    color: #f93;
}

.head {
    background-color: white;
    width: 100%;
    min-height: 392rpx;
    height: auto;
    margin-top: 0;
    border-radius: 12rpx;
    overflow: hidden;
    box-shadow: 0 8rpx 24rpx rgba(25, 82, 150, 0.08);
}

.userInfo {
    min-height: 178rpx;
    height: auto;
    display: flex;
    align-items: center;
    padding: 26rpx 28rpx 22rpx;
    box-sizing: border-box;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.userIcon {
    border-radius: 50%;
    margin-top: 0;
    margin-left: 0;
    background: #e9efff;
    height: 144rpx;
    width: 144rpx;
    text-align: center;
    line-height: 144rpx;
    overflow: hidden;
    box-shadow: 0 8rpx 20rpx rgba(36, 126, 239, 0.12);
}

.icon {
    height: 144rpx;
    width: 144rpx;
    border-radius: 50%;
}

.infos {
    padding: 0 10rpx 8rpx 24rpx;
    min-height: 72rpx;
    height: auto;
    white-space: normal;
    overflow: visible;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.consult {
    padding: 2rpx 10rpx 0 24rpx;
    line-height: 34rpx;
}

.user-name-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 10rpx;
}

.userName {
    font-size: 34rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    padding: 0;
    line-height: 44rpx;
    flex: 1;
    min-width: 0;
}

.online-switch-wrap {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.switch-bg {
    width: 120rpx;
    height: 48rpx;
    border-radius: 24rpx;
    background: #c0c4cc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8rpx 0 16rpx;
    box-sizing: border-box;
    transition: background 0.3s;
}

.switch-bg.switch-on {
    background: rgb(28, 134, 238);
    padding: 0 16rpx 0 8rpx;
}

.switch-text {
    font-size: 20rpx;
    color: #fff;
    line-height: 48rpx;
    padding-left: 12rpx;
}

.switch-dot {
    width: 36rpx;
    height: 36rpx;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.3s;
    flex-shrink: 0;
}

.switch-dot.dot-on {
    transform: translateX(8rpx);
}

.userOther {
    margin-left: 20rpx;
}

.userArrivetitle {
    display: inline-block;
    max-width: 100%;
    margin-right: 12rpx;
    margin-bottom: 4rpx;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(102, 102, 102, 1);
    padding: 0;
    line-height: 34rpx;
}

.userArrive {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(250, 140, 22, 1);
}

.grade {
    height: auto;
    min-height: 210rpx;
    width: 100%;
    margin-top: 2rpx;
    padding: 26rpx 8rpx 24rpx;
    border-top: 1px solid #eef2f7;
    display: flex;
    box-sizing: border-box;
}

.bodyItem {
    flex: 1;
    float: none;
    margin-top: 0;
    font-size: 26rpx;
    text-align: center;
    color: #4b5563;
    line-height: 48rpx;
}

.bodyItem image {
    height: 88rpx !important;
    width: 88rpx !important;
}

.fristBody {
    background-color: white;
    height: 17%;
    float: none;
}

.gradeTop {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    line-height: 26rpx;
    margin: 0;
}

.scendBody {
    margin-top: 20rpx;
    background-color: #ffffff;
    border-radius: 12rpx;
    overflow: hidden;
    box-shadow: 0 6rpx 18rpx rgba(25, 82, 150, 0.06);
}

.scendItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 0 30rpx;
    margin-bottom: 0;
    background-color: white;
    height: 96rpx;
    box-sizing: border-box;
}

.scendItem:active {
    background-color: #f7f7f7;
}

.scendItem image {
    height: 42rpx;
    width: 42rpx;
}

.myFoot {
    width: 100%;
    text-align: center;
    padding-top: 14rpx;
    font-weight: 400;
    font-size: 20rpx;
    height: 100rpx;
    margin-bottom: 40rpx;
}

.loginout {
    background-color: white;
    width: 100%;
    height: 104rpx;
    line-height: 104rpx;
    margin: 16rpx 0 0 0;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    border-radius: 8rpx;
    box-shadow: 0 6rpx 18rpx rgba(25, 82, 150, 0.05);
}

.loginout::after {
    border: 0;
}

.opreationDesc {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 24rpx;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    line-height: 44rpx;
    min-width: 0;
}

.titleDesc {
    margin-right: 12rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
}

.cell-r {
    display: flex;
    align-items: center;
    padding-right: 24rpx;
    flex-shrink: 0;
}

.arrow-right {
    float: right;
    width: 8px;
    height: 8px;
    border-top: 1px solid #c0c4cc;
    border-right: 1px solid #c0c4cc;
    transform: rotate(45deg);
    box-sizing: border-box;
}

.number {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(24, 144, 255, 1);
}
</style>
