<template>
	<div class="NCC-common-layout">
		<div class="NCC-common-layout-center">
			<!-- 现代化筛选卡片 -->
			<el-card v-if="!isFullscreen" class="search-card" :class="{ 'search-card-animated': searchCardMounted }" shadow="never">
				<el-form @submit.native.prevent  size="small">
					<!-- 第一行：基础筛选 -->
					<el-row :gutter="16" class="search-row search-row-1">
						<el-col :span="5">
							<el-form-item label="客户名称">
								<el-input v-model="query.khmc" placeholder="请输入客户名称" clearable
									prefix-icon="el-icon-user" />
							</el-form-item>
						</el-col>
						<el-col :span="5">
							<el-form-item label="手机号">
								<el-input v-model="query.sjh" placeholder="请输入手机号" clearable
									prefix-icon="el-icon-mobile-phone" />
							</el-form-item>
						</el-col>
						<el-col :span="5">
							<el-form-item label="归属门店">
								<el-select v-model="query.gsmd" placeholder="请选择门店" clearable filterable
									style="width: 100%">
									<el-option v-for="(item, index) in gsmdOptions" :key="index" :label="item.fullName"
										:value="item.id" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="消费等级">
								<el-select v-model="query.consumeLevel" placeholder="请选择等级" clearable
									style="width: 100%">
									<el-option v-for="(item, index) in consumeLevelOptions" :key="index"
										:label="item.fullName" :value="item.id" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="5">
							<div class="search-actions-inline">
								<el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
								<el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
								<el-button type="text" :icon="showAll ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
									@click="showAll = !showAll">
									{{ showAll ? '收起' : '展开' }}
								</el-button>
							</div>
						</el-col>
					</el-row>

					<!-- 高级筛选区域（可展开） -->
					<div class="filter-expand-panel" :class="{ 'is-expanded': showAll }">
						<!-- 第二行：高级筛选 -->
						<el-row :gutter="16" class="search-row search-row-2">
							<el-col :span="5">
								<el-form-item label="性别">
									<el-select v-model="query.xb" placeholder="请选择性别" clearable style="width: 100%">
										<el-option v-for="(item, index) in xbOptions" :key="index"
											:label="item.fullName" :value="item.id" />
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="5">
								<el-form-item label="客户类型">
									<el-select v-model="query.khlx" placeholder="请选择类型" clearable style="width: 100%">
										<el-option v-for="(item, index) in khlxOptions" :key="index"
											:label="item.fullName" :value="item.id" />
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="5">
								<el-form-item label="健康师">
									<el-input v-model="query.mainHealthUser" placeholder="请输入健康师" clearable />
								</el-form-item>
							</el-col>
							<el-col :span="5">
								<el-form-item label="负责顾问">
									<el-input v-model="query.subHealthUser" placeholder="请输入负责顾问" clearable />
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="16" class="search-row search-row-3">
							<el-col :span="6">
								<el-form-item label="进店渠道">
									<el-select v-model="query.jdqd" placeholder="请选择渠道" clearable filterable
										style="width: 100%">
										<el-option v-for="(item, index) in jdqdOptions" :key="index"
											:label="item.fullName" :value="item.id" />
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="沉睡天数">
									<el-select v-model="query.sleepDaysRange" placeholder="请选择天数范围" clearable
										style="width: 100%">
										<el-option v-for="(item, index) in sleepDaysRangeOptions" :key="index"
											:label="item.label" :value="item.value" />
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="剩余权益">
									<div class="remaining-rights-range">
										<el-input v-model.number="query.remainingRightsMin" placeholder="最小(元)"
											type="number" clearable style="flex: 1" />
										<span class="range-sep">-</span>
										<el-input v-model.number="query.remainingRightsMax" placeholder="最大(元)"
											type="number" clearable style="flex: 1" />
									</div>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="注册时间">
									<el-date-picker v-model="query.zcsj" type="daterange" value-format="timestamp"
										format="yyyy-MM-dd" start-placeholder="开始" end-placeholder="结束"
										style="width: 100%">
									</el-date-picker>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="16" class="search-row search-row-4">
							<el-col :span="6">
								<el-form-item label="出生日期">
									<el-date-picker v-model="query.yanglsr" type="daterange" value-format="timestamp"
										format="yyyy-MM-dd" start-placeholder="开始" end-placeholder="结束"
										style="width: 100%">
									</el-date-picker>
								</el-form-item>
							</el-col>
						</el-row>
					</div>
				</el-form>
			</el-card>
			<div class="NCC-common-layout-main NCC-flex-main">
				<!-- 现代化操作栏 -->
				<el-card class="toolbar-card" shadow="never">
					<div class="toolbar-container">
						<div class="toolbar-left">
							<el-button-group v-if="!isFullscreen">
								<el-button type="primary" icon="el-icon-plus"
									@click="addOrUpdateHandle()">新增会员</el-button>
								<el-button icon="el-icon-download" :loading="exportLoading"
									@click="exportMemberItems()">导出数据</el-button>
								<el-button icon="el-icon-tickets" :loading="exportRightsLoading"
									@click="exportMemberRights()">导出会员权益</el-button>
								<el-button v-has="'btn_remove'" type="danger" icon="el-icon-delete" plain
									@click="handleBatchRemoveDel()">批量删除</el-button>
							</el-button-group>
						</div>
						<div class="toolbar-right">
							<el-dropdown v-if="viewMode === 'list' && !isFullscreen" trigger="click" :hide-on-click="false">
								<el-button size="small" icon="el-icon-setting">
									列设置<i class="el-icon-arrow-down el-icon--right"></i>
								</el-button>
								<el-dropdown-menu slot="dropdown" class="column-setting-dropdown">
									<div class="column-setting-panel" @click.stop>
										<div class="column-setting-title">显示列（拖拽排序）</div>
										<draggable v-model="tableColumnsOrder"
											:options="{ handle: '.drag-handle', animation: 150, forceFallback: true, ghostClass: 'column-drag-ghost' }"
											class="column-draggable-list" @end="saveColumnConfig">
											<div v-for="colId in tableColumnsOrder" :key="colId"
												class="column-draggable-item">
												<i class="el-icon-rank drag-handle"></i>
												<el-checkbox v-model="tableColumnsVisible[colId]"
													@change="saveColumnConfig">
													{{ (tableColumnsMeta[colId] && tableColumnsMeta[colId].label) || colId }}
												</el-checkbox>
											</div>
										</draggable>
									</div>
								</el-dropdown-menu>
							</el-dropdown>
							<el-radio-group v-model="viewMode" size="small" @change="switchView">
								<el-radio-button label="list">
									<i class="el-icon-s-grid"></i> 列表
								</el-radio-button>
								<el-radio-button label="card">
									<i class="el-icon-menu"></i> 卡片
								</el-radio-button>
							</el-radio-group>
							<el-divider direction="vertical"></el-divider>
							<el-button size="small" icon="el-icon-refresh" circle @click="reset()"
								title="刷新"></el-button>
							<screenfull isContainer />
						</div>
					</div>
				</el-card>
				<div v-if="viewMode === 'card'" v-loading="listLoading" class="member-card-wrapper">
					<div class="member-card-scroll-container">
						<el-row :gutter="16" type="flex" style="flex-wrap: wrap;" class="member-card-row">
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" v-for="item in list" :key="item.id">
								<el-card shadow="hover" class="member-card" :class="`level-card-${item.consumeLevel}`">
									<div class="card-header-wrapper">
										<div class="header-top">
											<div class="info-left">
												<span class="member-name">{{ item.khmc || '无名氏' }}</span>
												<i class="el-icon-user gender-icon"
													:class="getGenderClass(item.xb)"></i>
											</div>
											<el-tag :type="getConsumeLevelType(item.consumeLevel)" size="small"
												class="level-tag" effect="dark">
												{{ getConsumeLevelName(item.consumeLevel) }}
											</el-tag>
										</div>
										<div class="header-tags">
											<el-tag v-if="item.isBeautyMember === 1" type="success" size="mini"
												effect="plain" class="mini-tag">生美</el-tag>
											<el-tag v-if="item.isMedicalMember === 1" type="warning" size="mini"
												effect="plain" class="mini-tag">医美</el-tag>
											<el-tag v-if="item.isTechMember === 1" type="info" size="mini"
												effect="plain" class="mini-tag">科技</el-tag>
											<el-tag v-if="item.isEducationMember === 1" type="primary" size="mini"
												effect="plain" class="mini-tag">教育</el-tag>
										</div>
									</div>

									<div class="card-content">
										<div class="data-grid">
											<div class="data-item">
												<span class="label">
													<i class="el-icon-phone icon-inline"></i>手机号
												</span>
												<span class="value">{{ item.sjh || '-' }}</span>
											</div>
											<div class="data-item">
												<span class="label">
													<i class="el-icon-shop icon-inline"></i>归属门店
												</span>
												<span class="value text-truncate" :title="item.gsmdName">{{
													item.gsmdName ||
													'-'
												}}</span>
											</div>
											<div class="data-item">
												<span class="label">
													<i class="el-icon-user icon-inline"></i>客户类型
												</span>
												<span class="value">{{ item.khlxName || '-' }}</span>
											</div>
											<div class="data-item">
												<span class="label">
													<i class="el-icon-time icon-inline"
														:class="{ 'icon-warning': item.sleepDays > 0 }"></i>沉睡天数
												</span>
												<span class="value" :class="{ 'text-danger': item.sleepDays > 0 }">{{
													item.sleepDays || 0
												}}天</span>
											</div>
											<div class="data-item full-width">
												<span class="label">
													<i class="el-icon-calendar icon-inline"></i>最后到店
												</span>
												<span class="value">{{ formatDate(item.lastVisitTime) }}</span>
											</div>
										</div>

										<div class="amount-section">
											<div class="amount-box">
												<span class="sub-label">
													<i class="el-icon-wallet icon-inline"></i>开卡金额
												</span>
												<span class="sub-value primary-color">{{
													formatMoney(item.totalBillingAmount) }}</span>
											</div>
											<div class="divider"></div>
											<div class="amount-box">
												<span class="sub-label">
													<i class="el-icon-coin icon-inline"></i>剩余权益
												</span>
												<span class="sub-value warning-color">{{
													formatMoney(item.remainingRightsAmount)
												}}</span>
											</div>
										</div>
									</div>

									<div class="card-footer">
										<el-tooltip content="详情" placement="top">
											<el-button type="text" icon="el-icon-view" class="action-btn view-btn"
												@click="openMemberPortrait(item.id)">
												详情
											</el-button>
										</el-tooltip>
										<el-tooltip content="权益" placement="top">
											<el-button type="text" icon="el-icon-folder-opened"
												class="action-btn rights-btn" @click="showMemberRights(item.id)">
												权益
											</el-button>
										</el-tooltip>
										<div class="more-actions">
											<el-dropdown trigger="click" @command="handleCommand($event, item)">
												<span class="el-dropdown-link">
													更多<i class="el-icon-arrow-down el-icon--right"></i>
												</span>
												<el-dropdown-menu slot="dropdown">
													<el-dropdown-item command="edit" icon="el-icon-edit"
														v-if="has('btn_edit')">编辑</el-dropdown-item>
													<el-dropdown-item command="delete" icon="el-icon-delete"
														v-if="has('btn_remove')"
														style="color: #F56C6C;">删除</el-dropdown-item>
												</el-dropdown-menu>
											</el-dropdown>
										</div>
									</div>
								</el-card>
							</el-col>
						</el-row>
						<div v-if="list.length === 0" class="empty-data">
							<el-empty description="暂无数据"></el-empty>
						</div>
					</div>
				</div>
				<NCC-table v-if="viewMode === 'list'" v-loading="listLoading" :data="list" has-c
					:key="tableColumnsOrderKey"
					@selection-change="handleSelectionChange" @sort-change="handleSortChange"
					:header-cell-style="{ background: '#fafafa', color: '#262626', fontWeight: '600' }">
					<template v-for="colId in tableColumnsOrder">
					<!-- 客户名称+档案号（合并，不单独显示客户ID） -->
					<el-table-column align="center" v-if="colId === 'khmc' && tableColumnsVisible[colId] !== false" key="khmc" label="客户名称"  a
					
						class-name="column-khmc-full"
						:min-width="tableColumnsMeta.khmc.width" :sortable="tableColumnsMeta.khmc.sortable ? 'custom' : false"
						:prop="tableColumnsMeta.khmc.sidx">
						<template slot-scope="scope">
							<el-tooltip :content="(scope.row.khmc || '无') + (scope.row.dah ? ' (' + scope.row.dah + ')' : '')" placement="top">
								<div class="table-cell-with-icon table-cell-name-full">
									<i class="el-icon-user-solid cell-icon primary"></i>
									<span class="cell-text cell-text-full">{{ scope.row.khmc || '无' }}</span>
									<span v-if="scope.row.dah" class="cell-text-plain muted" style="margin-left:6px">({{ scope.row.dah }})</span>
								</div>
							</el-tooltip>
						</template>
					</el-table-column>
					<!-- 手机号 -->
					<el-table-column align="center" v-if="colId === 'sjh' && tableColumnsVisible[colId] !== false" key="sjh" label="手机号" 
						:min-width="tableColumnsMeta.sjh.width" :sortable="tableColumnsMeta.sjh.sortable ? 'custom' : false"
						:prop="tableColumnsMeta.sjh.sidx">
						<template slot-scope="scope">
							<div class="table-cell-with-icon">
								<i class="el-icon-mobile-phone cell-icon success"></i>
								<span class="cell-text">{{ scope.row.sjh || '无' }}</span>
							</div>
						</template>
					</el-table-column>
					<!-- 归属门店 -->
					<el-table-column align="center" v-if="colId === 'gsmd' && tableColumnsVisible[colId] !== false" key="gsmd" label="归属门店" 
						:min-width="tableColumnsMeta.gsmd.width" :sortable="tableColumnsMeta.gsmd.sortable ? 'custom' : false"
						:prop="tableColumnsMeta.gsmd.sidx">
						<template slot-scope="scope">
							<div class="table-cell-with-icon">
								<i class="el-icon-office-building cell-icon info"></i>
								<span class="cell-text">{{ scope.row.gsmdName || '无' }}</span>
							</div>
						</template>
					</el-table-column>
					<!-- 性别 -->
					<el-table-column align="center" v-if="colId === 'xb' && tableColumnsVisible[colId] !== false" key="xb" label="性别" 
						:min-width="tableColumnsMeta.xb.width" :sortable="tableColumnsMeta.xb.sortable ? 'custom' : false"
						:prop="tableColumnsMeta.xb.sidx">
						<template slot-scope="scope">
							<el-tag :type="scope.row.xb === '男' ? 'primary' : scope.row.xb === '女' ? 'danger' : 'info'"
								size="small" effect="plain">
								{{ scope.row.xb | dynamicText(xbOptions) || '未知' }}
							</el-tag>
						</template>
					</el-table-column>
					<!-- 客户类型 -->
					<el-table-column align="center" v-if="colId === 'khlx' && tableColumnsVisible[colId] !== false" key="khlx" label="客户类型" 
						:min-width="tableColumnsMeta.khlx.width" :sortable="tableColumnsMeta.khlx.sortable ? 'custom' : false"
						:prop="tableColumnsMeta.khlx.sidx">
						<template slot-scope="scope">
							<span class="cell-text-plain">{{ scope.row.khlxName || '无' }}</span>
						</template>
					</el-table-column>
					<!-- 健康师 -->
					<el-table-column align="center" v-if="colId === 'mainHealthUser' && tableColumnsVisible[colId] !== false" key="mainHealthUser" label="健康师"  :min-width="tableColumnsMeta.mainHealthUser.width">
						<template slot-scope="scope">
							<span class="cell-text-plain">{{ scope.row.mainHealthUserName || '无' }}</span>
						</template>
					</el-table-column>
					<!-- 负责顾问 -->
					<el-table-column align="center" v-if="colId === 'subHealthUser' && tableColumnsVisible[colId] !== false" key="subHealthUser" label="负责顾问"  :min-width="tableColumnsMeta.subHealthUser.width">
						<template slot-scope="scope">
							<span class="cell-text-plain">{{ scope.row.subHealthUserName || '无' }}</span>
						</template>
					</el-table-column>
					<!-- 进店渠道 -->
					<el-table-column align="center" v-if="colId === 'jdqd' && tableColumnsVisible[colId] !== false" key="jdqd" label="进店渠道"  :min-width="tableColumnsMeta.jdqd.width">
						<template slot-scope="scope">
							<span class="cell-text-plain">{{ scope.row.jdqd || '无' }}</span>
						</template>
					</el-table-column>
					<!-- 推荐人 -->
					<el-table-column align="center" v-if="colId === 'tjr' && tableColumnsVisible[colId] !== false" key="tjr" label="推荐人"  :min-width="tableColumnsMeta.tjr.width">
						<template slot-scope="scope">
							<span class="cell-text-plain">{{ scope.row.tjrName || '无' }}</span>
						</template>
					</el-table-column>
					<!-- 拓客人员 -->
					<el-table-column align="center" v-if="colId === 'expandUser' && tableColumnsVisible[colId] !== false" key="expandUser" label="拓客人员"  :min-width="tableColumnsMeta.expandUser.width">
						<template slot-scope="scope">
							<span class="cell-text-plain">{{ scope.row.expandUserName || '无' }}</span>
						</template>
					</el-table-column>
					<!-- 会员类型 -->
					<el-table-column align="center" v-if="colId === 'memberType' && tableColumnsVisible[colId] !== false" key="memberType" label="会员类型"  :min-width="tableColumnsMeta.memberType.width">
						<template slot-scope="scope">
							<div class="member-tags">
								<el-tag v-if="scope.row.isBeautyMember === 1" type="success" size="mini"
									effect="plain">生美</el-tag>
								<el-tag v-if="scope.row.isMedicalMember === 1" type="warning" size="mini"
									effect="plain">医美</el-tag>
								<el-tag v-if="scope.row.isTechMember === 1" type="info" size="mini"
									effect="plain">科技</el-tag>
								<el-tag v-if="scope.row.isEducationMember === 1" type="primary" size="mini"
									effect="plain">教育</el-tag>
								<span
									v-if="scope.row.isBeautyMember !== 1 && scope.row.isMedicalMember !== 1 && scope.row.isTechMember !== 1 && scope.row.isEducationMember !== 1"
									class="cell-text-plain muted">无</span>
							</div>
						</template>
					</el-table-column>

					<!-- 消费等级 -->
					<el-table-column align="center" v-if="colId === 'consumeLevel' && tableColumnsVisible[colId] !== false" key="consumeLevel" label="消费等级" 
						:min-width="tableColumnsMeta.consumeLevel.width" :sortable="tableColumnsMeta.consumeLevel.sortable ? 'custom' : false"
						:prop="tableColumnsMeta.consumeLevel.sidx">
						<template slot-scope="scope">
							<el-tag :type="getConsumeLevelType(scope.row.consumeLevel)" size="small" effect="dark">
								{{ getConsumeLevelName(scope.row.consumeLevel) }}
							</el-tag>
						</template>
					</el-table-column>

					<!-- 开卡总金额 -->
					<el-table-column align="center" v-if="colId === 'totalBillingAmount' && tableColumnsVisible[colId] !== false" key="totalBillingAmount" label="开卡总金额" 
						:min-width="tableColumnsMeta.totalBillingAmount.width" :sortable="tableColumnsMeta.totalBillingAmount.sortable ? 'custom' : false"
						:prop="tableColumnsMeta.totalBillingAmount.sidx">
						<template slot-scope="scope">
							<span class="amount-text primary">{{ formatMoney(scope.row.totalBillingAmount) }}</span>
						</template>
					</el-table-column>

					<!-- 剩余权益 -->
					<el-table-column align="center" v-if="colId === 'remainingRightsAmount' && tableColumnsVisible[colId] !== false" key="remainingRightsAmount" label="剩余权益" 
						:min-width="tableColumnsMeta.remainingRightsAmount.width" :sortable="tableColumnsMeta.remainingRightsAmount.sortable ? 'custom' : false"
						:prop="tableColumnsMeta.remainingRightsAmount.sidx">
						<template slot-scope="scope">
							<span class="amount-text success">{{ formatMoney(scope.row.remainingRightsAmount) }}</span>
						</template>
					</el-table-column>

					<!-- 首次到店 -->
					<el-table-column align="center" v-if="colId === 'firstVisitTime' && tableColumnsVisible[colId] !== false" key="firstVisitTime" label="首次到店" 
						:min-width="tableColumnsMeta.firstVisitTime.width" :sortable="tableColumnsMeta.firstVisitTime.sortable ? 'custom' : false"
						:prop="tableColumnsMeta.firstVisitTime.sidx">
						<template slot-scope="scope">
							<span class="cell-text-plain muted">{{ formatDate(scope.row.firstVisitTime) || '无' }}</span>
						</template>
					</el-table-column>

					<!-- 最后到店 -->
					<el-table-column align="center" v-if="colId === 'lastVisitTime' && tableColumnsVisible[colId] !== false" key="lastVisitTime" label="最后到店" 
						:min-width="tableColumnsMeta.lastVisitTime.width" :sortable="tableColumnsMeta.lastVisitTime.sortable ? 'custom' : false"
						:prop="tableColumnsMeta.lastVisitTime.sidx">
						<template slot-scope="scope">
							<span class="cell-text-plain muted">{{ formatDate(scope.row.lastVisitTime) || '无' }}</span>
						</template>
					</el-table-column>

					<!-- 到店次数 -->
					<el-table-column align="center" v-if="colId === 'visitDays' && tableColumnsVisible[colId] !== false" key="visitDays" label="到店次数" 
						:min-width="tableColumnsMeta.visitDays.width" :sortable="tableColumnsMeta.visitDays.sortable ? 'custom' : false"
						:prop="tableColumnsMeta.visitDays.sidx">
						<template slot-scope="scope">
							<el-tag size="small" type="info" effect="plain">{{ scope.row.visitDays || 0 }}次</el-tag>
						</template>
					</el-table-column>

					<!-- 沉睡天数 -->
					<el-table-column align="center" v-if="colId === 'sleepDays' && tableColumnsVisible[colId] !== false" key="sleepDays" label="沉睡天数" 
						:min-width="tableColumnsMeta.sleepDays.width" :sortable="tableColumnsMeta.sleepDays.sortable ? 'custom' : false"
						:prop="tableColumnsMeta.sleepDays.sidx">
						<template slot-scope="scope">
							<el-tag size="small" :type="scope.row.sleepDays > 30 ? 'warning' : 'success'"
								effect="plain">
								{{ scope.row.sleepDays || 0 }}天
							</el-tag>
						</template>
					</el-table-column>
					</template>

					<!-- 操作（下拉，减少宽度） -->
					<el-table-column align="center" label="操作" width="80"  fixed="right">
						<template slot-scope="scope">
							<el-dropdown trigger="click" @command="handleOpCommand($event, scope.row)">
								<el-button type="text" size="small">
									操作<i class="el-icon-arrow-down el-icon--right"></i>
								</el-button>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item command="detail" icon="el-icon-view">详情</el-dropdown-item>
									<el-dropdown-item command="rights" icon="el-icon-folder-opened">会员权益</el-dropdown-item>
									<el-dropdown-item v-has="'btn_edit'" command="edit" icon="el-icon-edit">编辑</el-dropdown-item>
									<el-dropdown-item v-has="'btn_remove'" command="delete" icon="el-icon-delete"
										style="color: #F56C6C;">删除</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</template>
					</el-table-column>
				</NCC-table>
				<pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
					@pagination="initData" :class="{ 'pagination-card-mode': viewMode === 'card' }" />
			</div>
		</div>
		<NCC-Form v-if="formVisible" ref="NCCForm" @refresh="refresh" />
		<ExportBox v-if="exportBoxVisible" ref="ExportBox" @download="download" />
		<MemberRightsDialog v-if="memberRightsDialogVisible" ref="MemberRightsDialog" />
		<DetailDialog v-if="detailDialogVisible" ref="DetailDialog" />
		<member-portrait-dialog :visible.sync="memberPortraitDialog.visible"
			:member-id="memberPortraitDialog.memberId" />
	</div>
