<template>
    <view>
        <!-- pages/entryWrite/page/Entry/prescription/addPrescription/customDiagnostics/grass/grassOrderSet/grassOrderSet.vue -->
        <nav-bar :navbarData="navbarData"></nav-bar>
        <view class="grassOrderSet">
            <!-- 头部：已选草药入口 -->
            <view class="gos-header">
                <view class="gos-header__title">
                    <text class="gos-header__label">草药医嘱套</text>
                </view>
                <view class="gos-header__selected" @tap="toggleSelectedPanel">
                    <text class="gos-header__selected-text">已选 {{ selectedCount }} 味</text>
                    <text class="gos-header__selected-arrow">{{ showSelectedPanel ? '收起' : '查看' }}</text>
                </view>
            </view>

            <!-- 已选草药浮层 -->
            <view class="gos-selected-panel" v-if="showSelectedPanel">
                <view class="gos-selected-panel__head">
                    <text class="gos-selected-panel__title">已勾选草药</text>
                    <text class="gos-selected-panel__clear" @tap="clearSelected" v-if="selectedList.length">清空</text>
                </view>
                <scroll-view scroll-y class="gos-selected-panel__body">
                    <view class="gos-selected-panel__empty" v-if="selectedList.length <= 0">暂未勾选草药</view>
                    <view class="gos-selected-item" v-for="(item, index) in selectedList" :key="index">
                        <view class="gos-selected-item__info">
                            <text class="gos-selected-item__name">{{ item.ordDesc }}</text>
                            <text class="gos-selected-item__dose" v-if="item.ordDose">【{{ item.ordDose }}{{ item.ordDoseUnitDesc }}】</text>
                            <text class="gos-selected-item__price" v-if="item.price">¥{{ item.price }}</text>
                        </view>
                        <text class="gos-selected-item__del" @tap="removeSelected" :data-id="item.medID">移除</text>
                    </view>
                </scroll-view>
            </view>

            <!-- 内容区：左右布局 -->
            <view class="gos-body">
                <!-- 左侧：分类Tab + 医嘱套列表 -->
                <view class="gos-left">
                    <!-- 3大分类 Tab -->
                    <scroll-view scroll-x class="gos-left__tabs" v-if="radioList.length">
                        <view
                            v-for="(item, index) in radioList"
                            :key="index"
                            :class="activeRadio === index ? 'gos-left__tab gos-left__tab--active' : 'gos-left__tab'"
                            @tap="onRadioChange"
                            :data-index="index"
                        >
                            <text>{{ item.descripts }}</text>
                        </view>
                    </scroll-view>

                    <!-- 左侧搜索 -->
                    <view class="gos-left__search">
                        <input class="gos-left__search-input" placeholder="搜索医嘱套" :value="leftKeyword" @input="onLeftSearch" confirm-type="search" />
                        <text class="gos-left__search-icon" v-if="leftKeyword" @tap="clearLeftSearch">×</text>
                    </view>

                    <!-- 医嘱套分类列表 -->
                    <scroll-view scroll-y class="gos-left__list">
                        <view class="gos-left__empty" v-if="filteredSetList.length <= 0">暂无医嘱套</view>
                        <view
                            v-for="(item, index) in filteredSetList"
                            :key="index"
                            :class="medRecodeIndex == item.ordSetID ? 'gos-left__item gos-left__item--active' : 'gos-left__item'"
                            @tap="onSelectSet"
                            :data-id="item.ordSetID"
                            :data-desc="item.ordSetDesc"
                            :data-index="index"
                        >
                            <view class="gos-left__item-name">{{ item.ordSetDesc }}</view>
                        </view>
                    </scroll-view>
                </view>

                <!-- 右侧：草药明细 -->
                <view class="gos-right">
                    <!-- 右侧搜索 -->
                    <view class="gos-right__search">
                        <input class="gos-right__search-input" placeholder="搜索草药" :value="rightKeyword" @input="onRightSearch" confirm-type="search" />
                        <text class="gos-right__search-icon" v-if="rightKeyword" @tap="clearRightSearch">×</text>
                    </view>

                    <!-- 全选栏 -->
                    <view class="gos-right__head" v-if="hasDetail">
                        <view class="gos-right__usage" v-if="currentSetDesc">
                            <text class="gos-right__usage-label"></text>
                        </view>
                        <view class="gos-right__selectall" @tap="checkall">
                            <view class="gos-list__checkbox" :class="{ 'gos-list__checkbox--checked': checkedAll }">
                                <text v-if="checkedAll" class="gos-list__check-icon">✓</text>
                            </view>
                            <text>{{ checkedAll ? '取消' : '全选' }}</text>
                        </view>
                    </view>

                    <scroll-view scroll-y class="gos-right__body">
                        <view class="gos-right__empty" v-if="!hasDetail">
                            <view class="gos-right__empty-icon">∅</view>
                            <view>暂无草药明细</view>
                            <view class="gos-right__empty-tip">请选择左侧医嘱套</view>
                        </view>
                        <view class="gos-list" v-if="hasDetail">
                            <view
                                class="gos-list__item"
                                v-for="(item, index) in filteredDetail"
                                :key="item.medID || index"
                                @tap="toggleItem(item)"
                            >
                                <view class="gos-list__item-info">
                                    <view class="gos-list__item-row">
                                        <text class="gos-list__item-name">{{ item.ordDesc }}</text>
                                        <text class="gos-list__item-dose" v-if="item.ordDose">【{{ item.ordDose }}{{ item.ordDoseUnitDesc }}】</text>
                                    </view>
                                    <text class="gos-list__item-price" v-if="item.price">¥{{ item.price }}</text>
                                </view>
                               
                                <view class="gos-list__checkbox" :class="{ 'gos-list__checkbox--checked': isSelected(item.medID) }">
                                    <text v-if="isSelected(item.medID)" class="gos-list__check-icon">✓</text>
                                </view>
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </view>

            <!-- 底部保存按钮 -->
            <view class="gos-footer">
                <button class="gos-footer__btn" @tap="savePres" :disabled="isLoading">{{ isLoading ? '保存中' : '保存到医嘱列表' }}</button>
            </view>
        </view>
        <van-dialog id="van-dialog" />
        <van-toast id="van-toast" />
    </view>
