<template>
    <view class="visit-history-detail">
        <nav-bar :navbar-data="navbarData" />
        <scroll-view scroll-y="true" class="detail-scroll" :style="{ paddingTop: height + 'px' }">
            <view class="summary-card">
                <view class="summary-title">
                    <view>
                        <text class="doctor-name">{{ detailInfo.doctorName || '-' }}</text>
                        <text class="loc-desc">{{ detailInfo.locDesc || '-' }}</text>
                    </view>
                    <text class="service-tag">{{ serviceType }}</text>
                </view>
                <view class="summary-line">
                    <text>就诊人</text>
                    <text>{{ detailInfo.patName || symptomInfo.patName || '-' }}</text>
                </view>
                <view class="summary-line">
                    <text>就诊时间</text>
                    <text>{{ detailInfo.orderTime || detailInfo.consultationDate || admInfo.admDate || '-' }}</text>
                </view>
                <view class="summary-line">
                    <text>状态</text>
                    <text>{{ detailInfo.statusDesc || '-' }}</text>
                </view>
            </view>

            <view class="timeline">
                <view class="timeline-item">
                    <view class="dot"></view>
                    <view class="section-card">
                        <view class="section-title">预约信息</view>
                        <view v-if="appointmentFields.length > 0">
                            <view class="info-row" v-for="field in appointmentFields" :key="field.key">
                                <text class="info-label">{{ field.label }}</text>
                                <text class="info-value">{{ field.value }}</text>
                            </view>
                            <view class="image-list" v-if="appointmentImages.length > 0">
                                <image
                                    v-for="(image, index) in appointmentImages"
                                    :key="index"
                                    :src="image"
                                    mode="aspectFill"
                                    @tap="previewImages(image, appointmentImages)"
                                />
                            </view>
                        </view>
                        <view class="empty-text" v-else>暂无预约填写信息</view>
                    </view>
                </view>

                <view class="timeline-item">
                    <view class="dot"></view>
                    <view class="section-card">
                        <view class="section-head">
                            <view class="section-title">咨询记录</view>
                            <view class="section-actions">
                                <view class="section-action" v-if="chatExpanded && moreMsgFlag === 'Y'" @tap="loadMoreChat">加载更多</view>
                                <view class="section-action" @tap="toggleChat">
                                    {{ chatExpanded ? '收起' : '展开' }}{{ chats.length > 0 ? '(' + chats.length + ')' : '' }}
                                </view>
                            </view>
                        </view>
                        <view v-if="!chatExpanded" class="fold-tip">
                            {{ chats.length > 0 ? '已收起咨询记录，点击展开查看' : '暂无咨询记录' }}
                        </view>
                        <view v-else-if="chats.length > 0" class="chat-list">
                            <view v-for="item in chats" :key="item.msgID || item.key" :class="['chat-item', item.direction === 'right' ? 'right' : 'left']">
                                <view class="chat-time" v-if="item.msgType === '3'">{{ item.sendTime }}</view>
                                <view class="chat-bubble" v-else-if="item.msgType === '1'">
                                    <text v-if="item.consultText">{{ item.consultText }}</text>
                                    <image
                                        v-if="item.picture"
                                        :src="item.picture"
                                        mode="widthFix"
                                        @tap="previewImages(item.picture, chatImages)"
                                    />
                                </view>
                                <view class="chat-time" v-else-if="item.msgType === '2'">消息已撤回</view>
                            </view>
                        </view>
                        <view class="empty-text" v-else>暂无咨询记录</view>
                    </view>
                </view>

                <view class="timeline-item" v-if="serviceType === '线上门诊'">
                    <view class="dot"></view>
                    <view class="section-card">
                        <view class="section-title">视频录播</view>
                        <view v-if="recordingFiles.length > 0">
                            <view class="video-box" v-for="(item, index) in recordingFiles" :key="index">
                                <video v-if="item.url" :src="item.url" controls class="record-video"></video>
                                <view v-else class="empty-text">{{ item.name || '录播文件' }}</view>
                            </view>
                        </view>
                        <view class="empty-text" v-else>暂无录播文件</view>
                    </view>
                </view>

                <view class="timeline-item">
                    <view class="dot"></view>
                    <view class="section-card">
                        <view class="section-head">
                            <view class="section-title">病历</view>
                            <view class="section-action" @tap="toggleMedicalRecord">
                                {{ medicalRecordExpanded ? '收起' : '展开' }}{{ medicalRecordFields.length > 0 ? '(' + medicalRecordFields.length + ')' : '' }}
                            </view>
                        </view>
                        <view v-if="!medicalRecordExpanded" class="fold-tip">
                            {{ medicalRecordFields.length > 0 ? '已收起病历数据，点击展开查看' : '暂无病历数据' }}
                        </view>
                        <view v-else-if="medicalRecordFields.length > 0">
                            <view class="info-row" v-for="field in medicalRecordFields" :key="field.key">
                                <text class="info-label">{{ field.label }}</text>
                                <text class="info-value">{{ field.value }}</text>
                            </view>
                        </view>
                        <view class="empty-text" v-else>暂无病历数据</view>
                    </view>
                </view>

                <view class="timeline-item">
                    <view class="dot"></view>
                    <view class="section-card">
                        <view class="section-title">诊断</view>
                        <view v-if="diagnoseList.length > 0" class="pill-list">
                            <text v-for="(item, index) in diagnoseList" :key="index">{{ item.diag || item.ICDDesc || item.diagDesc || item.diagnosis || '-' }}</text>
                        </view>
                        <view class="empty-text" v-else>暂无诊断数据</view>
                    </view>
                </view>

                <view class="timeline-item">
                    <view class="dot"></view>
                    <view class="section-card">
                        <view class="section-title">医嘱 / 处方</view>
                        <view v-if="filteredDrugArr.length > 0" class="sub-section">
                            <view class="presc-item" v-for="(group, index) in filteredDrugArr" :key="'drug-' + index">
                                <view class="presc-name">{{ group.locDesc }}{{ group.phaWin ? '(' + group.phaWin + ')' : '' }}</view>
                                <view class="child-list" v-if="group.drugData && group.drugData.length > 0">
                                    <view v-for="(drug, drugIndex) in group.drugData" :key="'drug-' + drugIndex">
                                        {{ drug.medDesc }} {{ drug.medSpec }} x{{ drug.medQty }}{{ drug.medUnit }}
                                    </view>
                                </view>
                                <view class="child-list" v-if="group.inspectMedData && group.inspectMedData.length > 0">
                                    <view v-for="(item, itemIndex) in group.inspectMedData" :key="'inspect-' + itemIndex">
                                        {{ item.medDesc || item.itemDesc || item.ordDesc }} {{ item.medSpec || item.spec }} x{{ item.medQty || item.qty || '' }}{{ item.medUnit || item.unit || '' }}
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="empty-text" v-else>暂无医嘱处方数据</view>
                    </view>
                </view>

                <view class="timeline-item">
                    <view class="dot"></view>
                    <view class="section-card">
                        <view class="section-title">发药 / 配送</view>
                        <view v-if="dispenseVisible">
                            <view class="info-row" v-for="field in drugStatusFields" :key="field.key">
                                <text class="info-label">{{ field.label }}</text>
                                <text class="info-value">{{ field.value }}</text>
                            </view>
                            <view class="sub-section" v-if="filteredDrugArr.length > 0">
                                <view class="sub-title">药品明细</view>
                                <view class="drug-group" v-for="(group, index) in filteredDrugArr" :key="index">
                                    <view class="drug-loc">{{ group.locDesc }}{{ group.phaWin ? '(' + group.phaWin + ')' : '' }}</view>
                                    <view class="drug-row" v-for="(drug, drugIndex) in group.drugData || []" :key="drugIndex">
                                        <text>{{ drug.medDesc }} {{ drug.medSpec }}</text>
                                        <text>x{{ drug.medQty }}{{ drug.medUnit }}</text>
                                    </view>
                                </view>
                            </view>
                            <view class="logistics-action" v-if="logisticsSteps.length > 0" @tap="showLogisticsPopup">查看物流详情</view>
                        </view>
                        <view class="empty-text" v-else>暂无发药配送记录</view>
                    </view>
                </view>
            </view>
        </scroll-view>
    
        <van-popup :show="logisticsPopupShow" @close="closeLogisticsPopup" custom-style="height: 70%; width: 94%">
            <view class="logistics-view">
                <view class="logistics-head">
                    <text class="logistics-title">物流信息</text>
                    <view class="logistics-confirm" @tap.stop="closeLogisticsPopup">确定</view>
                </view>
                <view class="logistics-content">
                    <uni-steps :options="logisticsSteps" active-color="#3478F7" :active="0" direction="column" />
                </view>
            </view>
        </van-popup>
    </view>