</template>
<script>
import request from '@/utils/request'
import { getDictionaryDataSelector } from '@/api/systemData/dictionary'
import NCCForm from './Form'
import ExportBox from './ExportBox'
import MemberRightsDialog from './member-rights-dialog.vue'
import DetailDialog from './detail-dialog.vue'
import MemberPortraitDialog from '@/components/member-portrait-dialog.vue'
import { previewDataInterface } from '@/api/systemData/dataInterface'
import draggable from 'vuedraggable'
export default {
	components: { NCCForm, ExportBox, MemberRightsDialog, DetailDialog, MemberPortraitDialog, draggable },
		data() {
		return {
			viewMode: 'list', // list or card
			showAll: false,
			searchCardMounted: false, // 控制筛选卡片动画
			isFullscreen: false, // 全屏状态
			kdhyLoading: false,
			memberRightsDialogVisible: false,
			detailDialogVisible: false,
			memberPortraitDialog: {
				visible: false,
				memberId: ''
			},
			query: {
				id: undefined,
				khmc: undefined,
				sjh: undefined,
				dah: undefined,
				xb: undefined,
				gzhzt: undefined,
				wxnc: undefined,
				wxxcxzt: undefined,
				zjdlsj: undefined,
				khmqgs: undefined,
				gsmd: undefined,
				zcsj: undefined,
				khlx: undefined,
				khjd: undefined,
				khxf: undefined,
				xfpc: undefined,
				tjr: undefined,
				subHealthUser: undefined,
				mainHealthUser: undefined,
				jdqd: undefined,
				lxdz: undefined,
				bz: undefined,
				yanglsr: undefined,
				yinlsr: undefined,
				ml: undefined,
				consumeLevel: undefined, // 消费等级
				sleepDaysRange: undefined, // 沉睡天数范围
				remainingRightsMin: undefined, // 剩余权益最小值(元)
				remainingRightsMax: undefined, // 剩余权益最大值(元)
			},
			list: [],
			listLoading: true,
			exportLoading: false,
			exportRightsLoading: false,
			multipleSelection: [], total: 0,
			listQuery: {
				currentPage: 1,
				pageSize: 20,
				sort: "desc",
				sidx: "id",
			},
			// 列配置：顺序与显示（持久化到 localStorage）
			tableColumnsOrder: ['khmc', 'sjh', 'gsmd', 'xb', 'khlx', 'mainHealthUser', 'subHealthUser', 'jdqd', 'tjr', 'expandUser', 'memberType', 'consumeLevel', 'totalBillingAmount', 'remainingRightsAmount', 'firstVisitTime', 'lastVisitTime', 'visitDays', 'sleepDays'],
			tableColumnsVisible: {},
			tableColumnsMeta: {
				khmc: { label: '客户名称', width: '250px', sortable: true, sidx: 'khmc' },
				sjh: { label: '手机号', width: '150px', sortable: true, sidx: 'sjh' },
				gsmd: { label: '归属门店', width: '160px', sortable: true, sidx: 'gsmdName' },
				xb: { label: '性别', width: '85px', sortable: true, sidx: 'xb' },
				khlx: { label: '客户类型', width: '100px', sortable: true, sidx: 'khlx' },
				mainHealthUser: { label: '健康师', width: '85px', sortable: false },
				subHealthUser: { label: '负责顾问', width: '95px', sortable: false },
				jdqd: { label: '进店渠道', width: '100px', sortable: false },
				tjr: { label: '推荐人', width: '85px', sortable: false },
				expandUser: { label: '拓客人员', width: '95px', sortable: false },
				memberType: { label: '会员类型', width: '95px', sortable: false },
				consumeLevel: { label: '消费等级', width: '100px', sortable: true, sidx: 'consumeLevel' },
				totalBillingAmount: { label: '开卡总金额', width: '130px', sortable: true, sidx: 'totalBillingAmount' },
				remainingRightsAmount: { label: '剩余权益', width: '130px', sortable: true, sidx: 'remainingRightsAmount' },
				firstVisitTime: { label: '首次到店', width: '120px', sortable: true, sidx: 'firstVisitTime' },
				lastVisitTime: { label: '最后到店', width: '120px', sortable: true, sidx: 'lastVisitTime' },
				visitDays: { label: '到店次数', width: '100px', sortable: true, sidx: 'visitDays' },
				sleepDays: { label: '沉睡天数', width: '100px', sortable: true, sidx: 'sleepDays' },
			},
			formVisible: false,
			exportBoxVisible: false,
			columnList: [
				{ prop: 'id', label: '客户编码' },
				{ prop: 'khmc', label: '客户名称' },
				{ prop: 'sjh', label: '手机号' },
				{ prop: 'dah', label: '档案号' },
				{ prop: 'xb', label: '性别' },
				{ prop: 'gzhzt', label: '公众号状态' },
				{ prop: 'wxnc', label: '微信昵称' },
				{ prop: 'wxxcxzt', label: '小程序状态' },
				{ prop: 'zjdlsj', label: '最近登录时间' },
				{ prop: 'khmqgs', label: '客户目前归属' },
				{ prop: 'gsmd', label: '归属门店' },
				{ prop: 'zcsj', label: '注册时间' },
				{ prop: 'khlx', label: '客户类型' },
				{ prop: 'khjd', label: '客户阶段' },
				{ prop: 'khxf', label: '客户消费' },
				{ prop: 'xfpc', label: '消费频次' },
				{ prop: 'tjr', label: '推荐人' },
				{ prop: 'subHealthUser', label: '负责顾问' },
				{ prop: 'mainHealthUser', label: '健康师' },
				{ prop: 'jdqd', label: '进店渠道' },
				{ prop: 'lxdz', label: '联系地址' },
				{ prop: 'bz', label: '备注' },
				{ prop: 'yanglsr', label: '出生日期' },
				{ prop: 'yinlsr', label: '阴历生日' },
				{ prop: 'ml', label: '年龄' },
				{ prop: 'isBeautyMember', label: '是否生美会员' },
				{ prop: 'isMedicalMember', label: '是否医美会员' },
				{ prop: 'isTechMember', label: '是否科技部会员' },
				{ prop: 'isEducationMember', label: '是否教育部会员' },
				{ prop: 'beautyMemberTime', label: '成为生美会员时间' },
				{ prop: 'medicalMemberTime', label: '成为医美会员时间' },
				{ prop: 'techMemberTime', label: '成为科技部会员时间' },
				{ prop: 'educationMemberTime', label: '成为教育部会员时间' },
				{ prop: 'firstVisitTime', label: '首次到店时间' },
				{ prop: 'lastVisitTime', label: '最后到店时间' },
				{ prop: 'visitDays', label: '到店天数' },
				{ prop: 'sleepStartTime', label: '沉睡开始时间' },
				{ prop: 'sleepDays', label: '沉睡天数' },
				{ prop: 'totalConsumeAmount', label: '耗卡总金额' },
				{ prop: 'totalBillingAmount', label: '开卡总金额' },
				{ prop: 'remainingRightsAmount', label: '剩余权益总金额' },
				{ prop: 'consumeLevel', label: '消费等级' },
				{ prop: 'consumeLevelUpdateTime', label: '消费等级更新时间' },
			],
			xbOptions: [{ "fullName": "男", "id": "男" }, { "fullName": "女", "id": "女" }],
			gzhztOptions: [{ "fullName": "已绑定", "id": "已绑定" }, { "fullName": "未绑定", "id": "未绑定" }],
			wxxcxztOptions: [{ "fullName": "已绑定", "id": "已绑定" }, { "fullName": "未绑定", "id": "未绑定" }],
			khmqgsOptions: [{ "fullName": "会员", "id": "会员" }, { "fullName": "线索池", "id": "线索池" }, { "fullName": "会员-归档", "id": "会员-归档" }],
			khlxOptions: [],
			khjdOptions: [{ "fullName": "体验", "id": "体验" }, { "fullName": "有效", "id": "有效" }, { "fullName": "沉睡", "id": "沉睡" }, { "fullName": "流失", "id": "流失" }],
			consumeLevelOptions: [
				{ "fullName": "D", "id": 0 },
				{ "fullName": "C", "id": 1 },
				{ "fullName": "B", "id": 2 },
				{ "fullName": "A", "id": 3 },
				{ "fullName": "A+", "id": 4 },
				{ "fullName": "A++", "id": 5 }
			],
			sleepDaysRangeOptions: [
				{ label: "0-30天", value: "0-30天", range: "0,30" },
				{ label: "30-60天", value: "30-60天", range: "30,60" },
				{ label: "60-90天", value: "60-90天", range: "60,90" },
				{ label: "90-180天", value: "90-180天", range: "90,180" },
				{ label: "180天以上", value: "180天以上", range: "180,9999" }
			],
			khxfOptions: [{ "fullName": "D客", "id": "D客" }, { "fullName": "有效", "id": "有效" }],
			xfpcOptions: [{ "fullName": "高频", "id": "高频" }, { "fullName": "低频", "id": "低频" }],
			jdqdOptions: [{ "fullName": "19.9卡", "id": "19.9卡" }, { "fullName": "自然到店", "id": "自然到店" }, { "fullName": "嘉宾", "id": "嘉宾" }, { "fullName": "售后", "id": "售后" }, { "fullName": "直播间", "id": "直播间" }, { "fullName": "转店顾客", "id": "转店顾客" }, { "fullName": "联联", "id": "联联" }, { "fullName": "美团", "id": "美团" }, { "fullName": "三方拓客", "id": "三方拓客" }, { "fullName": "其他", "id": "其他" }],
			gsmdOptions: [],
			kdhyOptions: [],
		}
	},
	computed: {
		visibleColumns() {
			return this.tableColumnsOrder.filter(id => this.tableColumnsVisible[id] !== false)
		},
		// 表格列顺序的 key，用于强制重新渲染表格
		tableColumnsOrderKey() {
			return this.tableColumnsOrder.join(',')
		}
	},
	created() {
		// 默认使用列表视图，不恢复本地存储的视图模式
		this.viewMode = 'list';
		this.loadColumnConfig();
		this.initData();
		this.getgsmdOptions();
		this.getkhlxOptions();
		this.getkdhyOptions();
	},
	mounted() {
		// 触发筛选卡片的滑动展开动画
		this.$nextTick(() => {
			setTimeout(() => {
				this.searchCardMounted = true;
			}, 50);
		});
		// 监听全屏状态变化
		this.initFullscreenListener();
	},
	beforeDestroy() {
		// 移除全屏监听
		this.destroyFullscreenListener();
	},
	methods: {
		// 权限检查方法
		has(enCode) {
			try {
				const permissionList = this.$store.getters && this.$store.getters.permissionList
				if (!permissionList || !permissionList.length) return false
				const modelId = this.$route.meta.modelId || ''
				if (!modelId) return false
				const list = permissionList.filter(o => o.modelId === modelId)
				if (!list.length) return false
				const btnList = list[0] && list[0].button ? list[0].button : []
				if (!btnList.length) return false
				const hasPermission = btnList.some(btn => btn.enCode === enCode)
				return hasPermission
			} catch (e) {
				console.warn('Permission check error:', e)
				return false
			}
		},
		switchView(mode) {
			console.log('Switching view to:', mode);
			if (mode !== 'list' && mode !== 'card') {
				console.error('Invalid view mode:', mode);
				return;
			}
			this.viewMode = mode;
			// 保存视图模式到本地存储
			try {
				localStorage.setItem('memberListViewMode', mode);
			} catch (e) {
				console.warn('Failed to save view mode to localStorage:', e);
			}
			// 强制更新视图
			this.$forceUpdate();
			// 触发窗口大小变化事件，确保布局正确
			this.$nextTick(() => {
				window.dispatchEvent(new Event('resize'));
			});
		},
		getgsmdOptions() {
			previewDataInterface('730960205902251269').then(res => {
				this.gsmdOptions = res.data
			});
		},
		getkhlxOptions() {
			request({
				url: '/api/Extend/lqkhxx/deduct-types',
				method: 'GET',
			}).then((res) => {
				if (res.code == 200 && res.data) {
					this.khlxOptions = res.data.map(item => ({
						fullName: item.Name,
						id: item.Value + '',
						value: item.Value + '',
						label: item.Name,
					}));
				} else {
					this.khlxOptions = [];
				}
			}).catch((err) => {
				console.error('获取客户类型失败:', err);
				this.khlxOptions = [];
			});
		},
		getkdhyOptions() {
			request({
				url: '/api/Extend/LqKhxx?page=1&pageSize=20',
				method: 'GET',
			}).then((res) => {
				if (res.code == 200 && res.data.list.length > 0) {
					this.kdhyOptions = res.data.list.map(item => ({
						value: item.id,
						label: `${item.khmc}` + '(' + item.sjh + ')',
					}));
				} else {
					this.kdhyOptions = [];
				}
			})
		},
		async remoteMethod(query) {
			if (query !== '') {
				this.kdhyLoading = true;
				await request({
					url: '/api/Extend/LqKhxx?page=1&pageSize=20&keyword=' + query,
					method: 'GET',
				}).then((res) => {
					this.kdhyLoading = false;
					if (res.code == 200 && res.data.list.length > 0) {
						this.kdhyOptions = res.data.list.map(item => ({
							value: item.id,
							label: `${item.khmc}` + '(' + item.sjh + ')',
						}));
					} else {
						this.kdhyOptions = [];
					}
				})
			}
		},
		initData() {
			this.listLoading = true;
			let _query = {
				...this.listQuery,
				...this.query
			};

			// 转换沉睡天数选项值为范围格式
			if (_query.sleepDaysRange) {
				const option = this.sleepDaysRangeOptions.find(opt => opt.value === _query.sleepDaysRange);
				if (option) {
					_query.sleepDaysRange = option.range;
				}
			}

			// 组装剩余权益范围为 "min,max" 格式（支持自定义输入）
			const hasMin = _query.remainingRightsMin != null && _query.remainingRightsMin !== ''
			const hasMax = _query.remainingRightsMax != null && _query.remainingRightsMax !== ''
			if (hasMin || hasMax) {
				const min = hasMin ? Number(_query.remainingRightsMin) : 0
				const max = hasMax ? Number(_query.remainingRightsMax) : 999999999
				_query.remainingRightsRange = `${min},${max}`
			}

			let query = {}
			for (let key in _query) {
				if (Array.isArray(_query[key])) {
					query[key] = _query[key].join()
				} else {
					query[key] = _query[key]
				}
			}
			request({
				url: `/api/Extend/LqKhxx`,
				method: 'GET',
				data: query
			}).then(res => {
				this.list = res.data.list
				this.total = res.data.pagination.total
				this.listLoading = false
			})
		},
		handleDel(id) {
			this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
				type: 'warning'
			}).then(() => {
				request({
					url: `/api/Extend/LqKhxx/${id}`,
					method: 'DELETE'
				}).then(res => {
					this.$message({
						type: 'success',
						message: res.msg,
						onClose: () => {
							this.initData()
						}
					});
				})
			}).catch(() => {
			});
		},
		handleSelectionChange(val) {
			const res = val.map(item => item.id)
			this.multipleSelection = res
		},
		handleBatchRemoveDel() {
			if (!this.multipleSelection.length) {
				this.$message({
					type: 'error',
					message: '请选择一条数据',
					duration: 1500,
				})
				return
			}
			const ids = this.multipleSelection
			this.$confirm('您确定要删除这些数据吗, 是否继续？', '提示', {
				type: 'warning'
			}).then(() => {
				request({
					url: `/api/Extend/LqKhxx/batchRemove`,
					method: 'POST',
					data: ids,
				}).then(res => {
					this.$message({
						type: 'success',
						message: res.msg,
						onClose: () => {
							this.initData()
						}
					});
				})
			}).catch(() => { })
		},
		addOrUpdateHandle(id, isDetail) {
			this.formVisible = true
			this.$nextTick(() => {
				this.$refs.NCCForm.init(id, isDetail)
			})
		},
		exportData() {
			this.exportBoxVisible = true
			this.$nextTick(() => {
				this.$refs.ExportBox.init(this.columnList)
			})
		},
		download(data) {
			let query = { ...data, ...this.listQuery, ...this.query }

			// 转换沉睡天数选项值为范围格式
			if (query.sleepDaysRange) {
				const option = this.sleepDaysRangeOptions.find(opt => opt.value === query.sleepDaysRange);
				if (option) {
					query.sleepDaysRange = option.range;
				}
			}

			// 组装剩余权益范围为 "min,max" 格式（支持自定义输入）
			const hasMin = query.remainingRightsMin != null && query.remainingRightsMin !== ''
			const hasMax = query.remainingRightsMax != null && query.remainingRightsMax !== ''
			if (hasMin || hasMax) {
				const min = hasMin ? Number(query.remainingRightsMin) : 0
				const max = hasMax ? Number(query.remainingRightsMax) : 999999999
				query.remainingRightsRange = `${min},${max}`
			}

			request({
				url: `/api/Extend/LqKhxx/Actions/Export`,
				method: 'GET',
				data: query
			}).then(res => {
				if (!res.data.url) return
				window.location.href = this.define.comUrl + res.data.url
				this.$refs.ExportBox.visible = false
				this.exportBoxVisible = false
			})
		},
		// 导出会员品项
		exportMemberItems() {
			let query = { ...this.listQuery, ...this.query }

			// 转换沉睡天数选项值为范围格式
			if (query.sleepDaysRange) {
				const option = this.sleepDaysRangeOptions.find(opt => opt.value === query.sleepDaysRange);
				if (option) {
					query.sleepDaysRange = option.range;
				}
			}

			// 组装剩余权益范围为 "min,max" 格式（支持自定义输入）
			const hasMinExp = query.remainingRightsMin != null && query.remainingRightsMin !== ''
			const hasMaxExp = query.remainingRightsMax != null && query.remainingRightsMax !== ''
			if (hasMinExp || hasMaxExp) {
				const min = hasMinExp ? Number(query.remainingRightsMin) : 0
				const max = hasMaxExp ? Number(query.remainingRightsMax) : 999999999
				query.remainingRightsRange = `${min},${max}`
			}

			// 处理数组参数
			let exportQuery = {}
			for (let key in query) {
				if (Array.isArray(query[key])) {
					exportQuery[key] = query[key].join()
				} else {
					exportQuery[key] = query[key]
				}
			}
			// 显示加载状态
			this.exportLoading = true
			const loading = this.$loading({
				lock: true,
				text: '正在导出数据，请稍候...',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			})
			request({
				url: `/api/Extend/LqKhxx/Actions/ExportOptimized`,
				method: 'GET',
				data: exportQuery
			}).then(res => {
				loading.close()
				this.exportLoading = false
				if (!res.data.url) {
					this.$message.warning('导出失败，没有可导出的数据')
					return
				}
				window.location.href = this.define.comUrl + res.data.url
				this.$message.success('导出成功')
			}).catch(err => {
				loading.close()
				this.exportLoading = false
				this.$message.error('导出失败：' + (err.msg || err.message || '未知错误'))
			})
		},
		// 导出会员权益
		exportMemberRights() {
			// 显示加载状态
			this.exportRightsLoading = true
			const loading = this.$loading({
				lock: true,
				text: '正在导出会员权益数据，请稍候...',
				spinner: 'el-icon-loading',
				background: 'rgba(255, 255, 255, 0.85)',
				customClass: 'modern-loading-mask'
			})
			request({
				url: `/api/Extend/LqKhxx/Actions/ExportAllMemberRemainingItems`,
				method: 'GET'
			}).then(res => {
				loading.close()
				this.exportRightsLoading = false
				if (!res.data.url) {
					this.$message.warning('导出失败，没有可导出的数据')
					return
				}
				window.location.href = this.define.comUrl + res.data.url
				this.$message.success('导出成功')
			}).catch(err => {
				loading.close()
				this.exportRightsLoading = false
				this.$message.error('导出失败：' + (err.msg || err.message || '未知错误'))
			})
		},
		search() {
			this.listQuery = {
				currentPage: 1,
				pageSize: 20,
				sort: "desc",
				sidx: "",
			}
			this.initData()
		},
		refresh(isrRefresh) {
			this.formVisible = false
			if (isrRefresh) {
				this.initData()
			}
		},
		reset() {
			for (let key in this.query) {
				this.query[key] = undefined
			}
			this.listQuery = {
				currentPage: 1,
				pageSize: 20,
				sort: "desc",
				sidx: "",
			}
			this.initData()
		},
		// 格式化日期
		formatDate(date) {
			if (!date) return '无'
			const d = new Date(date)
			if (isNaN(d.getTime())) return '无'
			return d.toLocaleDateString('zh-CN', {
				year: 'numeric',
				month: '2-digit',
				day: '2-digit'
			})
		},
		// 格式化金额
		formatMoney(amount) {
			if (!amount || amount === 0) return '¥0.00'
			const num = parseFloat(amount)
			if (isNaN(num)) return '¥0.00'
			return '¥' + num.toLocaleString('zh-CN', {
				minimumFractionDigits: 2,
				maximumFractionDigits: 2
			})
		},
		// 获取性别样式类
		getGenderClass(gender) {
			if (gender === '男') return 'gender-male'
			if (gender === '女') return 'gender-female'
			return 'gender-unknown'
		},
		// 获取状态样式类
		getStatusClass(status) {
			if (status === '已绑定') return 'status-bound'
			if (status === '未绑定') return 'status-unbound'
			return 'status-unknown'
		},
		// 显示会员权益
		showMemberRights(memberId) {
			this.memberRightsDialogVisible = true
			this.$nextTick(() => {
				this.$refs.MemberRightsDialog.init(memberId)
			})
		},
		// 打开会员画像弹窗
		openMemberPortrait(memberId) {
			if (!memberId) {
				this.$message.warning('会员ID不能为空')
				return
			}
			this.memberPortraitDialog = {
				visible: true,
				memberId: memberId
			}
		},
		// 显示详情
		showDetail(id) {
			this.detailDialogVisible = true
			this.$nextTick(() => {
				this.$refs.DetailDialog.init(id)
			})
		},
		// 格式化日期时间
		formatDateTime(date) {
			if (!date) return null
			const d = new Date(date)
			if (isNaN(d.getTime())) return null
			return d.toLocaleString('zh-CN', {
				year: 'numeric',
				month: '2-digit',
				day: '2-digit',
				hour: '2-digit',
				minute: '2-digit'
			})
		},
		// 获取消费等级名称
		getConsumeLevelName(level) {
			const levelMap = {
				0: 'D',
				1: 'C',
				2: 'B',
				3: 'A',
				4: 'A+',
				5: 'A++'
			}
			return levelMap[level] || 'D'
		},
		// 获取消费等级标签类型
		getConsumeLevelType(level) {
			const typeMap = {
				0: 'info',
				1: '',
				2: 'warning',
				3: 'success',
				4: 'success',
				5: 'danger'
			}
			return typeMap[level] || 'info'
		},
		handleCommand(command, item) {
			if (command === 'edit') {
				this.addOrUpdateHandle(item.id);
			} else if (command === 'delete') {
				this.handleDel(item.id);
			}
		},
		handleOpCommand(cmd, row) {
			if (cmd === 'detail') this.openMemberPortrait(row.id)
			else if (cmd === 'rights') this.showMemberRights(row.id)
			else if (cmd === 'edit') this.addOrUpdateHandle(row.id)
			else if (cmd === 'delete') this.handleDel(row.id)
		},
		handleColumnCommand() {},
		loadColumnConfig() {
			try {
				const saved = localStorage.getItem('lqKhxx_columnConfig')
				if (saved) {
					const { order, visible } = JSON.parse(saved)
					if (Array.isArray(order)) this.tableColumnsOrder = order
					if (visible && typeof visible === 'object') this.tableColumnsVisible = { ...this.tableColumnsVisible, ...visible }
				}
			} catch (e) { console.warn('loadColumnConfig error:', e) }
			// 确保所有列都有 visible 默认值
			this.tableColumnsOrder.forEach(id => {
				if (this.tableColumnsVisible[id] === undefined) this.$set(this.tableColumnsVisible, id, true)
			})
		},
		saveColumnConfig() {
			try {
				localStorage.setItem('lqKhxx_columnConfig', JSON.stringify({
					order: this.tableColumnsOrder,
					visible: this.tableColumnsVisible
				}))
				// 强制更新表格，确保列顺序变化后立即生效
				this.$nextTick(() => {
					this.$forceUpdate()
				})
			} catch (e) { console.warn('saveColumnConfig error:', e) }
		},
		handleSortChange({ prop, order }) {
			if (!prop || !order) return
			this.listQuery.sidx = prop
			this.listQuery.sort = order === 'ascending' ? 'asc' : 'desc'
			this.initData()
		},
		// 初始化全屏监听
		initFullscreenListener() {
			// 监听全屏状态变化
			const handleFullscreenChange = () => {
				this.isFullscreen = !!(document.fullscreenElement || 
					document.webkitFullscreenElement || 
					document.mozFullScreenElement || 
					document.msFullscreenElement)
			}
			
			document.addEventListener('fullscreenchange', handleFullscreenChange)
			document.addEventListener('webkitfullscreenchange', handleFullscreenChange)
			document.addEventListener('mozfullscreenchange', handleFullscreenChange)
			document.addEventListener('MSFullscreenChange', handleFullscreenChange)
			
			// 保存处理函数引用，用于销毁时移除
			this._fullscreenChangeHandler = handleFullscreenChange
		},
		// 销毁全屏监听
		destroyFullscreenListener() {
			if (this._fullscreenChangeHandler) {
				document.removeEventListener('fullscreenchange', this._fullscreenChangeHandler)
				document.removeEventListener('webkitfullscreenchange', this._fullscreenChangeHandler)
				document.removeEventListener('mozfullscreenchange', this._fullscreenChangeHandler)
				document.removeEventListener('MSFullscreenChange', this._fullscreenChangeHandler)
			}
		}
	}
}
</script>