</template>

<script>
import Cache from '../../../../../../../../../utils/cache';
import navBar from '@/pages/components/navbar/index';
// pages/entryWrite/page/Entry/prescription/addPrescription/customDiagnostics/grass/grassOrderSet/grassOrderSet.js
import { $http } from '../../../../../../../../../config/https';
import Toast from '../../../../../../../../../utils/toast';
const app = getApp();
export default {
    components: {
        navBar
    },
    data() {
        return {
            // 导航
            navbarData: {
                isGoBack: true,
                background: '',
                title: '草药医嘱套',
                bottom: false
            },
            height: app.globalData.height,

            // 入参
            gList: [], // 已有草药列表（进入时带回，避免重复）
            recLocID: '', // 执行科室ID
            herbalFormID: '', // 剂型ID

            // 3大分类 Tab
            radioList: [], // 03050272 返回 个人/科室/全院
            activeRadio: 0, // 当前选中的 Tab 索引

            // 左侧医嘱套列表
            setList: [], // 当前 Tab 下的医嘱套（平铺，来自03050289的children展开）
            leftKeyword: '', // 左侧搜索关键字
            medRecodeIndex: '', // 当前选中医嘱套ID

            // 右侧明细
            medRecodeDateil: [], // 当前医嘱套明细（来自03050076的data）
            currentSetDesc: '', // 当前医嘱套名称（头部展示）
            rightKeyword: '', // 右侧搜索关键字

            // 勾选
            selectedArr: [], // 右侧勾选的 medID 列表
            selectedList: [], // 已勾选的完整明细对象（跨医嘱套保留）
            checkedAll: false,

            // UI
            showSelectedPanel: false, // 已选面板展开
            isLoading: false
        };
    },
    computed: {
        // 左侧过滤后的医嘱套
        filteredSetList: function () {
            let kw = (this.leftKeyword || '').trim().toLowerCase();
            if (!kw) return this.setList;
            return this.setList.filter((item) => {
                let desc = (item.ordSetDesc || '').toLowerCase();
                let alias = (item.ordSetAlias || '').toLowerCase();
                let code = (item.ordSetCode || '').toLowerCase();
                return desc.indexOf(kw) > -1 || alias.indexOf(kw) > -1 || code.indexOf(kw) > -1;
            });
        },
        // 右侧过滤后的明细
        filteredDetail: function () {
            let kw = (this.rightKeyword || '').trim().toLowerCase();
            if (!kw) return this.medRecodeDateil;
            return this.medRecodeDateil.filter((item) => {
                let desc = (item.ordDesc || '').toLowerCase();
                return desc.indexOf(kw) > -1;
            });
        },
        // 是否有右侧明细
        hasDetail: function () {
            return this.medRecodeDateil && this.medRecodeDateil.length > 0;
        },
        // 已选数量
        selectedCount: function () {
            return this.selectedList.length;
        }
    },
    onLoad: function (options) {
        this.optionsUrl(options);
    },
    onReady: function () {
        this.loadRadioList(); // 加载3大分类
    },
    methods: {
        // 接收 url 传参
        optionsUrl: function (options) {
            try {
                this.gList = options.gList ? JSON.parse(decodeURIComponent(options.gList)) : [];
            } catch (e) {
                this.gList = [];
            }
            this.recLocID = options.recLocID ? decodeURIComponent(options.recLocID) : '';
            this.herbalFormID = options.herbalFormID ? decodeURIComponent(options.herbalFormID) : '';
        },

        // 0.分类radio（03050272）：个人/科室/全院
        loadRadioList: function () {
            let userData = Cache.get('userData') || {};
            let { hospID, userID, locID } = userData;
            $http.post('urlDeault', this, {
                code: '03050272',
                data: {
                    params: [
                        {
                            hospID: hospID || '',
                            userID: userID || '',
                            locID: locID || ''
                        }
                    ]
                },
                success: function (res) {
                    if (res.errorCode === '0') {
                        let list = res.result || [];
                        // 默认选中最后一条
                        let defaultIndex = list.length > 0 ? list.length - 1 : 0;
                        this.setData(
                            {
                                radioList: list,
                                activeRadio: defaultIndex
                            },
                            () => {
                                this.loadSetList();
                            }
                        );
                    }
                }
            });
        },

        // 1.草药医嘱套分类（03050289）：根据 authRangeID 获取医嘱套列表
        loadSetList: function () {
            let userData = Cache.get('userData') || {};
            let { hospID, userID, locID, groupID } = userData;
            let curRadio = this.radioList[this.activeRadio] || {};
            let authRangeID = curRadio.id || '';
            $http.post('urlDeault', this, {
                code: '03050289',
                data: {
                    params: [
                        {
                            userID: userID || '',
                            locID: locID || '',
                            hospID: hospID || '',
                            groupID: groupID || '',
                            authRangeID: authRangeID,
                            activeFlag: 'Y'
                        }
                    ]
                },
                success: function (res) {
                    if (res.errorCode === '0') {
                        let data = (res.data && res.data.list) || [];
                        // 将分组 children 平铺成医嘱套列表
                        let flatList = [];
                        data.forEach((group) => {
                            if (group.children && group.children.length) {
                                group.children.forEach((cell) => {
                                    flatList.push(cell);
                                });
                            }
                        });
                        this.setData(
                            {
                                setList: flatList,
                                medRecodeIndex: '',
                                medRecodeDateil: [],
                                currentSetDesc: '',
                                checkedAll: false,
                                selectedArr: [],
                                selectedList: [],
                                rightKeyword: ''
                            },
                            () => {
                                // 默认选中第一个医嘱套
                                if (flatList.length > 0) {
                                    let first = flatList[0];
                                    this.onSelectSet({
                                        currentTarget: {
                                            dataset: {
                                                id: first.ordSetID,
                                                desc: first.ordSetDesc,
                                                index: 0
                                            }
                                        }
                                    });
                                }
                            }
                        );
                    }
                }
            });
        },

        // 切换 3大分类 Tab
        onRadioChange: function (e) {
            let { index } = e.currentTarget.dataset;
            if (index === this.activeRadio) return;
            this.setData(
                {
                    activeRadio: index,
                    leftKeyword: ''
                },
                () => {
                    this.loadSetList();
                }
            );
        },

        // 点击左侧某个医嘱套 → 加载右侧草药明细
        onSelectSet: function (e) {
            let { id, desc } = e.currentTarget.dataset;
            this.setData({
                medRecodeIndex: id,
                currentSetDesc: desc || '',
                rightKeyword: '',
                medRecodeDateil: [],
                selectedArr: [],
                selectedList: [],
                checkedAll: false
            });
            this.loadDetail(id);
        },

        // 2.草药分类下具体草药（03050076）
        loadDetail: function (ordSetID) {
            if (!ordSetID) return;
            let userData = Cache.get('userData') || {};
            let patientData = Cache.get('patientData') || {};
            let { hospID, userID, locID, groupID } = userData;
            let { admID } = patientData;
            $http.post('urlDeault', this, {
                code: '03050076',
                data: {
                    params: [
                        {
                            recLocID: this.recLocID || '',
                            hospID: hospID || '',
                            groupID: groupID || '',
                            userID: userID || '',
                            locID: locID || '',
                            admID: admID || '',
                            orders: [
                                {
                                    ordSetID: ordSetID
                                }
                            ]
                        }
                    ]
                },
                success: function (res) {
                    if (res.errorCode === '0') {
                        let detail = res.data || [];
                        // 计算当前医嘱套的全选状态
                        let allIds = detail.map((item) => item.medID);
                        let checkedAll = allIds.length > 0 && allIds.every((id) => this.selectedArr.includes(id));
                        this.setData({
                            medRecodeDateil: detail,
                            checkedAll: checkedAll
                        });
                    }
                }
            });
        },

        // 左侧搜索
        onLeftSearch: function (e) {
            this.setData({
                leftKeyword: e.detail.value
            });
        },
        clearLeftSearch: function () {
            this.setData({ leftKeyword: '' });
        },

        // 右侧搜索
        onRightSearch: function (e) {
            this.setData({
                rightKeyword: e.detail.value
            });
        },
        clearRightSearch: function () {
            this.setData({ rightKeyword: '' });
        },

        // 右侧勾选：是否选中
        isSelected: function (medID) {
            return this.selectedArr.indexOf(medID) > -1;
        },

        // 右侧勾选：切换某一项
        toggleItem: function (item) {
            let { selectedArr, selectedList, medRecodeDateil } = this;
            let id = item.medID;
            let idx = selectedArr.indexOf(id);
            let newSelectedArr, nextList;
            if (idx > -1) {
                // 取消勾选
                newSelectedArr = selectedArr.filter((sid) => sid !== id);
                nextList = selectedList.filter((s) => s.medID !== id);
            } else {
                // 勾选
                newSelectedArr = selectedArr.concat([id]);
                // 避免重复
                let exists = selectedList.some((s) => s.medID === id);
                nextList = exists ? selectedList.slice() : selectedList.concat([item]);
            }
            // 计算全选（基于全部明细，非过滤后的）
            let allIds = medRecodeDateil.map((m) => m.medID);
            let checkedAll = allIds.length > 0 && allIds.every((cid) => newSelectedArr.includes(cid));
            this.setData({
                selectedArr: newSelectedArr,
                selectedList: nextList,
                checkedAll: checkedAll
            });
        },

        // 全选/取消全选（针对当前医嘱套全部明细，非过滤后的）
        checkall: function () {
            let { medRecodeDateil, selectedArr, selectedList, checkedAll } = this;
            let curIds = medRecodeDateil.map((item) => item.medID);
            if (!checkedAll) {
                let addIds = curIds.filter((id) => !selectedArr.includes(id));
                let newSelectedArr = selectedArr.concat(addIds);
                let nextList = selectedList.filter((item) => !curIds.includes(item.medID));
                medRecodeDateil.forEach((item) => {
                    if (newSelectedArr.includes(item.medID)) {
                        nextList.push(item);
                    }
                });
                this.setData({
                    selectedArr: newSelectedArr,
                    selectedList: nextList,
                    checkedAll: true
                });
            } else {
                let newSelectedArr = selectedArr.filter((id) => !curIds.includes(id));
                let nextList = selectedList.filter((item) => !curIds.includes(item.medID));
                this.setData({
                    selectedArr: newSelectedArr,
                    selectedList: nextList,
                    checkedAll: false
                });
            }
        },

        // 切换已选面板
        toggleSelectedPanel: function () {
            this.setData({
                showSelectedPanel: !this.showSelectedPanel
            });
        },

        // 从已选面板移除某项
        removeSelected: function (e) {
            let { id } = e.currentTarget.dataset;
            let { selectedArr, selectedList, medRecodeDateil } = this;
            let newSelectedArr = selectedArr.filter((sid) => sid !== id);
            let nextList = selectedList.filter((item) => item.medID !== id);
            let allIds = medRecodeDateil.map((item) => item.medID);
            let checkedAll = allIds.length > 0 && allIds.every((cid) => newSelectedArr.includes(cid));
            this.setData({
                selectedArr: newSelectedArr,
                selectedList: nextList,
                checkedAll: checkedAll
            });
        },

        // 清空已选
        clearSelected: function () {
            this.setData({
                selectedArr: [],
                selectedList: [],
                checkedAll: false
            });
        },

        // 保存：把选中的明细转换成 grass 组件可用的 gList 格式，回传并返回
        savePres: function () {
            let { selectedList, gList } = this;
            if (selectedList.length <= 0) {
                Toast({
                    type: 'fail',
                    message: '请先勾选草药',
                    context: this
                });
                return;
            }
            this.setData({
                isLoading: true
            });

            // 转换为 grass 组件 gList 项格式
            let newGList = selectedList.map((item, i) => {
                let unitObj = (item.qtyUnitList && item.qtyUnitList[0]) || {};
                return {
                    searchSelect: {
                        medID: item.medID || '',
                        medDesc: item.ordDesc || ''
                    },
                    decoctMethod: item.decoctMethodID
                        ? {
                              id: item.decoctMethodID || '',
                              descripts: item.decoctMethodDesc || ''
                          }
                        : {},
                    comPrinciple: item.comPrincipleID
                        ? {
                              id: item.comPrincipleID || '',
                              code: item.comPrincipleCode || '',
                              descripts: item.comPrincipleDesc || ''
                          }
                        : {},
                    typeList: {
                        unitID: item.ordDoseUnitID || unitObj.unitID || '',
                        unitDesc: item.ordDoseUnitDesc || unitObj.unitDesc || ''
                    },
                    qtyUnitList: item.qtyUnitList || [],
                    jl: item.ordDose || '',
                    price: item.price || '',
                    key: i
                };
            });

            // 合并已有 gList（避免重复），与 grass.vue 的 setGListPush 保持一致
            let existIDs = {};
            gList.forEach((item) => {
                let mid = (item.searchSelect && item.searchSelect.medID) || '';
                if (mid) existIDs[mid] = true;
            });
            let merged = gList.slice();
            newGList.forEach((item) => {
                let mid = (item.searchSelect && item.searchSelect.medID) || '';
                if (mid && existIDs[mid]) return;
                if (mid) existIDs[mid] = true;
                merged.push(item);
            });

            // 通过祖父页面 addPrescription 的 setOrderSetPush 回传
            let pages = getCurrentPages();
            let prevPage = pages[pages.length - 2];
            let target = prevPage && (prevPage.$vm || prevPage);
            if (target && typeof target.setOrderSetPush === 'function') {
                target.setOrderSetPush(merged);
            } else if (target && typeof target.setGListPush === 'function') {
                // 兼容：若未实现 setOrderSetPush，回退到 setGListPush
                target.setGListPush(merged);
            }
            this.setData({
                isLoading: false
            });
            uni.navigateBack({
                delta: 1
            });
        }
    }
};
</script>
<style>
page {
    height: 100%;
}