</template>

<script>
import $http from '@/utils/https';
import NavBar from '@/components/navBar/index.vue';
import Popup from '@/components/popup/index.vue';

const app = getApp();

export default {
    components: {
        'nav-bar': NavBar,
        'van-popup': Popup
    },
    data() {
        return {
            height: app.globalData.height,
            navbarData: {
                isGoHome: true,
                isGoBack: true,
                title: '就诊历程详情'
            },
            options: {},
            userData: {},
            detailInfo: {},
            symptomInfo: {},
            serviceType: '线上门诊',
            appointmentFields: [],
            appointmentImages: [],
            recordingFiles: [],
            chats: [],
            chatExpanded: false,
            chatImages: [],
            moreMsgFlag: 'N',
            lastMsgID: '',
            medicalRecordTemplateID: '137',
            medicalRecord: {},
            medicalRecordFields: [],
            medicalRecordExpanded: false,
            diagnoseList: [],
            orderPrescList: [],
            admInfo: {},
            orderObj: {},
            addressObj: {},
            drugArr: [],
            logisticsSteps: [],
            logisticsPopupShow: false
        };
    },
    onLoad(options) {
        this.setData(
            {
                options,
                userData: this.$cache.get('userData') || {},
                serviceType: options.serviceType || '线上门诊'
            },
            () => {
                this.queryDetail();
                this.queryMedicalRecord();
                this.queryOrder();
            }
        );
    },
    methods: {
        queryDetail() {
            const { options, userData } = this;
            const data = {
                params: [
                    {
                        patID: userData.hisPatID || '',
                        typeCode: [],
                        admID: options.admID || undefined,
                        consultID: options.consultID || undefined,
                        consultTypeID: options.consultTypeID || undefined
                    }
                ]
            };
            $http.post('urlS', this, {
                code: '02090009',
                data,
                namespace: 'Y',
                success: function (res) {
                    if (+res.errorCode === 0) {
                        const rows = res.result && res.result.rows instanceof Array ? res.result.rows : [];
                        const info = this.findCurrentRecord(rows);
                        const symptomInfo = info && info.patSymptomInfo ? info.patSymptomInfo : {};
                        this.setData(
                            {
                                detailInfo: info || {},
                                symptomInfo,
                                serviceType: this.normalizeServiceType(info),
                                appointmentFields: this.buildAppointmentFields(symptomInfo),
                                appointmentImages: this.extractImages(symptomInfo),
                                recordingFiles: this.extractRecordings(info, symptomInfo)
                            },
                            () => {
                                this.queryChat();
                            }
                        );
                    }
                }
            });
        },
        findCurrentRecord(rows) {
            const { options } = this;
            if (rows.length === 0) return {};
            if (options.admID) {
                const target = rows.find((item) => String(item.admID) === String(options.admID));
                if (target) return target;
            }
            return rows[0];
        },
        normalizeServiceType(info) {
            const text = [info && info.consultType, info && info.consultTypeDesc, info && info.businessDesc].filter(Boolean).join('');
            return text.indexOf('图文') > -1 ? '图文问诊' : '线上门诊';
        },
        buildAppointmentFields(symptomInfo) {
            const labelMap = {
                patName: '就诊人',
                patSex: '性别',
                patSexDesc: '性别',
                patAge: '年龄',
                createDate: '创建日期',
                createTime: '创建时间',
                createDateTime: '创建时间',
                orderTime: '预约时间',
                consultationDate: '申请时间',
                symptom: '咨询内容',
                illnessTime: '患病时间',
                pastMedicalHistory: '既往病史',
                AllergyFlag: '是否药物过敏',
                allergyFlag: '是否药物过敏',
                AllergyDesc: '过敏药物',
                allergyDesc: '过敏药物',
                DiseaseDesc: '疾病描述',
                diseaseDesc: '疾病描述',
                visitedFlag: '是否线下就诊过',
                diagnosisDesc: '线下诊断名称',
                occupationDesc: '职业',
                inquirerName: '问诊人',
                relationDesc: '与就诊人关系'
            };
            const hiddenKeys = ['imageAddress', 'imageData', 'appointID'];
            const fields = [];
            Object.keys(labelMap).forEach((key) => {
                const value = symptomInfo ? symptomInfo[key] : '';
                if (this.hasValue(value)) {
                    fields.push({
                        key,
                        label: labelMap[key],
                        value: this.formatValue(key, value)
                    });
                }
            });
            Object.keys(symptomInfo || {}).forEach((key) => {
                if (labelMap[key] || hiddenKeys.indexOf(key) > -1 || /ID$|Id$|No$/.test(key)) return;
                const value = symptomInfo[key];
                if (this.hasValue(value) && typeof value !== 'object') {
                    fields.push({
                        key,
                        label: key,
                        value: this.formatValue(key, value)
                    });
                }
            });
            return fields;
        },
        formatValue(key, value) {
            if (key === 'AllergyFlag' || key === 'allergyFlag' || key === 'visitedFlag') {
                if (value === 'Y') return '是';
                if (value === 'N') return '否';
            }
            if (key === 'patSex') {
                if (value === 'M' || value === '1') return '男';
                if (value === 'F' || value === '2') return '女';
            }
            return String(value);
        },
        hasValue(value) {
            if (value === undefined || value === null) return false;
            if (value instanceof Array) return value.length > 0;
            if (typeof value === 'object') return Object.keys(value).length > 0;
            return String(value).trim() !== '';
        },
        extractImages(symptomInfo) {
            const images = [];
            if (symptomInfo && symptomInfo.imageData instanceof Array) {
                images.push(...symptomInfo.imageData.filter(Boolean));
            }
            if (symptomInfo && symptomInfo.imageAddress) {
                images.push(...String(symptomInfo.imageAddress).split('&').filter(Boolean));
            }
            return images;
        },
        extractRecordings(info, symptomInfo) {
            const source = {
                ...(info || {}),
                ...(symptomInfo || {})
            };
            const keys = ['recordUrl', 'recordingUrl', 'videoUrl', 'fileUrl', 'recordFileUrl'];
            return keys
                .filter((key) => source[key])
                .map((key) => ({
                    name: key,
                    url: source[key]
                }));
        },
        queryChat() {
            const { detailInfo, userData, lastMsgID } = this;
            const admID = this.options.admID || detailInfo.admID || '';
            const toUser = detailInfo.toUserID || this.options.toUser || '';
            const frUser = userData.imUserID || '';
            if (!admID || !toUser || !frUser) {
                return;
            }
            const data = {
                params: [
                    {
                        admID,
                        frUser,
                        toUser,
                        lastMsgID
                    }
                ]
            };
            $http.post('urlS', this, {
                code: '02090005',
                data,
                namespace: 'Y',
                success: function (res) {
                    if (+res.errorCode === 0) {
                        const msgData = res.result && res.result.msgData instanceof Array ? res.result.msgData : [];
                        const chats = lastMsgID ? [...msgData, ...this.chats] : msgData;
                        this.setData({
                            chats,
                            moreMsgFlag: res.result.moreMsgFlag || 'N',
                            chatImages: chats.filter((item) => item.picture).map((item) => item.picture)
                        });
                    }
                }
            });
        },
        loadMoreChat() {
            if (!(this.chats && this.chats.length > 0)) return;
            this.setData(
                {
                    lastMsgID: this.chats[0].msgID || ''
                },
                () => {
                    this.queryChat();
                }
            );
        },
        toggleChat() {
            this.setData({
                chatExpanded: !this.chatExpanded
            });
        },
        toggleMedicalRecord() {
            this.setData({
                medicalRecordExpanded: !this.medicalRecordExpanded
            });
        },
        queryMedicalRecord() {
            const admID = this.options.admID || '';
            if (!admID) return;
            const data = {
                params: [
                    {
                        IEMRTemplateID: this.options.IEMRTemplateID || this.medicalRecordTemplateID,
                        admID
                    }
                ]
            };
            $http.post('urlS', this, {
                code: '10020002',
                data,
                namespace: 'Y',
                success: function (res) {
                    if (+res.errorCode === 0) {
                        const record = res.result || [];
                        this.setData({
                            medicalRecord: record,
                            medicalRecordFields: this.buildMedicalRecordFields(record)
                        });
                    }
                }
            });
        },
        buildMedicalRecordFields(record) {
            const rows = record instanceof Array ? record : [];
            return rows
                .filter((item) => this.hasValue(item.IEMRTempElementDesc) && this.hasValue(item.IEMRTempElementData))
                .map((item, index) => ({
                    key: item.IEMRTempElementID || `${item.IEMRTempElementDesc}-${index}`,
                    label: item.IEMRTempElementDesc,
                    value: item.IEMRTempElementData
                }));
        },
        queryOrder() {
            const admID = this.options.admID || '';
            if (!admID) return;
            const data = {
                params: [
                    {
                        orderType: 'A',
                        admID
                    }
                ]
            };
            $http.post('urlS', this, {
                code: '01050003',
                data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        const rows = res.result instanceof Array ? res.result : [];
                        const orderObj = this.resolveOrderByAdmID(rows, admID);
                        this.setData(
                            {
                                orderObj,
                                admInfo: this.buildAdmInfo(orderObj),
                                diagnoseList: this.buildDiagnoseList(rows, admID)
                            },
                            () => {
                                this.queryDrug();
                                this.queryLogistics();
                            }
                        );
                    }
                }
            });
        },
        resolveOrderByAdmID(rows, admID) {
            const list = rows || [];
            const matchedRows = list.filter((item) => item && String(item.admID) === String(admID));
            const sourceRows = matchedRows.length > 0 ? matchedRows : list;
            return sourceRows.find((item) => item && item.payTradeNum) || sourceRows.find((item) => item && item.prescribeTradeNum) || sourceRows[0] || {};
        },
        buildDiagnoseList(rows, admID) {
            const matchedRows = (rows || []).filter((item) => !admID || String(item.admID) === String(admID));
            const sourceRows = matchedRows.length > 0 ? matchedRows : rows || [];
            const values = [];
            sourceRows.forEach((item) => {
                const value = item.diagDesc || item.diagnose || item.diag || item.diagnosis;
                if (this.hasValue(value) && values.indexOf(value) === -1) values.push(value);
            });
            return values.map((value, index) => ({
                key: `diagnose-${index}`,
                diag: value
            }));
        },
        buildAdmInfo(orderObj) {
            if (!orderObj) return {};
            return {
                admLocDesc: orderObj.admLocDesc,
                admDocDesc: orderObj.admDocDesc,
                admDate: orderObj.admDate || (orderObj.admDateTime ? String(orderObj.admDateTime).split(' ')[0] : '')
            };
        },
        queryDrug() {
            const orderObj = this.orderObj || {};
            if (!(orderObj.payTradeNum || orderObj.prescribeTradeNum)) return;
            const data = {
                params: [
                    {
                        payTradeNum: orderObj.orderType === 'P' ? orderObj.payTradeNum : '',
                        hospCode: this.userData.hisHospID,
                        userCode: 'wxsf',
                        prescribeTradeNum: orderObj.orderType === 'P' ? '' : orderObj.prescribeTradeNum
                    }
                ]
            };
            $http.post('urlS', this, {
                code: '130982',
                data,
                namespace: 'UPP',
                success: function (res) {
                    if (+res.errorCode === 0) {
                        this.setData({
                            drugArr: res.result && res.result.data ? res.result.data : []
                        });
                    }
                }
            });
        },
        showLogisticsPopup() {
            if (!(this.logisticsSteps && this.logisticsSteps.length > 0)) return;
            this.setData({
                logisticsPopupShow: true
            });
        },
        closeLogisticsPopup() {
            this.setData({
                logisticsPopupShow: false
            });
        },
        queryLogistics() {
            const orderObj = this.orderObj || {};
            if (!orderObj.payTradeNum) return;
            const data = {
                params: [
                    {
                        payTradeNum: orderObj.payTradeNum
                    }
                ]
            };
            $http.post('urlS', this, {
                code: '01050009',
                data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        const result = res.result || {};
                        const logisticsSteps = result.expInfo && result.expInfo.length > 0 ? result.expInfo[0].routeData || [] : [];
                        this.setData({
                            addressObj: result,
                            logisticsSteps
                        });
                    }
                }
            });
        },
        formatPayStatus(orderObj) {
            if (!orderObj) return '';
            if (orderObj.payStatus) return orderObj.payStatus;
            if (orderObj.orderType === 'B' || orderObj.orderType === 'NB') return '待缴费';
            if (orderObj.orderType === 'P') return '已缴费';
            return '';
        },
        formatPresc(item) {
            return [item.spec, item.qtyUomStr, item.doseUnitStr, item.frequenceDesc, item.usageDesc, item.durStr, item.note]
                .filter(Boolean)
                .join(' ');
        },

        extractExpressNo(title) {
            if (!title || String(title).indexOf('：') === -1) return '';
            return String(title).split('：')[1] || '';
        },
        previewImages(current, urls) {
            if (!(urls && urls.length > 0)) return;
            uni.previewImage({
                current,
                urls
            });
        }
    },
    computed: {
        filteredDrugArr() {
            const feeKeywords = ['挂号费', '诊查费', '诊察费', '互联网挂号费', '问诊费'];
            return (this.drugArr || [])
                .map((group) => {
                    const drugData = (group.drugData || []).filter((drug) => {
                        const name = [drug.medDesc, drug.itemDesc, drug.ordDesc].filter(Boolean).join('');
                        if (!name) return false;
                        return !feeKeywords.some((keyword) => name.indexOf(keyword) > -1);
                    });
                    const inspectMedData = (group.inspectMedData || []).filter((item) => {
                        const name = [item.medDesc, item.itemDesc, item.ordDesc].filter(Boolean).join('');
                        if (!name) return false;
                        return !feeKeywords.some((keyword) => name.indexOf(keyword) > -1);
                    });
                    return {
                        ...group,
                        drugData,
                        inspectMedData
                    };
                })
                .filter((group) => (group.drugData && group.drugData.length > 0) || (group.inspectMedData && group.inspectMedData.length > 0));
        },
        dispenseVisible() {
            return this.drugStatusFields.length > 0 || this.filteredDrugArr.length > 0 || this.logisticsSteps.length > 0;
        },
        drugStatusFields() {
            const addressObj = this.addressObj || {};
            const expressNo = addressObj.expressNo || this.extractExpressNo(addressObj.title);
            const hasDispenseInfo = [
                addressObj.drugStatus,
                addressObj.selfPickFlag,
                addressObj.takeDrugCode,
                addressObj.receiveName,
                addressObj.receivePhone,
                addressObj.receiveAddressDetails,
                expressNo
            ].some((value) => this.hasValue(value));
            if (!hasDispenseInfo) return [];
            const fields = [
                { key: 'payStatus', label: '\u7f34\u8d39\u72b6\u6001', value: this.formatPayStatus(this.orderObj) },
                { key: 'drugStatus', label: '\u53d1\u836f/\u914d\u9001\u72b6\u6001', value: addressObj.drugStatus },
                { key: 'selfPickFlag', label: '\u53d6\u836f\u65b9\u5f0f', value: addressObj.selfPickFlag === 'Y' ? '\u81ea\u63d0' : addressObj.selfPickFlag === 'N' ? '\u7269\u6d41\u914d\u9001' : '' },
                { key: 'takeDrugCode', label: '\u53d6\u836f\u7801', value: addressObj.takeDrugCode },
                { key: 'receiveName', label: '\u6536\u4ef6\u4eba', value: addressObj.receiveName },
                { key: 'receivePhone', label: '\u8054\u7cfb\u7535\u8bdd', value: addressObj.receivePhone },
                { key: 'receiveAddressDetails', label: '\u914d\u9001\u5730\u5740', value: addressObj.receiveAddressDetails },
                { key: 'expressNo', label: '\u7269\u6d41\u5355\u53f7', value: expressNo }
            ];
            return fields.filter((item) => this.hasValue(item.value));
        }
    }
};
</script>