<style lang="scss" scoped>
// 通用文本不换行样式
.text-nowrap {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

// 客户编码样式
.customer-code-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;

	.customer-code-icon {
		color: #409EFF;
		font-size: 16px;
	}

	span {
		font-weight: 500;
		color: #303133;
	}
}

// 客户名称样式
.customer-name-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;

	.customer-name-icon {
		color: #67C23A;
		font-size: 16px;
	}

	span {
		font-weight: 600;
		color: #303133;
	}
}

// 手机号样式
.phone-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;

	.phone-icon {
		color: #409EFF;
		font-size: 16px;
	}

	span {
		font-weight: 500;
		color: #303133;
	}
}

// 档案号样式
.archive-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;

	.archive-icon {
		color: #909399;
		font-size: 16px;
	}

	span {
		font-weight: 500;
		color: #303133;
	}
}

// 性别样式
.gender-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;

	.gender-icon {
		font-size: 16px;

		&.gender-male {
			color: #409EFF;
		}

		&.gender-female {
			color: #F56C6C;
		}

		&.gender-unknown {
			color: #909399;
		}
	}

	span {
		font-weight: 500;
		color: #303133;
	}
}

// 微信状态样式
.wechat-status-info,
.miniprogram-status-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;

	.wechat-status-icon,
	.miniprogram-status-icon {
		font-size: 16px;

		&.status-bound {
			color: #67C23A;
		}

		&.status-unbound {
			color: #F56C6C;
		}

		&.status-unknown {
			color: #909399;
		}
	}

	span {
		font-weight: 500;
		color: #303133;
	}
}