.grassOrderSet {
    display: flex;
    flex-direction: column;
    margin-top: 2rpx;
    height: calc(100vh - 88rpx);
    background: #f4f7fb;
}

.gos-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16rpx 24rpx;
    background: #fff;
    border-bottom: 1rpx solid #edf1f6;
    flex-shrink: 0;
}

.gos-header__title {
    display: flex;
    align-items: center;
    gap: 12rpx;
}

.gos-header__label {
    color: #1f2937;
    font-size: 28rpx;
    font-weight: 600;
}

.gos-header__cat {
    color: #1687ff;
    font-size: 26rpx;
    background: #e8f3ff;
    border-radius: 999rpx;
    padding: 4rpx 16rpx;
    max-width: 360rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gos-header__selected {
    display: flex;
    align-items: center;
    gap: 8rpx;
}

.gos-header__selected-text {
    color: #4b5563;
    font-size: 26rpx;
}

.gos-header__selected-arrow {
    color: #1687ff;
    font-size: 26rpx;
    padding: 4rpx 12rpx;
    border: 1rpx solid #1687ff;
    border-radius: 999rpx;
}

.gos-selected-panel {
    background: #fff;
    border-bottom: 1rpx solid #edf1f6;
    flex-shrink: 0;
    max-height: 360rpx;
    display: flex;
    flex-direction: column;
}

.gos-selected-panel__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12rpx 24rpx;
    border-bottom: 1rpx solid #f2f4f7;
}