<style lang="scss" scoped>
.visit-history-detail {
    min-height: 100vh;
    background: #f6f6f6;
}

.detail-scroll {
    box-sizing: border-box;
    height: 100vh;
    padding-bottom: 40rpx;
}

.summary-card,
.section-card {
    margin: 20rpx 30rpx;
    padding: 28rpx;
    background: #fff;
    border-radius: 8rpx;
}

.summary-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #eee;
}

.doctor-name {
    font-size: 34rpx;
    font-weight: 600;
    color: #333;
}

.loc-desc {
    margin-left: 16rpx;
    font-size: 26rpx;
    color: #999;
}

.service-tag {
    color: #007aff;
    background: #e8f3ff;
    font-size: 24rpx;
    padding: 8rpx 16rpx;
    border-radius: 999rpx;
}

.summary-line {
    display: flex;
    justify-content: space-between;
    padding-top: 18rpx;
    font-size: 28rpx;
    color: #666;
}

.summary-line text:last-child {
    color: #333;
}

.timeline {
    position: relative;
}

.timeline-item {
    position: relative;
    padding-left: 28rpx;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: 42rpx;
    top: 0;
    bottom: 0;
    width: 2rpx;
    background: #d8e8ff;
}

.dot {
    position: absolute;
    left: 32rpx;
    top: 48rpx;
    width: 22rpx;
    height: 22rpx;
    border-radius: 50%;
    background: #007aff;
    z-index: 1;
}