// 微信昵称样式
.wechat-name-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;

	.wechat-name-icon {
		color: #67C23A;
		font-size: 16px;
	}

	span {
		font-weight: 500;
		color: #303133;
	}
}

// 时间相关样式
.login-time-info,
.register-time-info,
.first-visit-info,
.last-visit-info,
.solar-birthday-info,
.lunar-birthday-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;

	.login-time-icon,
	.register-time-icon,
	.first-visit-icon,
	.last-visit-icon,
	.solar-birthday-icon,
	.lunar-birthday-icon {
		color: #909399;
		font-size: 16px;
	}

	span {
		font-weight: 500;
		color: #303133;
	}
}

// 客户归属样式
.customer-belong-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;

	.customer-belong-icon {
		color: #E6A23C;
		font-size: 16px;
	}

	span {
		font-weight: 500;
		color: #303133;
	}
}

// 门店信息样式
.store-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;

	.store-icon {
		color: #67C23A;
		font-size: 16px;
	}

	span {
		font-weight: 500;
		color: #303133;
	}
}

// 客户类型和阶段样式
.customer-type-info,
.customer-stage-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;

	.customer-type-icon,
	.customer-stage-icon {
		color: #67C23A;
		font-size: 16px;
	}

	span {
		font-weight: 500;
		color: #303133;
	}
}