.gos-selected-panel__title {
    color: #1f2937;
    font-size: 26rpx;
    font-weight: 600;
}

.gos-selected-panel__clear {
    color: #f5222d;
    font-size: 24rpx;
}

.gos-selected-panel__body {
    flex: 1;
    min-height: 0;
    max-height: 300rpx;
}

.gos-selected-panel__empty {
    text-align: center;
    color: #9ca3af;
    font-size: 24rpx;
    padding: 30rpx 0;
}

.gos-selected-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12rpx 24rpx;
    border-bottom: 1rpx solid #f5f7fa;
}

.gos-selected-item__info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8rpx;
    flex-wrap: wrap;
}

.gos-selected-item__name {
    color: #1f2937;
    font-size: 26rpx;
    font-weight: 500;
}

.gos-selected-item__dose {
    color: #7b8794;
    font-size: 24rpx;
}

.gos-selected-item__price {
    color: #f5222d;
    font-size: 24rpx;
}

.gos-selected-item__del {
    color: #f5222d;
    font-size: 24rpx;
    padding: 4rpx 12rpx;
    border: 1rpx solid #f5222d;
    border-radius: 999rpx;
    flex-shrink: 0;
    margin-left: 12rpx;
}

.gos-body {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

/* ===== 左侧 ===== */
.gos-left {
    width: 38%;
    flex-shrink: 0;
    background: #fafbfc;
    border-right: 2rpx solid #eee;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.gos-left__tabs {
    flex-shrink: 0;
    white-space: nowrap;
    background: #fff;
    border-bottom: 1rpx solid #edf1f6;
}

.gos-left__tab {
    display: inline-block;
    padding: 16rpx 20rpx;
    font-size: 26rpx;
    color: #4b5563;
    position: relative;
}

.gos-left__tab--active {
    color: #1687ff;
    font-weight: 600;
}

.gos-left__tab--active::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 40rpx;
    height: 4rpx;
    background: #1687ff;
    border-radius: 2rpx;
}