.section-card {
    margin-left: 30rpx;
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-title {
    color: #333;
    font-size: 32rpx;
    font-weight: 600;
    margin-bottom: 20rpx;
}

.section-action {
    color: #007aff;
    font-size: 26rpx;
    margin-bottom: 20rpx;
}

.section-actions {
    display: flex;
    align-items: center;
}

.section-actions .section-action {
    margin-left: 24rpx;
}

.info-row {
    display: flex;
    padding: 14rpx 0;
    border-bottom: 1rpx solid #f2f2f2;
    font-size: 28rpx;
}

.info-label {
    flex: 0 0 180rpx;
    color: #666;
}

.info-value {
    flex: 1;
    color: #333;
    line-height: 40rpx;
    word-break: break-all;
}

.image-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20rpx;
}

.image-list image {
    width: 152rpx;
    height: 152rpx;
    margin-right: 16rpx;
    margin-bottom: 16rpx;
    border-radius: 8rpx;
}

.empty-text {
    color: #999;
    font-size: 28rpx;
    line-height: 42rpx;
}

.fold-tip {
    color: #999;
    font-size: 28rpx;
    padding: 18rpx 0 4rpx;
}

.chat-list {
    padding-top: 4rpx;
}

.chat-item {
    margin-bottom: 18rpx;
}