// 消费相关样式
.customer-consume-info,
.consume-frequency-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;

	.customer-consume-icon,
	.consume-frequency-icon {
		color: #409EFF;
		font-size: 16px;
	}

	span {
		font-weight: 500;
		color: #303133;
	}
}

// 人员信息样式
.referrer-info,
.advisor-info,
.beautician-info,
.recent-service-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;

	.referrer-icon,
	.advisor-icon,
	.beautician-icon,
	.recent-service-icon {
		color: #67C23A;
		font-size: 16px;
	}

	span {
		font-weight: 500;
		color: #303133;
	}
}

// 渠道信息样式
.channel-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;

	.channel-icon {
		color: #909399;
		font-size: 16px;
	}

	span {
		font-weight: 500;
		color: #303133;
	}
}

// 地址和备注样式
.address-info,
.remark-info {
	display: flex;
	align-items: center;
	gap: 6px;

	.address-icon,
	.remark-icon {
		color: #909399;
		font-size: 14px;
	}

	span {
		color: #606266;
	}
}

// 未到店天数样式
.no-visit-days-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;

	.no-visit-days-icon {
		color: #F56C6C;
		font-size: 16px;
	}

	span {
		font-weight: 500;
		color: #F56C6C;
	}
}

// 年龄样式
.age-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;

	.age-icon {
		color: #909399;
		font-size: 16px;
	}

	span {
		font-weight: 500;
		color: #303133;
	}
}

// 频次相关样式
.visit-frequency-info,
.service-times-info,
.total-consume-times-info,
.total-service-times-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;

	.visit-frequency-icon,
	.service-times-icon,
	.total-consume-times-icon,
	.total-service-times-icon {
		color: #409EFF;
		font-size: 16px;
	}

	span {
		font-weight: 500;
		color: #303133;
	}
}

// 金额相关样式
.cash-consume-info,
.card-consume-info,
.stored-consume-info,
.remaining-stored-info,
.remaining-product-info,
.remaining-package-info,
.project-card-info,
.total-stored-consume-info,
.cash-total-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;

	.cash-consume-icon,
	.card-consume-icon,
	.stored-consume-icon,
	.remaining-stored-icon,
	.remaining-product-icon,
	.remaining-package-icon,
	.project-card-icon,
	.total-stored-consume-icon,
	.cash-total-icon {
		color: #409EFF;
		font-size: 16px;
	}

	span {
		font-weight: 600;
		color: #409EFF;
	}
}

// 积分样式
.remaining-points-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;

	.remaining-points-icon {
		color: #E6A23C;
		font-size: 16px;
	}

	span {
		font-weight: 500;
		color: #E6A23C;
	}
}

// 操作按钮样式
.action-buttons {
	display: flex;
	align-items: center;
	gap: 8px;

	.edit-btn {
		color: #409EFF;

		&:hover {
			color: #66b1ff;
		}
	}

	.delete-btn {
		color: #F56C6C;

		&:hover {
			color: #f78989;
		}
	}

	.detail-btn {
		color: #67C23A;

		&:hover {
			color: #85ce61;
		}
	}
}

// 会员类型样式
.member-type-info {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 4px;
}

// 消费等级样式
.consume-level-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;

	.consume-level-icon {
		color: #E6A23C;
		font-size: 16px;
	}
}

// 金额信息样式
.amount-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;

	.amount-icon {
		color: #409EFF;
		font-size: 16px;
	}

	.amount-value {
		font-weight: 600;
		color: #409EFF;
	}
}

// 时间信息样式
.time-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;

	.time-icon {
		color: #909399;
		font-size: 16px;
	}
}

// 天数信息样式
.days-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;

	.days-icon {
		color: #67C23A;
		font-size: 16px;
	}
}

// 沉睡天数样式
.sleep-days-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;

	.sleep-icon {
		color: #909399;
		font-size: 16px;
	}

	&.sleep-warning {
		.sleep-icon {
			color: #F56C6C;
		}

		span {
			color: #F56C6C;
			font-weight: 600;
		}
	}
}

// 表格行悬停效果
::v-deep .el-table__row:hover {
	background-color: #f5f7fa;
}

// 表格头部样式
::v-deep .el-table__header-wrapper {
	.el-table__header {
		th {
			background-color: #f5f7fa;
			color: #606266;
			font-weight: 600;
		}
	}
}

// 卡片视图样式
.member-card-wrapper {
	display: flex;
	flex-direction: column;
	flex: 1;
	height: 100%;
	min-height: 0; // 重要：允许 flex 子元素收缩
	box-sizing: border-box;
	overflow: hidden; // 防止内容溢出
}

