<template>
	<el-dialog
		title="客户详情"
		:visible="visible"
		width="1400px"
		:close-on-click-modal="false"
		@close="handleClose"
		class="detail-dialog customer-detail-dialog"
	>
		<div v-loading="loading" class="detail-content">
			<div v-if="detailData" class="detail-wrapper">
				<!-- 基本信息 -->
				<div class="detail-section">
					<div class="section-title">
						<i class="el-icon-user"></i>
						<span>基本信息</span>
					</div>
					<div class="section-content">
						<div class="info-row">
							<div class="info-item">
								<span class="label">客户编码：</span>
								<span class="value">{{ detailData.id || '无' }}</span>
							</div>
							<div class="info-item">
								<span class="label">客户名称：</span>
								<span class="value">{{ detailData.khmc || '无' }}</span>
							</div>
							<div class="info-item">
								<span class="label">手机号：</span>
								<span class="value">{{ detailData.sjh || '无' }}</span>
							</div>
							<div class="info-item">
								<span class="label">档案号：</span>
								<span class="value">{{ detailData.dah || '无' }}</span>
							</div>
							<div class="info-item">
								<span class="label">性别：</span>
								<span class="value">{{ detailData.xb || '无' }}</span>
							</div>
							<div class="info-item">
								<span class="label">归属门店：</span>
								<span class="value">{{ detailData.gsmdName || '无' }}</span>
							</div>
							<div class="info-item">
								<span class="label">客户类型：</span>
								<span class="value">{{ detailData.khlxName || '无' }}</span>
							</div>
							<div class="info-item">
								<span class="label">注册时间：</span>
								<span class="value">{{ formatDateTime(detailData.zcsj) || '无' }}</span>
							</div>
							<div class="info-item">
								<span class="label">进店渠道：</span>
								<span class="value">{{ detailData.jdqd || '无' }}</span>
							</div>
							<div class="info-item">
								<span class="label">推荐人：</span>
								<span class="value">{{ detailData.tjrName || '无' }}</span>
							</div>
							<div class="info-item">
								<span class="label">健康师：</span>
								<span class="value">{{ detailData.mainHealthUserName || '无' }}</span>
							</div>
							<div class="info-item">
								<span class="label">负责顾问：</span>
								<span class="value">{{ detailData.subHealthUserName || '无' }}</span>
							</div>
							<div class="info-item">
								<span class="label">拓客人员：</span>
								<span class="value">{{ detailData.expandUserName || '无' }}</span>
							</div>
							<div class="info-item">
								<span class="label">联系地址：</span>
								<span class="value">{{ detailData.lxdz || '无' }}</span>
							</div>
							<div class="info-item">
								<span class="label">备注：</span>
								<span class="value">{{ detailData.bz || '无' }}</span>
							</div>
						</div>
					</div>
				</div>

				<!-- 会员类型信息 -->
				<div class="detail-section">
					<div class="section-title">
						<i class="el-icon-star-on"></i>
						<span>会员类型信息</span>
					</div>
					<div class="section-content">
						<div class="info-row">
							<div class="info-item">
								<span class="label">是否生美会员：</span>
								<el-tag :type="detailData.isBeautyMember === 1 ? 'success' : 'info'" size="small">
									{{ detailData.isBeautyMember === 1 ? '是' : '否' }}
								</el-tag>
								<span v-if="detailData.isBeautyMember === 1 && detailData.beautyMemberTime" class="value" style="margin-left: 10px;">
									({{ formatDateTime(detailData.beautyMemberTime) }})
								</span>
							</div>
							<div class="info-item">
								<span class="label">是否医美会员：</span>
								<el-tag :type="detailData.isMedicalMember === 1 ? 'success' : 'info'" size="small">
									{{ detailData.isMedicalMember === 1 ? '是' : '否' }}
								</el-tag>
								<span v-if="detailData.isMedicalMember === 1 && detailData.medicalMemberTime" class="value" style="margin-left: 10px;">
									({{ formatDateTime(detailData.medicalMemberTime) }})
								</span>
							</div>
							<div class="info-item">
								<span class="label">是否科技部会员：</span>
								<el-tag :type="detailData.isTechMember === 1 ? 'success' : 'info'" size="small">
									{{ detailData.isTechMember === 1 ? '是' : '否' }}
								</el-tag>
								<span v-if="detailData.isTechMember === 1 && detailData.techMemberTime" class="value" style="margin-left: 10px;">
									({{ formatDateTime(detailData.techMemberTime) }})
								</span>
							</div>
							<div class="info-item">
								<span class="label">是否教育部会员：</span>
								<el-tag :type="detailData.isEducationMember === 1 ? 'success' : 'info'" size="small">
									{{ detailData.isEducationMember === 1 ? '是' : '否' }}
								</el-tag>
								<span v-if="detailData.isEducationMember === 1 && detailData.educationMemberTime" class="value" style="margin-left: 10px;">
									({{ formatDateTime(detailData.educationMemberTime) }})
								</span>
							</div>
						</div>
					</div>
				</div>

				<!-- 到店信息 -->
				<div class="detail-section">
					<div class="section-title">
						<i class="el-icon-location"></i>
						<span>到店信息</span>
					</div>
					<div class="section-content">
						<div class="info-row">
							<div class="info-item">
								<span class="label">首次到店时间：</span>
								<span class="value">{{ formatDateTime(detailData.firstVisitTime) || '无' }}</span>
							</div>
							<div class="info-item">
								<span class="label">最后到店时间：</span>
								<span class="value">{{ formatDateTime(detailData.lastVisitTime) || '无' }}</span>
							</div>
							<div class="info-item">
								<span class="label">到店天数：</span>
								<span class="value highlight">{{ detailData.visitDays || 0 }}天</span>
							</div>
							<div class="info-item">
								<span class="label">最后消费时间：</span>
								<span class="value">{{ formatDateTime(detailData.lastConsumeTime) || '无' }}</span>
							</div>
						</div>
					</div>
				</div>

				<!-- 沉睡信息 -->
				<div class="detail-section">
					<div class="section-title">
						<i class="el-icon-moon"></i>
						<span>沉睡信息</span>
					</div>
					<div class="section-content">
						<div class="info-row">
							<div class="info-item">
								<span class="label">沉睡开始时间：</span>
								<span class="value">{{ formatDateTime(detailData.sleepStartTime) || '无' }}</span>
							</div>
							<div class="info-item">
								<span class="label">沉睡天数：</span>
								<el-tag :type="detailData.sleepDays > 0 ? 'warning' : 'success'" size="small">
									{{ detailData.sleepDays || 0 }}天
								</el-tag>
							</div>
						</div>
					</div>
				</div>

				<!-- 消费金额信息 -->
				<div class="detail-section">
					<div class="section-title">
						<i class="el-icon-wallet"></i>
						<span>消费金额信息</span>
					</div>
					<div class="section-content">
						<div class="info-row">
							<div class="info-item">
								<span class="label">耗卡总金额：</span>
								<span class="value highlight">{{ formatMoney(detailData.totalConsumeAmount) }}</span>
							</div>
							<div class="info-item">
								<span class="label">开卡总金额：</span>
								<span class="value highlight">{{ formatMoney(detailData.totalBillingAmount) }}</span>
							</div>
							<div class="info-item">
								<span class="label">剩余权益总金额：</span>
								<span class="value highlight primary">{{ formatMoney(detailData.remainingRightsAmount) }}</span>
							</div>
						</div>
					</div>
				</div>

				<!-- 消费等级信息 -->
				<div class="detail-section">
					<div class="section-title">
						<i class="el-icon-trophy"></i>
						<span>消费等级信息</span>
					</div>
					<div class="section-content">
						<div class="info-row">
							<div class="info-item">
								<span class="label">消费等级：</span>
								<el-tag :type="getConsumeLevelType(detailData.consumeLevel)" size="medium">
									{{ getConsumeLevelName(detailData.consumeLevel) }}
								</el-tag>
							</div>
							<div class="info-item">
								<span class="label">消费等级更新时间：</span>
								<span class="value">{{ formatDateTime(detailData.consumeLevelUpdateTime) || '无' }}</span>
							</div>
						</div>
					</div>
				</div>

				<!-- 其他信息 -->
				<div class="detail-section">
					<div class="section-title">
						<i class="el-icon-info"></i>
						<span>其他信息</span>
					</div>
					<div class="section-content">
						<div class="info-row">
							<div class="info-item">
								<span class="label">客户阶段：</span>
								<span class="value">{{ detailData.khjd || '无' }}</span>
							</div>
							<div class="info-item">
								<span class="label">客户消费：</span>
								<span class="value">{{ detailData.khxf || '无' }}</span>
							</div>
							<div class="info-item">
								<span class="label">消费频次：</span>
								<span class="value">{{ detailData.xfpc || '无' }}</span>
							</div>
							<div class="info-item">
								<span class="label">阳历生日：</span>
								<span class="value">{{ formatDate(detailData.yanglsr) || '无' }}</span>
							</div>
							<div class="info-item">
								<span class="label">阴历生日：</span>
								<span class="value">{{ formatYinlsr(detailData.yinlsr) || '无' }}</span>
							</div>
							<div class="info-item">
								<span class="label">过生日类型：</span>
								<span class="value">{{ detailData.birthdayType === 1 ? '农历生日' : '阳历生日' }}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button type="primary" @click="handleClose">关闭</el-button>
		</div>
	</el-dialog>