.chat-item.right {
    text-align: right;
}

.chat-bubble {
    display: inline-block;
    max-width: 78%;
    text-align: left;
    padding: 18rpx;
    border-radius: 8rpx;
    background: #f3f8ff;
    color: #333;
    font-size: 28rpx;
    line-height: 40rpx;
    word-break: break-all;
}

.chat-item.right .chat-bubble {
    background: #007aff;
    color: #fff;
}

.chat-bubble image {
    width: 240rpx;
    border-radius: 8rpx;
}

.chat-time {
    text-align: center;
    color: #aaa;
    font-size: 24rpx;
}

.record-video {
    width: 100%;
    height: 360rpx;
    border-radius: 8rpx;
    overflow: hidden;
}

.sub-section {
    margin-top: 20rpx;
}

.sub-title {
    color: #666;
    font-size: 28rpx;
    font-weight: 600;
    margin-bottom: 12rpx;
}

.pill-list {
    display: flex;
    flex-wrap: wrap;
}

.pill-list text {
    margin: 0 12rpx 12rpx 0;
    padding: 8rpx 16rpx;
    color: #007aff;
    background: #e8f3ff;
    border-radius: 999rpx;
    font-size: 26rpx;
}

.presc-item,
.drug-group {
    padding: 18rpx;
    margin-bottom: 14rpx;
    background: #f7f8fa;
    border-radius: 8rpx;
}

.presc-name,
.drug-loc {
    color: #333;
    font-size: 28rpx;
    font-weight: 600;
    margin-bottom: 8rpx;
}

.presc-desc,
.child-list,
.drug-row,
.step-row {
    color: #666;
    font-size: 26rpx;
    line-height: 38rpx;
}

.drug-row {
    display: flex;
    justify-content: space-between;
}

.step-row {
    padding: 14rpx 0;
    border-bottom: 1rpx solid #f2f2f2;
}

.step-time {
    color: #999;
    margin-bottom: 6rpx;
}

.step-text {
    color: #333;
}

.logistics-action {
    margin-top: 18rpx;
    color: #007aff;
    font-size: 28rpx;
    text-align: right;
}

.logistics-view {
    box-sizing: border-box;
    height: 100%;
    background: #fff;
    padding: 0 20rpx 40rpx 0;
}

.logistics-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;
}

.logistics-title {
    color: #333;
    font-size: 32rpx;
    font-weight: 600;
}

.logistics-confirm {
    color: #3478f7;
    font-size: 28rpx;
}

.logistics-content {
    height: calc(100% - 84rpx);
    overflow: auto;
}
</style>