.member-card-scroll-container {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 16px 20px; // 合理的容器内边距
	box-sizing: border-box;
	min-height: 0; // 重要：允许 flex 子元素收缩
	// 使用渐变背景（为毛玻璃效果提供视觉基础）
	background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 50%, #E2E8F0 100%);

	// 自定义滚动条样式
	&::-webkit-scrollbar {
		width: 8px;
	}

	&::-webkit-scrollbar-track {
		background: rgba(0, 0, 0, 0.05);
		border-radius: 4px;
	}

	&::-webkit-scrollbar-thumb {
		background: rgba(0, 0, 0, 0.2);
		border-radius: 4px;
		transition: background 0.2s ease;

		&:hover {
			background: rgba(0, 0, 0, 0.3);
		}
	}

	.member-card-row {
		.el-col {
			margin-bottom: 16px; // 合理的卡片间距
			display: flex;
		}
	}

	.empty-data {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 400px;
	}

	.member-card {
		width: 100%;
		display: flex;
		flex-direction: column;
		border-radius: 12px; // 符合规范：12px圆角
		transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); // 更有弹性的动画
		// 精致的毛玻璃效果边框（双层边框）
		border: 1px solid rgba(255, 255, 255, 0.4);
		// 增强的毛玻璃背景
		background: linear-gradient(135deg,
				rgba(255, 255, 255, 0.9) 0%,
				rgba(255, 255, 255, 0.8) 50%,
				rgba(255, 255, 255, 0.85) 100%);
		backdrop-filter: blur(24px) saturate(190%);
		-webkit-backdrop-filter: blur(24px) saturate(190%);
		// 精致的多层次阴影系统（5层阴影，创造更强的深度）
		box-shadow:
			0 2px 4px rgba(0, 0, 0, 0.04),
			0 4px 8px rgba(0, 0, 0, 0.03),
			0 8px 16px rgba(0, 0, 0, 0.02),
			0 16px 32px rgba(0, 0, 0, 0.015),
			inset 0 1px 1px rgba(255, 255, 255, 0.95), // 顶部高光
			inset 0 -1px 1px rgba(0, 0, 0, 0.02); // 底部阴影
		overflow: hidden;
		position: relative;
		cursor: pointer;

		// 添加微妙的渐变遮罩层
		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(135deg,
					rgba(255, 255, 255, 0.1) 0%,
					transparent 50%,
					rgba(0, 0, 0, 0.02) 100%);
			pointer-events: none;
			opacity: 0;
			transition: opacity 0.3s ease;
		}

		// 顶部装饰条（根据等级变化）- 更精致的渐变效果
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 4px;
			background: linear-gradient(90deg,
					#2563EB 0%,
					#3B82F6 50%,
					#60A5FA 100%);
			opacity: 1;
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3); // 添加发光效果
		}

		// 等级差异化样式（A++ - 5级）- 更丰富的渐变和发光效果
		&.level-card-5::before {
			background: linear-gradient(90deg, #DC2626 0%, #EF4444 50%, #F87171 100%);
			height: 5px;
			box-shadow: 0 2px 12px rgba(220, 38, 38, 0.4);
		}

		// A++ - 4级
		&.level-card-4::before {
			background: linear-gradient(90deg, #F97316 0%, #FB923C 50%, #FDBA74 100%);
			height: 5px;
			box-shadow: 0 2px 12px rgba(249, 115, 22, 0.4);
		}

		// A+ - 3级
		&.level-card-3::before {
			background: linear-gradient(90deg, #F59E0B 0%, #FBBF24 50%, #FCD34D 100%);
			height: 4px;
			box-shadow: 0 2px 10px rgba(245, 158, 11, 0.35);
		}

		// A - 2级
		&.level-card-2::before {
			background: linear-gradient(90deg, #10B981 0%, #34D399 50%, #6EE7B7 100%);
			box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
		}

		// C - 1级
		&.level-card-1::before {
			background: linear-gradient(90deg, #3B82F6 0%, #60A5FA 50%, #93C5FD 100%);
			box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
		}

		// D (普通) - 0级
		&.level-card-0::before {
			background: linear-gradient(90deg, #94A3B8 0%, #CBD5E1 50%, #E2E8F0 100%);
			box-shadow: 0 1px 4px rgba(148, 163, 184, 0.2);
		}

		// Hover 效果 - 精致的提升动画
		&:hover {
			transform: translateY(-8px) scale(1.02);
			// 增强毛玻璃效果
			background: linear-gradient(135deg,
					rgba(255, 255, 255, 0.95) 0%,
					rgba(255, 255, 255, 0.9) 50%,
					rgba(255, 255, 255, 0.92) 100%);
			backdrop-filter: blur(30px) saturate(200%);
			-webkit-backdrop-filter: blur(30px) saturate(200%);
			// 增强的悬浮阴影（创造浮动感）
			box-shadow:
				0 8px 16px rgba(0, 0, 0, 0.08),
				0 16px 32px rgba(0, 0, 0, 0.06),
				0 32px 64px rgba(0, 0, 0, 0.04),
				0 0 0 1px rgba(255, 255, 255, 0.6),
				inset 0 2px 2px rgba(255, 255, 255, 0.98),
				inset 0 -1px 2px rgba(0, 0, 0, 0.03);
			border-color: rgba(255, 255, 255, 0.6);
			z-index: 10;

			&::before {
				height: 6px;
				box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4);
			}

			&::after {
				opacity: 1; // 显示渐变遮罩
			}
		}

		// 响应减少动画偏好
		@media (prefers-reduced-motion: reduce) {
			transition: none;

			&:hover {
				transform: none;
			}
		}

		::v-deep .el-card__body {
			padding: 0; // 自定义padding
			flex: 1;
			display: flex;
			flex-direction: column;
		}

		.card-header-wrapper {
			padding: 10px 12px 8px; // 缩小卡片头部内边距
			border-bottom: 1px solid rgba(255, 255, 255, 0.3);
			background: linear-gradient(180deg,
					rgba(255, 255, 255, 0.4) 0%,
					rgba(255, 255, 255, 0.2) 50%,
					rgba(255, 255, 255, 0) 100%);
			position: relative;

			// 添加微妙的光影效果
			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 16px;
				right: 16px;
				height: 1px;
				background: linear-gradient(90deg,
						transparent 0%,
						rgba(255, 255, 255, 0.5) 50%,
						transparent 100%);
			}

			.header-top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 6px; // 缩小间距
				gap: 4px;

				.info-left {
					display: flex;
					align-items: center;
					flex: 1;
					min-width: 0;

					.member-name {
						font-size: 16px; // 增大标题字体，匹配卡片大小
						font-weight: 700;
						color: #0F172A;
						margin-right: 6px;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						letter-spacing: -0.02em;
						line-height: 1.4; // 合理的行高
						text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
					}

					.gender-icon {
						font-size: 14px; // 增大图标

						&.gender-male {
							color: #409EFF;
						}

						&.gender-female {
							color: #F56C6C;
						}

						&.gender-unknown {
							color: #909399;
						}
					}
				}
			}

			.header-tags {
				display: flex;
				flex-wrap: wrap;
				gap: 6px;
				min-height: 24px;

				.mini-tag {
					border-radius: 10px;
					padding: 4px 8px;
					height: 20px;
					line-height: 12px;
					font-size: 11px;
					font-weight: 600;
					transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
					box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
					will-change: box-shadow;
					transform: translateZ(0); // 启用硬件加速

					&:hover {
						box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
					}
				}
			}

			.level-tag {
				font-weight: 700;
				border-radius: 12px;
				padding: 5px 12px;
				font-size: 13px;
				letter-spacing: 0.03em;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
				transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
				will-change: box-shadow;
				transform: translateZ(0); // 启用硬件加速

				&:hover {
					box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
				}
			}
		}

		.card-content {
			flex: 1;
			padding: 10px 12px; // 缩小内容区内边距
			display: flex;
			flex-direction: column;
			gap: 8px; // 缩小间距

			.data-grid {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 6px 8px; // 缩小网格间距

				.data-item {
					display: flex;
					flex-direction: column;
					padding: 3px 0; // 缩小内边距

					&.full-width {
						grid-column: span 2;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						padding: 6px 0 3px; // 缩小内边距
						border-top: 1px dashed rgba(255, 255, 255, 0.3);
						margin-top: 3px;

						.value {
							text-align: right;
							font-weight: 600;
						}
					}

					.label {
						font-size: 13px; // 增大标签字体，匹配卡片大小
						color: #475569;
						margin-bottom: 4px; // 合理的间距
						font-weight: 600;
						text-transform: uppercase;
						letter-spacing: 0.05em;
						line-height: 1.4; // 合理的行高
						display: flex;
						align-items: center;
						gap: 5px; // 合理的图标间距

						.icon-inline {
							font-size: 13px; // 增大图标
							opacity: 0.75;
							transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
							filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.5));
						}

						&:hover .icon-inline {
							opacity: 1;
							transform: scale(1.15) rotate(5deg);
						}
					}

					.icon-warning {
						color: #EF4444;
						opacity: 1 !important;
					}

					.value {
						font-size: 14px; // 增大数据值字体，匹配卡片大小
						color: #0F172A;
						font-weight: 600;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						line-height: 1.5; // 合理的行高
						letter-spacing: -0.01em;

						&.text-truncate {
							max-width: 100%;
						}

						&.text-danger {
							color: #EF4444;
							font-weight: 700;
							position: relative;

							&::after {
								content: '';
								position: absolute;
								bottom: -2px;
								left: 0;
								right: 0;
								height: 2px;
								background: linear-gradient(90deg, rgba(239, 68, 68, 0.3), transparent);
							}
						}
					}
				}
			}

			.amount-section {
				margin-top: auto;
				// 更精致的渐变背景
				background: linear-gradient(135deg,
						rgba(37, 99, 235, 0.12) 0%,
						rgba(59, 130, 246, 0.08) 50%,
						rgba(96, 165, 250, 0.06) 100%);
				backdrop-filter: blur(12px) saturate(150%);
				-webkit-backdrop-filter: blur(12px) saturate(150%);
				border: 1px solid rgba(255, 255, 255, 0.5);
				border-radius: 10px; // 缩小圆角
				padding: 8px 10px; // 缩小内边距
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 6px; // 缩小上边距
				position: relative;
				overflow: hidden;
				box-shadow:
					inset 0 1px 2px rgba(255, 255, 255, 0.6),
					inset 0 -1px 1px rgba(37, 99, 235, 0.1),
					0 2px 8px rgba(37, 99, 235, 0.1);

				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					height: 2px;
					background: linear-gradient(90deg,
							transparent 0%,
							rgba(37, 99, 235, 0.4) 50%,
							transparent 100%);
					box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
				}

				.amount-box {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					gap: 3px; // 缩小间距

					.sub-label {
						font-size: 13px; // 增大金额标签字体
						color: #475569;
						margin-bottom: 4px; // 合理的间距
						font-weight: 600;
						text-transform: uppercase;
						letter-spacing: 0.06em;
						display: flex;
						align-items: center;
						justify-content: center;
						gap: 5px; // 合理的图标间距

						.icon-inline {
							font-size: 13px; // 增大图标
							opacity: 0.8;
							transition: all 0.2s ease;
						}

						&:hover .icon-inline {
							opacity: 1;
							transform: scale(1.1);
						}
					}

					.sub-value {
						font-size: 18px; // 增大金额字体，匹配卡片大小
						font-weight: 700;
						font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Display', 'Helvetica Neue', 'Inter', sans-serif;
						letter-spacing: -0.03em;
						line-height: 1.3; // 合理的行高
						transition: all 0.2s ease;

						&.primary-color {
							color: #2563EB;
							background: linear-gradient(135deg, #2563EB, #3B82F6);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
							background-clip: text;
						}

						&.warning-color {
							color: #F97316;
							background: linear-gradient(135deg, #F97316, #FB923C);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
							background-clip: text;
						}
					}
				}

				.divider {
					width: 1px;
					height: 32px; // 合理的高度
					background: linear-gradient(180deg, transparent, rgba(226, 232, 240, 0.8), transparent);
					margin: 0 12px; // 合理的边距
				}
			}
		}

		.card-footer {
			margin-top: 0;
			padding: 12px 14px; // 符合规范：12px内边距
			border-top: 1px solid rgba(255, 255, 255, 0.3);
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: linear-gradient(180deg,
					rgba(255, 255, 255, 0) 0%,
					rgba(255, 255, 255, 0.2) 50%,
					rgba(248, 250, 252, 0.4) 100%);
			gap: 8px; // 合理的间距
			position: relative;

			// 顶部高光线条
			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 16px;
				right: 16px;
				height: 1px;
				background: linear-gradient(90deg,
						transparent 0%,
						rgba(255, 255, 255, 0.6) 50%,
						transparent 100%);
			}

			.action-btn {
				padding: 6px 12px; // 合理的内边距
				font-size: 13px; // 增大按钮字体
				display: flex;
				align-items: center;
				gap: 6px; // 合理的间距
				border-radius: 8px;
				transition: all 0.2s ease;
				font-weight: 500;
				cursor: pointer;

				&.view-btn {
					color: #475569;
					background: transparent;

					&:hover {
						color: #2563EB;
						background: rgba(37, 99, 235, 0.08);
						transform: translateY(-1px);
					}
				}

				&.rights-btn {
					color: #475569;
					background: transparent;

					&:hover {
						color: #F97316;
						background: rgba(249, 115, 22, 0.08);
						transform: translateY(-1px);
					}
				}

				i {
					font-size: 15px; // 增大按钮图标
					transition: transform 0.2s ease;
				}

				&:hover i {
					transform: scale(1.1);
				}
			}

			.more-actions {
				.el-dropdown-link {
					cursor: pointer;
					color: #64748B;
					font-size: 13px; // 增大更多按钮字体
					padding: 6px 12px; // 合理的内边距
					border-radius: 8px;
					transition: all 0.2s ease;
					font-weight: 500;
					display: flex;
					align-items: center;
					gap: 4px; // 合理的间距

					&:hover {
						color: #2563EB;
						background: rgba(37, 99, 235, 0.08);
					}

					i {
						font-size: 13px; // 增大图标
						transition: transform 0.2s ease;
					}
				}
			}
		}
	}

	.empty-data {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 400px;
	}
}

// 分页组件样式（卡片模式）
::v-deep .pagination-card-mode {
	flex-shrink: 0;
	position: relative;
	z-index: 20;
	margin-top: 16px;
	padding: 12px 0;
	background: transparent;
}

/* ============================================
   现代化筛选卡片样式
   ============================================ */