.gos-left__tab-count {
    font-size: 22rpx;
    color: #9ca3af;
    margin-left: 2rpx;
}

.gos-left__tab--active .gos-left__tab-count {
    color: #1687ff;
}

.gos-left__search {
    flex-shrink: 0;
    position: relative;
    padding: 12rpx 16rpx;
    background: #fff;
    border-bottom: 1rpx solid #edf1f6;
}

.gos-left__search-input {
    width: 100%;
    height: 56rpx;
    background: #f4f7fb;
    border-radius: 28rpx;
    padding: 0 56rpx 0 24rpx;
    box-sizing: border-box;
    font-size: 24rpx;
    color: #1f2937;
}

.gos-left__search-icon {
    position: absolute;
    right: 24rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 32rpx;
    height: 32rpx;
    line-height: 32rpx;
    text-align: center;
    color: #9ca3af;
    font-size: 32rpx;
}

.gos-left__list {
    flex: 1;
    min-height: 0;
}

.gos-left__empty {
    text-align: center;
    color: #9ca3af;
    font-size: 24rpx;
    padding: 40rpx 0;
}

.gos-left__item {
    display: block;
    font-size: 26rpx;
    border-bottom: 1rpx solid #f2f2f2;
    font-weight: 400;
    padding: 20rpx 16rpx;
    color: #4b5563;
    line-height: 1.4;
    word-break: break-all;
}