</template>

<script>
import request from '@/utils/request'

export default {
	name: 'DetailDialog',
	data() {
		return {
			visible: false,
			loading: false,
			detailData: null
		}
	},
	methods: {
		init(id) {
			this.visible = true
			this.loading = true
			this.detailData = null
			
			request({
				url: `/api/Extend/LqKhxx/${id}`,
				method: 'GET'
			}).then(res => {
				if (res.code === 200 && res.data) {
					this.detailData = res.data
				} else {
					this.$message.error(res.msg || '获取客户详情失败')
					this.detailData = null
				}
				this.loading = false
			}).catch(err => {
				console.error('获取客户详情失败:', err)
				this.$message.error('获取客户详情失败')
				this.loading = false
			})
		},
		handleClose() {
			this.visible = false
			this.detailData = null
		},
		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'
			})
		},
		formatDate(date) {
			if (!date) return null
			const d = new Date(date)
			if (isNaN(d.getTime())) return null
			return d.toLocaleDateString('zh-CN', {
				year: 'numeric',
				month: '2-digit',
				day: '2-digit'
			})
		},
		formatYinlsr(val) {
			if (!val) return null
			if (typeof val === 'string' && !/^\d{4}-\d|^\d+$/.test(val)) return val
			return this.formatDate(val)
		},
		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
			})
		},
		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>