.search-card {
	margin-bottom: 16px;
	border-radius: 12px;
	border: 1px solid #e8e8e8;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	/* 初始状态：隐藏在上方 */
	opacity: 0;
	transform: translateY(-20px);
	max-height: 0;
	overflow: hidden;

	&.search-card-animated {
		/* 动画状态：显示并滑入 */
		opacity: 1;
		transform: translateY(0);
		max-height: 2000px;
		transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
			transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
			max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	}

	&:hover {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	}

	::v-deep .el-card__body {
		padding: 16px 24px;
	}

	.search-row {
		margin-bottom: 0;
		transition: margin 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		row-gap: 16px;

		.el-col {
			display: flex;
			align-items: stretch;
		}

		.el-form-item {
			margin-bottom: 0;
			width: 100%;
			display: flex;
			align-items: center;
			min-height: 32px;

			::v-deep .el-form-item__label {
				height: 32px;
				line-height: 32px;
				padding-bottom: 0;
				padding-top: 0;
				margin-bottom: 0;
				display: flex;
				align-items: center;
				flex-shrink: 0;
			}

			::v-deep .el-form-item__content {
				line-height: 32px;
				display: flex;
				align-items: center;
				flex: 1;
				min-height: 32px;
			}
		}
	}

	/* 第一行默认显示，有页面加载动画 */
	.search-row-1 {
		margin-bottom: 0;
		opacity: 0;
		transform: translate3d(0, -10px, 0);
		transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s,
			transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
		will-change: opacity, transform;
		backface-visibility: hidden;
		perspective: 1000px;
	}

	/* 卡片动画完成后，第一行滑入 */
	&.search-card-animated {
		.search-row-1 {
			opacity: 1;
			transform: translate3d(0, 0, 0);
		}
	}

	/* 展开面板滑动动画 */
	.filter-expand-panel {
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
			opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.05s,
			padding-top 0.25s cubic-bezier(0.4, 0, 0.2, 1),
			margin-top 0.25s cubic-bezier(0.4, 0, 0.2, 1);
		padding-top: 0;
		margin-top: 0;
		will-change: max-height, opacity;
		backface-visibility: hidden;

		&.is-expanded {
			max-height: 1000px;
			opacity: 1;
			padding-top: 16px;
			margin-top: 0;
			transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
				opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.05s,
				padding-top 0.25s cubic-bezier(0.4, 0, 0.2, 1),
				margin-top 0.25s cubic-bezier(0.4, 0, 0.2, 1);
		}

		.search-row {
			opacity: 1;
			transform: translateY(0);
			margin-bottom: 16px;
			row-gap: 16px;

			&:last-child {
				margin-bottom: 0;
			}

			.el-col {
				display: flex;
				align-items: stretch;
			}

			.el-form-item {
				margin-bottom: 0;
				width: 100%;
				display: flex;
				align-items: center;
				min-height: 32px;

				::v-deep .el-form-item__label {
					height: 32px;
					line-height: 32px;
					padding-bottom: 0;
					padding-top: 0;
					margin-bottom: 0;
					display: flex;
					align-items: center;
					flex-shrink: 0;
				}

				::v-deep .el-form-item__content {
					line-height: 32px;
					display: flex;
					align-items: center;
					flex: 1;
					min-height: 32px;
				}
			}
		}
	}

	.el-form {
		::v-deep .el-row {
			display: flex;
			flex-wrap: wrap;
		}

		::v-deep .el-col {
			display: flex;
			align-items: stretch;
		}

		.el-form-item {
			width: 100%;
			display: flex;
			align-items: center;
			margin-bottom: 0;

			::v-deep .el-form-item__label {
				color: #595959;
				font-weight: 500;
				height: 32px;
				line-height: 32px;
				padding-bottom: 0;
				padding-top: 0;
				margin-bottom: 0;
				display: flex;
				align-items: center;
				flex-shrink: 0;
			}

			::v-deep .el-form-item__content {
				line-height: 32px;
				display: flex;
				align-items: center;
				flex: 1;
				min-height: 32px;
			}

			::v-deep .el-input,
			::v-deep .el-select,
			::v-deep .el-date-editor {
				width: 100%;
				display: flex;
				align-items: center;
				vertical-align: middle;
			}

			::v-deep .el-input__inner,
			::v-deep .el-select .el-input__inner,
			::v-deep .el-date-editor.el-input__inner {
				height: 32px;
				line-height: 32px;
				border-radius: 6px;
				border-color: #d9d9d9;
				transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
				vertical-align: middle;
				box-sizing: border-box;

				&:hover {
					border-color: #40a9ff;
				}

				&:focus {
					border-color: #1890ff;
					box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
				}
			}

			::v-deep .el-input__prefix,
			::v-deep .el-input__suffix {
				.el-input__icon {
					line-height: 32px;
				}
			}

			::v-deep .el-select__caret {
				line-height: 32px;
			}

			::v-deep .el-date-editor {
				width: 100%;
				display: flex;
				align-items: center;

				&.el-input {
					width: 100%;
					display: flex;
					align-items: center;

					.el-input__inner {
						height: 32px;
						line-height: 32px;
						width: 100%;
					}
				}

				&.el-input__inner {
					height: 32px;
					line-height: 32px;
					width: 100%;
				}
			}

			// 日期范围选择器特殊处理
			::v-deep .el-range-editor {
				&.el-input__inner {
					height: 32px;
					line-height: 32px;
					display: flex;
					align-items: center;
					padding: 0 10px;

					.el-range-input {
						height: 30px;
						line-height: 30px;
						flex: 1;
					}

					.el-range-separator {
						line-height: 30px;
						padding: 0 8px;
						flex-shrink: 0;
					}
				}
			}

			// 输入框组（如沉睡天数的范围输入）
			::v-deep .el-input-group {
				display: flex;
				align-items: center;
				width: 100%;

				.el-input__inner {
					height: 32px;
					line-height: 32px;
					flex: 1;
				}

				.el-input-group__prepend {
					height: 32px;
					line-height: 30px;
					display: flex;
					align-items: center;
					padding: 0 12px;
					flex-shrink: 0;
				}
			}
		}
	}

	.search-actions {
		display: flex;
		align-items: flex-end;
		height: 100%;
		gap: 8px;
		justify-content: flex-start;
		padding-top: 2px;

		.el-button {
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		}
	}

	.remaining-rights-range {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;

		.range-sep {
			color: #909399;
			font-size: 14px;
			flex-shrink: 0;
		}

		::v-deep .el-input__inner {
			text-align: center;
		}
	}

	.search-actions-inline {
		display: flex;
		align-items: center;
		height: 32px;
		gap: 8px;
		justify-content: flex-end;
		padding-top: 0;
		width: 100%;

		.el-button {
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			height: 32px;
			line-height: 32px;
			padding: 0 15px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			vertical-align: middle;

			&[type="text"] {
				padding: 0 15px;
				height: 32px;
				line-height: 32px;
			}

			&.el-button--small {
				height: 28px;
				line-height: 28px;
				padding: 0 12px;
			}
		}
	}
}

/* 滑动展开筛选面板 - 流畅的向下展开动画 */

/* 列设置下拉面板 */
.column-setting-dropdown {
	padding: 0 !important;
	min-width: 220px;
}
.column-setting-panel {
	padding: 12px 16px;
	max-height: 400px;
	overflow-y: auto;
}
.column-setting-title {
	font-size: 13px;
	color: #606266;
	margin-bottom: 12px;
	font-weight: 500;
}
.column-draggable-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.column-drag-ghost {
	opacity: 0.5;
	background: #e6f7ff;
}
.column-draggable-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	border-radius: 6px;
	transition: background 0.2s;
	&:hover {
		background: #f5f7fa;
	}
	.drag-handle {
		color: #909399;
		font-size: 14px;
		cursor: grab;
		user-select: none;
		flex-shrink: 0;
		padding: 2px;
		&:active {
			cursor: grabbing;
		}
	}
	.el-checkbox {
		flex: 1;
		margin-right: 0;
		min-width: 0;
	}
}

.toolbar-card {
	margin-bottom: 16px;
	border-radius: 12px;
	border: 1px solid #e8e8e8;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

	::v-deep .el-card__body {
		padding: 16px 24px;
	}

	.toolbar-container {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.toolbar-left {
			.el-button-group {
				.el-button {
					border-radius: 6px;

					&:first-child {
						border-top-right-radius: 0;
						border-bottom-right-radius: 0;
					}

					&:last-child {
						border-top-left-radius: 0;
						border-bottom-left-radius: 0;
					}

					&:not(:first-child):not(:last-child) {
						border-radius: 0;
					}
				}
			}
		}

		.toolbar-right {
			display: flex;
			align-items: center;
			gap: 12px;

			.el-radio-group {
				border-radius: 6px;
				overflow: hidden;
			}

			.el-divider--vertical {
				height: 1.5em;
				margin: 0 8px;
			}
		}
	}
}

/* ============================================
   现代化表格样式
   ============================================ */
::v-deep .el-table {
	font-size: 14px;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

	th {
		background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%) !important;
		color: #262626 !important;
		font-weight: 600;
		font-size: 14px;
		border-bottom: 2px solid #e8e8e8;
		padding: 14px 0;
		white-space: nowrap;

		.cell {
			white-space: nowrap !important;
		}
	}

	td {
		border-bottom: 1px solid #f0f0f0;
		padding: 14px 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		transform: translateZ(0); // 启用硬件加速，防止闪烁
		backface-visibility: hidden;
	}

	td.column-khmc-full {
		overflow: visible !important;
		text-overflow: unset;

		.cell {
			overflow: visible !important;
			text-overflow: unset;
			min-width: max-content;
		}
	}

	tr {
		transition: background-color 0.15s ease;
		will-change: background-color;

		&:hover>td {
			background: #f7f9fc !important;
		}
	}

	.el-table__body-wrapper {
		scrollbar-width: thin;
		scrollbar-color: #d9d9d9 transparent;

		&::-webkit-scrollbar {
			height: 10px;
			width: 10px;
		}

		&::-webkit-scrollbar-track {
			background: #f5f5f5;
			border-radius: 5px;
		}

		&::-webkit-scrollbar-thumb {
			background: linear-gradient(180deg, #d9d9d9 0%, #bfbfbf 100%);
			border-radius: 5px;
			border: 2px solid #f5f5f5;

			&:hover {
				background: linear-gradient(180deg, #bfbfbf 0%, #999 100%);
			}
		}
	}

	.el-table__fixed,
	.el-table__fixed-right {
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.06);
	}
}