.gos-left__item--active {
    display: block;
    font-size: 26rpx;
    border-bottom: 1rpx solid #f2f2f2;
    font-weight: 600;
    color: #1687ff;
    padding: 20rpx 16rpx;
    border-left: 6rpx solid #1687ff;
    background: #e8f3ff;
    line-height: 1.4;
    word-break: break-all;
}

.gos-left__item-name {
    color: inherit;
    font-size: 26rpx;
    font-weight: inherit;
    display: block;
}

.gos-left__item-meta {
    margin-top: 6rpx;
    display: flex;
    gap: 10rpx;
    flex-wrap: wrap;
}

.gos-left__item-user {
    color: #9ca3af;
    font-size: 22rpx;
}

.gos-left__item-status {
    color: #52c41a;
    font-size: 22rpx;
}

/* ===== 右侧 ===== */
.gos-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #fff;
}

.gos-right__search {
    flex-shrink: 0;
    position: relative;
    padding: 12rpx 20rpx;
    background: #fff;
    border-bottom: 1rpx solid #f2f4f7;
}

.gos-right__search-input {
    width: 100%;
    height: 56rpx;
    background: #f4f7fb;
    border-radius: 28rpx;
    padding: 0 56rpx 0 24rpx;
    box-sizing: border-box;
    font-size: 24rpx;
    color: #1f2937;
}

