﻿<template>
	<div class="NCC-common-layout">
		<div class="NCC-common-layout-center">
			<el-row class="NCC-common-search-box" :gutter="16">
				<el-form @submit.native.prevent>
					<el-col :span="6">
						<el-form-item label="客户名称">
							<el-input v-model="query.khmc" placeholder="客户名称" clearable />
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="手机号">
							<el-input v-model="query.sjh" placeholder="手机号" clearable />
						</el-form-item>
					</el-col>
					<template v-if="showAll">
						<el-col :span="6">
							<el-form-item label="性别">
								<el-select v-model="query.xb" placeholder="性别" clearable>
									<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="6">
							<el-form-item label="归属门店">
								<el-select v-model="query.gsmd" placeholder="请选择门店" clearable filterable>
									<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="6">
							<el-form-item label="客户类型">
								<el-select v-model="query.khlx" placeholder="客户类型" clearable>
									<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="6">
							<el-form-item label="健康师">
								<el-input v-model="query.mainHealthUser" placeholder="健康师" clearable />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="负责顾问">
								<el-input v-model="query.subHealthUser" placeholder="负责顾问" clearable />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="进店渠道">
								<el-select v-model="query.jdqd" placeholder="请选择进店渠道" clearable filterable>
									<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.tjr"
									filterable
									remote
									reserve-keyword
									placeholder="请输入关键词搜索"
									:remote-method="remoteMethod"
									:loading="kdhyLoading"
									clearable>
									<el-option
										v-for="item in kdhyOptions"
										:key="item.value"
										:label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<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="结束日期">
								</el-date-picker>
							</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="结束日期">
								</el-date-picker>
							</el-form-item>
						</el-col>
					</template>
					<el-col :span="6">
						<el-form-item>
							<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="el-icon-arrow-down" @click="showAll = true"
								v-if="!showAll">展开</el-button>
							<el-button type="text" icon="el-icon-arrow-up" @click="showAll = false"
								v-else>收起</el-button>
						</el-form-item>
					</el-col>
				</el-form>
			</el-row>
			<div class="NCC-common-layout-main NCC-flex-main">
				<div class="NCC-common-head">
					<div>
						<el-button  type="primary" icon="el-icon-plus" @click="addOrUpdateHandle()">新增</el-button>
						<el-button type="text" icon="el-icon-download" @click="exportData()">导出</el-button>
						<el-button v-has="'btn_remove'" type="text" icon="el-icon-delete" @click="handleBatchRemoveDel()">批量删除</el-button>
					</div>
					<div class="NCC-common-head-right">
						<el-tooltip effect="dark" content="刷新" placement="top">
							<el-link icon="icon-ym icon-ym-Refresh NCC-common-head-icon" :underline="false"
								@click="reset()" />
						</el-tooltip>
						<screenfull isContainer />
					</div>
				</div>
				<NCC-table v-loading="listLoading" :data="list" has-c @selection-change="handleSelectionChange"
					:header-cell-style="{ background: '#f5f7fa', color: '#606266' }">
					<!-- 客户编码 -->
					<el-table-column label="客户编码"  align="center">
						<template slot-scope="scope">
							<div class="customer-code-info">
								<i class="el-icon-postcard customer-code-icon"></i>
								<span class="text-nowrap">{{ scope.row.id || '无' }}</span>
							</div>
						</template>
					</el-table-column>

					<!-- 客户名称 -->
					<el-table-column label="客户名称"  align="center">
						<template slot-scope="scope">
							<div class="customer-name-info">
								<i class="el-icon-user-solid customer-name-icon"></i>
								<span class="text-nowrap">{{ scope.row.khmc || '无' }}</span>
							</div>
						</template>
					</el-table-column>

					<!-- 手机号 -->
					<el-table-column label="手机号" align="center">
						<template slot-scope="scope">
							<div class="phone-info">
								<i class="el-icon-phone phone-icon"></i>
								<span class="text-nowrap">{{ scope.row.sjh || '无' }}</span>
							</div>
						</template>
					</el-table-column>

					<!-- 性别 -->
					<el-table-column label="性别"  align="center">
						<template slot-scope="scope">
							<div class="gender-info">
								<i class="el-icon-user gender-icon" :class="getGenderClass(scope.row.xb)"></i>
								<span class="text-nowrap">{{ scope.row.xb | dynamicText(xbOptions) || '无' }}</span>
							</div>
						</template>
					</el-table-column>

					<!-- 归属门店 -->
					<el-table-column label="归属门店"  align="center">
						<template slot-scope="scope">
							<div class="store-info">
								<i class="el-icon-office-building store-icon"></i>
								<span class="text-nowrap">{{ scope.row.gsmdName || '无' }}</span>
							</div>
						</template>
					</el-table-column>

					<!-- 客户类型 -->
					<el-table-column label="客户类型"  align="center">
						<template slot-scope="scope">
							<div class="customer-type-info">
								<i class="el-icon-user customer-type-icon"></i>
								<span class="text-nowrap">{{ scope.row.khlxName }}</span>
							</div>
						</template>
					</el-table-column>
					<!-- 健康师 -->
					<el-table-column label="健康师"  align="center">
						<template slot-scope="scope">
							<div class="beautician-info">
								<i class="el-icon-user beautician-icon"></i>
								<span class="text-nowrap">{{ scope.row.mainHealthUserName || '无' }}</span>
							</div>
						</template>
					</el-table-column>
						<!-- 负责顾问 -->
					<el-table-column label="负责顾问"  align="center">
						<template slot-scope="scope">
							<div class="advisor-info">
								<i class="el-icon-service advisor-icon"></i>
								<span class="text-nowrap">{{ scope.row.subHealthUserName || '无' }}</span>
							</div>
						</template>
					</el-table-column>
					<!-- 进店渠道 -->
					<el-table-column label="进店渠道"  align="center">
						<template slot-scope="scope">
							<div class="channel-info">
								<i class="el-icon-connection channel-icon"></i>
								<span class="text-nowrap">{{ scope.row.jdqd || '无' }}</span>
							</div>
						</template>
					</el-table-column>
					<!-- 推荐人 -->
					<el-table-column label="推荐人" align="center">
						<template slot-scope="scope">
							<div class="referrer-info">
								<i class="el-icon-user referrer-icon"></i>
								<span class="text-nowrap">{{ scope.row.tjrName || '无' }}</span>
							</div>
						</template>
					</el-table-column>
					<!-- 拓客人员 -->
					<el-table-column label="拓客人员"  align="center">
						<template slot-scope="scope">
							<div class="referrer-info">
								<i class="el-icon-user referrer-icon"></i>
								<span class="text-nowrap">{{ scope.row.expandUserName || '无' }}</span>
							</div>
						</template>
					</el-table-column>

					<!-- 会员类型 -->
					<el-table-column label="会员类型" align="center" min-width="120">
						<template slot-scope="scope">
							<div class="member-type-info">
								<el-tag v-if="scope.row.isBeautyMember === 1" type="success" size="mini" style="margin-right: 4px;">生美</el-tag>
								<el-tag v-if="scope.row.isMedicalMember === 1" type="warning" size="mini" style="margin-right: 4px;">医美</el-tag>
								<el-tag v-if="scope.row.isTechMember === 1" type="info" size="mini" style="margin-right: 4px;">科技部</el-tag>
								<el-tag v-if="scope.row.isEducationMember === 1" type="primary" size="mini">教育部</el-tag>
								<span v-if="scope.row.isBeautyMember !== 1 && scope.row.isMedicalMember !== 1 && scope.row.isTechMember !== 1 && scope.row.isEducationMember !== 1" class="text-nowrap">无</span>
							</div>
						</template>
					</el-table-column>

					<!-- 消费等级 -->
					<el-table-column label="消费等级" align="center">
						<template slot-scope="scope">
							<div class="consume-level-info">
								<i class="el-icon-trophy consume-level-icon"></i>
								<el-tag :type="getConsumeLevelType(scope.row.consumeLevel)" size="mini">
									{{ getConsumeLevelName(scope.row.consumeLevel) }}
								</el-tag>
							</div>
						</template>
					</el-table-column>

					<!-- 开卡总金额 -->
					<el-table-column label="开卡总金额" align="center">
						<template slot-scope="scope">
							<div class="amount-info">
								<i class="el-icon-wallet amount-icon"></i>
								<span class="text-nowrap amount-value">{{ formatMoney(scope.row.totalBillingAmount) }}</span>
							</div>
						</template>
					</el-table-column>

					<!-- 剩余权益总金额 -->
					<el-table-column label="剩余权益总金额" align="center" width="150">
						<template slot-scope="scope">
							<div class="amount-info">
								<i class="el-icon-coin amount-icon"></i>
								<span class="text-nowrap amount-value">{{ formatMoney(scope.row.remainingRightsAmount) }}</span>
							</div>
						</template>
					</el-table-column>

					<!-- 首次到店时间 -->
					<el-table-column label="首次到店时间" align="center" min-width="120">
						<template slot-scope="scope">
							<div class="time-info">
								<i class="el-icon-time time-icon"></i>
								<span class="text-nowrap">{{ formatDateTime(scope.row.firstVisitTime) || '无' }}</span>
							</div>
						</template>
					</el-table-column>

					<!-- 最后到店时间 -->
					<el-table-column label="最后到店时间" align="center" min-width="120">
						<template slot-scope="scope">
							<div class="time-info">
								<i class="el-icon-time time-icon"></i>
								<span class="text-nowrap">{{ formatDateTime(scope.row.lastVisitTime) || '无' }}</span>
							</div>
						</template>
					</el-table-column>

					<!-- 到店天数 -->
					<el-table-column label="到店天数" align="center">
						<template slot-scope="scope">
							<div class="days-info">
								<i class="el-icon-calendar days-icon"></i>
								<span class="text-nowrap">{{ scope.row.visitDays || 0 }}天</span>
							</div>
						</template>
					</el-table-column>

					<!-- 沉睡天数 -->
					<el-table-column label="沉睡天数" align="center">
						<template slot-scope="scope">
							<div class="sleep-days-info" :class="{ 'sleep-warning': scope.row.sleepDays > 0 }">
								<i class="el-icon-moon sleep-icon"></i>
								<span class="text-nowrap">{{ scope.row.sleepDays || 0 }}天</span>
							</div>
						</template>
					</el-table-column>

					<!-- 操作 -->
					<el-table-column label="操作" width="280" align="left" fixed="right">
						<template slot-scope="scope">
							<div class="action-buttons">
								<!-- <el-button type="text" class="detail-btn" icon="el-icon-view" @click="showDetail(scope.row.id)">
									详情
								</el-button> -->
								<el-button type="text" class="edit-btn" @click="showMemberRights(scope.row.id)">
									会员权益
								</el-button>
								<el-button v-has="'btn_edit'" type="text" icon="el-icon-edit" @click="addOrUpdateHandle(scope.row.id)"
									class="edit-btn">
									编辑
								</el-button>
								<el-button v-has="'btn_remove'" type="text" icon="el-icon-delete" @click="handleDel(scope.row.id)"
									class="delete-btn">
									删除
								</el-button>
							</div>
						</template>
					</el-table-column>
				</NCC-table>
				<pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
					@pagination="initData" />
			</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" />
	</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 { previewDataInterface } from '@/api/systemData/dataInterface'
export default {
	components: { NCCForm, ExportBox, MemberRightsDialog, DetailDialog },
	data() {
		return {
			showAll: false,
			kdhyLoading: false,
			memberRightsDialogVisible: false,
			detailDialogVisible: false,
			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,
			},
			list: [],
			listLoading: true,
			multipleSelection: [], total: 0,
			listQuery: {
				currentPage: 1,
				pageSize: 20,
				sort: "desc",
				sidx: "",
			},
			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": "流失" }],
			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: {},
	created() {
		this.initData();
		this.getgsmdOptions();
		this.getkhlxOptions();
		this.getkdhyOptions();
	},
	methods: {
		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
			};
			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 }
			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
			})
		},
		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)
			})
		},
		// 显示详情
		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'
		}
	}
}
</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;
		}
	}
}
</style>