// 表格单元格样式
.table-cell-with-icon {
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	overflow: hidden;

	.cell-icon {
		font-size: 16px;
		flex-shrink: 0;

		&.primary {
			color: #1890ff;
		}

		&.success {
			color: #52c41a;
		}

		&.warning {
			color: #faad14;
		}

		&.danger {
			color: #ff4d4f;
		}

		&.info {
			color: #8c8c8c;
		}
	}

	.cell-text {
		color: #262626;
		font-weight: 500;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	&.table-cell-name-full {
		overflow: visible;
		min-width: max-content;

		.cell-text-full {
			overflow: visible;
			text-overflow: unset;
			white-space: nowrap;
		}
	}
}

.cell-text-plain {
	color: #595959;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
	max-width: 100%;

	&.muted {
		color: #8c8c8c;
	}
}

// 金额样式
.amount-text {
	font-weight: 600;
	font-family: 'Helvetica Neue', -apple-system, sans-serif;

	&.primary {
		color: #1890ff;
	}

	&.success {
		color: #52c41a;
	}

	&.warning {
		color: #faad14;
	}

	&.danger {
		color: #ff4d4f;
	}
}

// 会员标签组（列表内不换行）
.member-tags {
	display: flex;
	//gap: 4px;
	flex-wrap: nowrap;
	justify-content: center;
	white-space: nowrap;

	.el-tag {
		margin: 0;
		flex-shrink: 0;
	}
}

// 操作按钮组
::v-deep .action-buttons {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;

	.el-button {
		padding: 0;
		font-size: 14px;
		transition: all 0.2s;

		&.detail-btn {
			color: #1890ff;

			&:hover {
				color: #40a9ff;
				transform: translateY(-1px);
			}
		}

		&.edit-btn {
			color: #52c41a;

			&:hover {
				color: #73d13d;
				transform: translateY(-1px);
			}
		}

		&.delete-btn {
			color: #ff4d4f;

			&:hover {
				color: #ff7875;
				transform: translateY(-1px);
			}
		}
	}
}

/* ============================================
   页面整体现代化样式
   ============================================ */
.NCC-common-layout {
	background: #f5f7fa;
	min-height: 100vh;
	
	/* 全屏状态样式修复 */
	&:fullscreen {
		width: 100vw;
		height: 100vh;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background: #f5f7fa;
	}
	
	/* 兼容webkit全屏 */
	&:-webkit-full-screen {
		width: 100vw;
		height: 100vh;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background: #f5f7fa;
	}
	
	/* 兼容moz全屏 */
	&:-moz-full-screen {
		width: 100vw;
		height: 100vh;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background: #f5f7fa;
	}
	
	/* 兼容ms全屏 */
	&:-ms-fullscreen {
		width: 100vw;
		height: 100vh;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		background: #f5f7fa;
	}
}

.NCC-common-layout-center {
	padding: 16px;
}

/* 全屏状态下确保布局正确 */
.NCC-common-layout:fullscreen .NCC-common-layout-center,
.NCC-common-layout:-webkit-full-screen .NCC-common-layout-center,
.NCC-common-layout:-moz-full-screen .NCC-common-layout-center,
.NCC-common-layout:-ms-fullscreen .NCC-common-layout-center {
	flex: 1;
	height: 100%;
	min-height: 0; /* 允许flex子元素缩小 */
	overflow: hidden; /* 保持hidden，让子元素处理滚动 */
	display: flex;
	flex-direction: column;
	padding: 16px; /* 保持padding */
}

.NCC-common-layout-main {
	background: transparent;
}

/* 全屏状态下确保主内容区域正确显示 */
.NCC-common-layout:fullscreen .NCC-common-layout-main,
.NCC-common-layout:-webkit-full-screen .NCC-common-layout-main,
.NCC-common-layout:-moz-full-screen .NCC-common-layout-main,
.NCC-common-layout:-ms-fullscreen .NCC-common-layout-main {
	flex: 1;
	overflow: auto; /* 允许滚动 */
	height: 100%;
	min-height: 0; /* 允许flex子元素缩小 */
	display: flex;
	flex-direction: column;
}


/* ============================================
   现代化标签样式系统
   ============================================ */
::v-deep .el-tag {
	border-radius: 12px;
	padding: 4px 12px;
	font-weight: 600;
	font-size: 12px;
	border: none;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
	transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
	will-change: transform, box-shadow;
	transform: translateZ(0); // 启用硬件加速

	&.el-tag--small {
		height: 24px;
		line-height: 16px;
		padding: 4px 10px;
		font-size: 12px;
		border-radius: 12px;
	}

	&.el-tag--mini {
		height: 20px;
		line-height: 12px;
		padding: 4px 8px;
		font-size: 11px;
		border-radius: 10px;
		font-weight: 500;
	}

	/* Plain风格 - 现代化半透明背景 */
	&.el-tag--plain {
		background: rgba(0, 0, 0, 0.05);
		color: #595959;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

		&.el-tag--success {
			background: linear-gradient(135deg, rgba(82, 196, 26, 0.15) 0%, rgba(82, 196, 26, 0.1) 100%);
			color: #389e0d;
			border: 1px solid rgba(82, 196, 26, 0.2);
			box-shadow: 0 2px 6px rgba(82, 196, 26, 0.15);

			&:hover {
				background: linear-gradient(135deg, rgba(82, 196, 26, 0.2) 0%, rgba(82, 196, 26, 0.15) 100%);
				box-shadow: 0 4px 8px rgba(82, 196, 26, 0.2);
			}
		}

		&.el-tag--warning {
			background: linear-gradient(135deg, rgba(250, 173, 20, 0.15) 0%, rgba(250, 173, 20, 0.1) 100%);
			color: #d48806;
			border: 1px solid rgba(250, 173, 20, 0.2);
			box-shadow: 0 2px 6px rgba(250, 173, 20, 0.15);

			&:hover {
				background: linear-gradient(135deg, rgba(250, 173, 20, 0.2) 0%, rgba(250, 173, 20, 0.15) 100%);
				box-shadow: 0 4px 8px rgba(250, 173, 20, 0.2);
			}
		}

		&.el-tag--danger {
			background: linear-gradient(135deg, rgba(255, 77, 79, 0.15) 0%, rgba(255, 77, 79, 0.1) 100%);
			color: #cf1322;
			border: 1px solid rgba(255, 77, 79, 0.2);
			box-shadow: 0 2px 6px rgba(255, 77, 79, 0.15);

			&:hover {
				background: linear-gradient(135deg, rgba(255, 77, 79, 0.2) 0%, rgba(255, 77, 79, 0.15) 100%);
				box-shadow: 0 4px 8px rgba(255, 77, 79, 0.2);
			}
		}

		&.el-tag--info {
			background: linear-gradient(135deg, rgba(140, 140, 140, 0.12) 0%, rgba(140, 140, 140, 0.08) 100%);
			color: #595959;
			border: 1px solid rgba(140, 140, 140, 0.15);
			box-shadow: 0 2px 6px rgba(140, 140, 140, 0.1);

			&:hover {
				background: linear-gradient(135deg, rgba(140, 140, 140, 0.18) 0%, rgba(140, 140, 140, 0.12) 100%);
				box-shadow: 0 4px 8px rgba(140, 140, 140, 0.15);
			}
		}

		&.el-tag--primary {
			background: linear-gradient(135deg, rgba(24, 144, 255, 0.15) 0%, rgba(24, 144, 255, 0.1) 100%);
			color: #0958d9;
			border: 1px solid rgba(24, 144, 255, 0.2);
			box-shadow: 0 2px 6px rgba(24, 144, 255, 0.15);

			&:hover {
				background: linear-gradient(135deg, rgba(24, 144, 255, 0.2) 0%, rgba(24, 144, 255, 0.15) 100%);
				box-shadow: 0 4px 8px rgba(24, 144, 255, 0.2);
			}
		}
	}

	/* Dark风格 - 现代化渐变背景 */
	&.el-tag--dark {
		font-weight: 600;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

		&.el-tag--primary {
			background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
			color: #ffffff;
			box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);

			&:hover {
				background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
				box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
				transform: translateY(-1px);
			}
		}

		&.el-tag--success {
			background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
			color: #ffffff;
			box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3);

			&:hover {
				background: linear-gradient(135deg, #73d13d 0%, #52c41a 100%);
				box-shadow: 0 4px 12px rgba(82, 196, 26, 0.4);
				transform: translateY(-1px);
			}
		}

		&.el-tag--warning {
			background: linear-gradient(135deg, #faad14 0%, #d48806 100%);
			color: #ffffff;
			box-shadow: 0 2px 8px rgba(250, 173, 20, 0.3);

			&:hover {
				background: linear-gradient(135deg, #ffc53d 0%, #faad14 100%);
				box-shadow: 0 4px 12px rgba(250, 173, 20, 0.4);
				transform: translateY(-1px);
			}
		}

		&.el-tag--danger {
			background: linear-gradient(135deg, #ff4d4f 0%, #cf1322 100%);
			color: #ffffff;
			box-shadow: 0 2px 8px rgba(255, 77, 79, 0.3);

			&:hover {
				background: linear-gradient(135deg, #ff7875 0%, #ff4d4f 100%);
				box-shadow: 0 4px 12px rgba(255, 77, 79, 0.4);
				transform: translateY(-1px);
			}
		}

		&.el-tag--info {
			background: linear-gradient(135deg, #8c8c8c 0%, #595959 100%);
			color: #ffffff;
			box-shadow: 0 2px 8px rgba(140, 140, 140, 0.3);

			&:hover {
				background: linear-gradient(135deg, #bfbfbf 0%, #8c8c8c 100%);
				box-shadow: 0 4px 12px rgba(140, 140, 140, 0.4);
				transform: translateY(-1px);
			}
		}
	}
}

/* 标签组样式（表格内会员类型不换行） */
.member-tags {
	display: flex;
	gap: 6px;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	white-space: nowrap;

	.el-tag {
		margin: 0;
		flex-shrink: 0;
	}
}

/* 按钮现代化 */
::v-deep .el-button {
	border-radius: 6px;
	transition: all 0.3s;
	font-weight: 500;

	&.el-button--primary {
		background: #1890ff;
		border-color: #1890ff;

		&:hover {
			background: #40a9ff;
			border-color: #40a9ff;
			transform: translateY(-2px);
			box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
		}

		&:active {
			transform: translateY(0);
		}
	}

	&.el-button--danger {
		&:hover {
			transform: translateY(-2px);
			box-shadow: 0 4px 12px rgba(255, 77, 79, 0.3);
		}

		&:active {
			transform: translateY(0);
		}
	}

	&.el-button--default {
		&:hover {
			color: #1890ff;
			border-color: #1890ff;
		}
	}

	&.is-circle {
		transition: all 0.3s;

		&:hover {
			transform: rotate(180deg);
		}
	}
}

/* 输入框现代化 */
::v-deep .el-input__inner {
	transition: all 0.3s;

	&:hover {
		border-color: #40a9ff;
	}

	&:focus {
		border-color: #1890ff;
		box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
	}
}

/* 下拉框现代化 */
::v-deep .el-select {
	.el-input__inner {
		&:hover {
			border-color: #40a9ff;
		}
	}

	&.is-focus .el-input__inner {
		border-color: #1890ff;
	}
}

/* 日期选择器现代化 */
::v-deep .el-date-editor {
	.el-input__inner {
		&:hover {
			border-color: #40a9ff;
		}
	}

	&.is-active .el-input__inner {
		border-color: #1890ff;
	}
}

/* 分页现代化 */
::v-deep .el-pagination {

	.el-pagination__total,
	.el-pagination__jump {
		color: #595959;
		font-weight: 500;
	}

	.btn-prev,
	.btn-next,
	.el-pager li {
		border-radius: 6px;
		font-weight: 500;
		transition: all 0.3s;

		&:hover {
			color: #1890ff;
			transform: translateY(-2px);
		}

		&.active {
			background: #1890ff;
			transform: translateY(-2px);
			box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
		}
	}
}
</style>

<style lang="scss">
/* 现代化加载界面样式 - Glassmorphism风格 */
.modern-loading-mask {
	background: rgba(255, 255, 255, 0.92) !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: opacity 0.3s ease;

	.el-loading-spinner {
		.el-loading-text {
			color: #262626 !important;
			font-size: 15px !important;
			font-weight: 500 !important;
			letter-spacing: 0.5px !important;
			margin-top: 20px !important;
			text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
		}

		i {
			font-size: 42px !important;
			color: #1890ff !important;
		}
	}
}

/* 全屏状态下隐藏搜索卡片 */
.NCC-common-layout:fullscreen .NCC-common-layout-center > .search-card,
.NCC-common-layout:-webkit-full-screen .NCC-common-layout-center > .search-card,
.NCC-common-layout:-moz-full-screen .NCC-common-layout-center > .search-card,
.NCC-common-layout:-ms-fullscreen .NCC-common-layout-center > .search-card {
	display: none !important;
}

/* 全屏状态下隐藏工具栏左侧按钮组 */
.NCC-common-layout:fullscreen .toolbar-left,
.NCC-common-layout:-webkit-full-screen .toolbar-left,
.NCC-common-layout:-moz-full-screen .toolbar-left,
.NCC-common-layout:-ms-fullscreen .toolbar-left {
	display: none !important;
}

/* 全屏状态下隐藏列设置下拉菜单 */
.NCC-common-layout:fullscreen .toolbar-right .el-dropdown,
.NCC-common-layout:-webkit-full-screen .toolbar-right .el-dropdown,
.NCC-common-layout:-moz-full-screen .toolbar-right .el-dropdown,
.NCC-common-layout:-ms-fullscreen .toolbar-right .el-dropdown {
	display: none !important;
}
</style>