.gos-right__search-icon {
    position: absolute;
    right: 24rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 32rpx;
    height: 32rpx;
    line-height: 32rpx;
    text-align: center;
    color: #9ca3af;
    font-size: 32rpx;
}

.gos-right__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12rpx 20rpx;
    border-bottom: 1rpx solid #f2f4f7;
    flex-shrink: 0;
    background: #fafbfc;
}

.gos-right__usage {
    display: flex;
    align-items: center;
    gap: 6rpx;
    flex: 1;
    min-width: 0;
}

.gos-right__usage-label {
    color: #1f2937;
    font-size: 26rpx;
    font-weight: 600;
    flex-shrink: 0;
}

.gos-right__usage-value {
    color: #4b5563;
    font-size: 26rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gos-right__selectall {
    display: flex;
    align-items: center;
    gap: 10rpx;
    color: #1687ff;
    font-size: 26rpx;
    font-weight: 500;
    flex-shrink: 0;
}

.gos-right__body {
    flex: 1;
    min-height: 0;
}

.gos-right__empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 26rpx;
    padding: 80rpx 40rpx;
}

.gos-right__empty-icon {
    width: 120rpx;
    height: 120rpx;
    background: #f4f7fb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20rpx;
    font-size: 56rpx;
    color: #cbd5e1;
}

.gos-right__empty-tip {
    margin-top: 8rpx;
    font-size: 22rpx;
    color: #cbd5e1;
}

.gos-value-class {
    flex: none !important;
}

/* ===== 右侧明细列表（自定义勾选） ===== */
.gos-list {
    padding: 8rpx 16rpx;
}

.gos-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 16rpx;
    border-bottom: 1rpx solid #f2f4f7;
}

.gos-list__item:active {
    background: #f8fafc;
}

.gos-list__item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6rpx;
    padding-right: 16rpx;
}

.gos-list__item-row {
    display: flex;
    align-items: center;
    gap: 8rpx;
    flex-wrap: wrap;
}

.gos-list__item-name {
    color: #1f2937;
    font-size: 28rpx;
    font-weight: 500;
}

.gos-list__item-dose {
    color: #666;
    font-size: 24rpx;
}

.gos-list__item-price {
    color: #f5222d;
    font-size: 24rpx;
}

.gos-list__checkbox {
    width: 36rpx;
    height: 36rpx;
    border-radius: 6rpx;
    border: 2rpx solid #c8d3e0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #fff;
    transition: all 0.15s ease;
}

.gos-list__checkbox--checked {
    background: #1687ff;
    border-color: #1687ff;
}

.gos-list__check-icon {
    color: #fff;
    font-size: 24rpx;
    font-weight: bold;
    line-height: 1;
}

.gos-footer {
    flex-shrink: 0;
    padding: 16rpx 24rpx;
    padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1rpx solid #f0f2f5;
}

.gos-footer__btn {
    width: 100%;
    height: 84rpx;
    line-height: 84rpx;
    background: #1890ff;
    color: #fff;
    font-size: 30rpx;
    font-weight: 500;
    text-align: center;
    border-radius: 999rpx;
    padding: 0;
    margin: 0;
    box-shadow: 0 6rpx 16rpx rgba(24, 144, 255, 0.28);
}

.gos-footer__btn::after {
    border: initial;
}

.gos-footer__btn[disabled] {
    background: #91cfff;
    color: #fff;
    box-shadow: none;
}
</style>