/* 现代化弹窗：与编辑表单风格统一 */
.customer-detail-dialog {
	::v-deep .el-dialog {
		border-radius: 12px;
		box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12);
		overflow: hidden;
	}

	::v-deep .el-dialog__header {
		padding: 18px 20px;
		border-bottom: 1px solid #f0f2f5;
		background: #fafbfc;
	}

	::v-deep .el-dialog__body {
		padding: 20px 24px;
		max-height: 70vh;
		overflow-y: auto;
		background: #fff;
	}

	::v-deep .el-dialog__footer {
		padding: 16px 24px;
		border-top: 1px solid #f0f2f5;
		background: #fafbfc;
	}
}

.detail-content {
	min-height: 200px;
}

.detail-wrapper {
	.detail-section {
		margin-bottom: 24px;
		background: #fff;
		border-radius: 8px;
		overflow: hidden;
		border: 1px solid #ebeef5;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);

		.section-title {
			background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
			color: #fff;
			padding: 12px 20px;
			font-size: 15px;
			font-weight: 600;
			letter-spacing: 0.3px;
			display: flex;
			align-items: center;
			gap: 8px;
			box-shadow: 0 2px 8px rgba(64, 158, 255, 0.25);

			i {
				font-size: 18px;
			}
		}

		.section-content {
			padding: 20px;

			.info-row {
				display: flex;
				flex-wrap: wrap;
				gap: 20px 40px;

				.info-item {
					flex: 0 0 calc(33.333% - 27px);
					min-width: 250px;
					display: flex;
					align-items: center;
					padding: 8px 0;

					.label {
						color: #606266;
						font-weight: 500;
						margin-right: 8px;
						min-width: 100px;
						flex-shrink: 0;
					}

					.value {
						color: #303133;
						flex: 1;

						&.highlight {
							color: #409EFF;
							font-weight: 600;
							font-size: 16px;

							&.primary {
								color: #67C23A;
							}
						}
					}
				}
			}
		}
	}
}

.dialog-footer {
	text-align: right;
}

// 响应式设计
@media (max-width: 1200px) {
	.detail-wrapper {
		.detail-section {
			.section-content {
				.info-row {
					.info-item {
						flex: 0 0 calc(50% - 20px);
					}
				}
			}
		}
	}
}

@media (max-width: 768px) {
	.detail-wrapper {
		.detail-section {
			.section-content {
				.info-row {
					.info-item {
						flex: 0 0 100%;
					}
				}
			}
		}
	}
}
</style>

