<template>
	<el-dialog 
		title="退卡记录详情" 
		:visible.sync="visible" 
		:close-on-click-modal="false"
		class="NCC-dialog NCC-dialog_center" 
		width="1200px"
		@close="handleClose">
		<div class="detail-content" v-loading="loading">
			<!-- 基本信息卡片 -->
			<el-card class="info-card" shadow="hover">
				<div slot="header" class="card-header">
					<i class="el-icon-user"></i>
					<span class="card-title">基本信息</span>
				</div>
				<el-row :gutter="20">
					<el-col :span="8">
						<div class="info-item">
							<label class="info-label">门店：</label>
							<span class="info-value">{{ getStoreName(dataForm.md) || '无' }}</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<label class="info-label">退卡时间：</label>
							<span class="info-value">{{ formatDate(dataForm.tksj) || '无' }}</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<label class="info-label">会员：</label>
							<span class="info-value">{{ dataForm.hymc || '无' }}</span>
						</div>
					</el-col>
					<!-- <el-col :span="8">
						<div class="info-item">
							<label class="info-label">会员账号：</label>
							<span class="info-value">{{ dataForm.hyzh || '无' }}</span>
						</div>
					</el-col> -->
					<!-- <el-col :span="8">
						<div class="info-item">
							<label class="info-label">是否有科技部：</label>
							<span class="info-value">{{ dataForm.sfykjb || '无' }}</span>
						</div>
					</el-col> -->
					<el-col :span="8">
						<div class="info-item">
							<label class="info-label">是否作废：</label>
							<span class="info-value">{{ dataForm.isEffective == '1'?'正常':'作废'}}</span>
						</div>
					</el-col>
				</el-row>
			</el-card>

			<!-- 费用信息卡片 -->
			<el-card class="info-card" shadow="hover">
				<div slot="header" class="card-header">
					<i class="el-icon-money"></i>
					<span class="card-title">费用信息</span>
				</div>
				<el-row :gutter="20">
					<el-col :span="8">
						<div class="info-item">
							<label class="info-label">退款金额：</label>
							<span class="info-value amount">{{ formatAmount(dataForm.tkje) }}</span>
						</div>
					</el-col>
					<el-col :span="8" v-if="dataForm.actualRefundAmount">
						<div class="info-item">
							<label class="info-label">实际退款金额：</label>
							<span class="info-value amount">{{ formatAmount(dataForm.actualRefundAmount) }}</span>
						</div>
					</el-col>
					<!-- <el-col :span="8">
						<div class="info-item">
							<label class="info-label">手工费用：</label>
							<span class="info-value amount">{{ formatAmount(dataForm.sgfy) }}</span>
						</div>
					</el-col> -->
				</el-row>
			</el-card>

			<!-- 品项明细卡片 -->
			<el-card class="info-card" shadow="hover">
				<div slot="header" class="card-header">
					<i class="el-icon-goods"></i>
					<span class="card-title">品项明细</span>
				</div>
				<div class="px-list-container">
					<div v-for="(px, pxIndex) in dataForm.lqHytkMxList" :key="pxIndex" class="px-item">
						<!-- 品项基本信息 -->
						<div class="px-basic-info">
							<div class="px-item-header">
								<span class="px-item-title">品项 {{ pxIndex + 1 }}</span>
							</div>
							<div class="px-detail-info">
								<div class="px-detail-row">
									<div class="px-detail-item">
										<span class="px-detail-label">品项名称：</span>
										<span class="px-detail-value">{{ px.pxmc || '无' }}</span>
									</div>
									<div class="px-detail-item">
										<span class="px-detail-label">单价：</span>
										<span class="px-detail-value amount">¥{{ px.pxjg || 0 }}</span>
									</div>
									<div class="px-detail-item">
										<span class="px-detail-label">退卡数量：</span>
										<span class="px-detail-value">{{ px.projectNumber || 0 }}</span>
									</div>
									<div class="px-detail-item">
										<span class="px-detail-label">总价：</span>
										<span class="px-detail-value amount">¥{{ px.totalPrice || 0 }}</span>
									</div>
									<div class="px-detail-item">
										<span class="px-detail-label">类型：</span>
										<span class="px-detail-value">{{ px.sourceType || '无' }}</span>
									</div>
							
								</div>
							</div>
						</div>

						<!-- 健康师业绩 -->
						<div class="px-staff-section">
							<div class="px-staff-header">
								<span class="px-staff-title">健康师业绩</span>
							</div>
							<div class="px-staff-list">
								<div v-for="(jks, jksIndex) in px.lqHytkJksyjList" :key="jksIndex" class="px-staff-row">
									<div class="px-staff-item">
										<div class="px-staff-info">
											<span class="px-staff-name">{{ jks.jksxm || '无' }}</span>
											<span class="px-staff-amount">{{ formatAmount(jks.jksyj) }}</span>
										</div>
										<div class="px-staff-details">
											<div class="px-staff-detail-item">
												<span class="px-staff-detail-label">次数：</span>
												<span class="px-staff-detail-value">{{ jks.F_tkpxNumber || 0 }}</span>
											</div>
											<!-- <div class="px-staff-detail-item">
												<span class="px-staff-detail-label">手工费：</span>
												<span class="px-staff-detail-value amount">{{ formatAmount(jks.f_LaborCost) }}</span>
											</div> -->
										</div>
									</div>
								</div>
							</div>
						</div>

						<!-- 科技部老师业绩 -->
						<div class="px-staff-section" v-if="px.qt2 === '科美'">
							<div class="px-staff-header">
								<span class="px-staff-title">科技部老师业绩</span>
							</div>
							<div class="px-staff-list">
								<div v-for="(kjb, kjbIndex) in px.lqHytkKjbsyjList" :key="kjbIndex" class="px-staff-row">
									<div class="px-staff-item">
										<div class="px-staff-info">
											<span class="px-staff-name">{{ kjb.kjblsxm || '无' }}</span>
											<span class="px-staff-amount">{{ formatAmount(kjb.kjblsyj) }}</span>
										</div>
										<div class="px-staff-details">
											<div class="px-staff-detail-item">
												<span class="px-staff-detail-label">次数：</span>
												<span class="px-staff-detail-value">{{ kjb.F_tkpxNumber || 0 }}</span>
											</div>
											<!-- <div class="px-staff-detail-item">
												<span class="px-staff-detail-label">手工费：</span>
												<span class="px-staff-detail-value amount">{{ formatAmount(kjb.f_LaborCost) }}</span>
											</div> -->
										</div>
									</div>
								</div>
							</div>
						</div>

						<!-- 非科美品项提示 -->
						<div class="px-staff-section" v-if="px.qt2 && px.qt2 !== '科美'">
							<div class="px-staff-header">
								<span class="px-staff-title">科技部老师业绩</span>
							</div>
							<div class="px-staff-tip">
								<i class="el-icon-info"></i>
								<span>当前品项类型为"{{ px.qt2 }}"，无需配置科技部老师业绩</span>
							</div>
						</div>
					</div>
				</div>
			</el-card>

			<!-- 其他信息卡片 -->
			<el-card class="info-card" shadow="hover">
				<div slot="header" class="card-header">
					<i class="el-icon-document"></i>
					<span class="card-title">其他信息</span>
				</div>
				<el-row :gutter="20">
					<el-col :span="24">
						<div class="info-item">
							<label class="info-label">备注：</label>
							<span class="info-value">{{ dataForm.bz || '无' }}</span>
						</div>
					</el-col>
					<el-col :span="24" v-if="dataForm.signatureFile && dataForm.signatureFile.length > 0">
						<div class="info-item">
							<label class="info-label">会员签字：</label>
							<div class="file-list">
								<div v-for="(file, index) in dataForm.signatureFile" :key="index" class="file-item">
									<el-image 
										style="width: 100px; height: 100px"
										:src="baseUrl + file.url" 
										:preview-src-list="[baseUrl + file.url]">
									</el-image>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="24" v-if="dataForm.fileUrl && dataForm.fileUrl.length > 0">
						<!-- <div class="info-item">
							<label class="info-label">文件附件：</label>
							<div class="file-list">
								<div v-for="(file, index) in dataForm.fileUrl" :key="index" class="file-item">
									<i class="el-icon-document"></i>
									<span class="file-name">{{ file.name || `文件${index + 1}` }}</span>
									<el-button type="text" size="mini" @click="previewFile(file)">预览</el-button>
								</div>
							</div>
						</div> -->
						<div class="info-item">
							<label class="info-label">文件附件：</label>
							<div class="file-list">
								<div v-for="(file, index) in dataForm.fileUrl" :key="index" class="file-item">
									<el-image 
										style="width: 100px; height: 100px"
										:src="baseUrl + file.url" 
										:preview-src-list="[baseUrl + file.url]">
									</el-image>
								</div>
							</div>
						</div>
					</el-col>
				</el-row>
			</el-card>
		</div>
	</el-dialog>
</template>

<script>
import request from '@/utils/request'
import { previewDataInterface } from '@/api/systemData/dataInterface'

export default {
	name: 'LqHytkHytkDetail',
	props: [],
	data() {
		return {
			baseUrl: process.env.VUE_APP_BASE_API,
			loading: false,
			visible: false,
			dataForm: {
				id: '',
				md: undefined,
				mdbh: undefined,
				mdmc: undefined,
				hy: undefined,
				hyzh: undefined,
				hymc: undefined,
				tkje: undefined,
				sgfy: undefined,
				sfykjb: undefined,
				lqHytkJksyjList: [],
				lqHytkKjbsyjList: [],
				lqHytkMxList: [],
				tksj: undefined,
				tkr: undefined,
				fileUrl: undefined,
				bz: undefined,
			},
			// 选项数据
			mdOptions: []
		}
	},
	created() {
		this.loadOptions()
	},
	mounted() {
	},
	methods: {
		// 初始化弹窗
		init(id) {
			this.dataForm.id = id || 0
			this.visible = true
			this.$nextTick(() => {
				if (this.dataForm.id) {
					this.getDetail(this.dataForm.id)
				}
			})
		},
		// 获取详情数据
		getDetail(id) {
			this.loading = true
			request({
				url: '/api/Extend/LqHytkHytk/' + id,
				method: 'get'
			}).then(res => {
				if (res.code === 200) {
					this.dataForm = res.data
					// 处理文件URL
					if (this.dataForm.fileUrl) {
						try {
							this.dataForm.fileUrl = JSON.parse(this.dataForm.fileUrl)
						} catch (e) {
							this.dataForm.fileUrl = []
						}
					} else {
						this.dataForm.fileUrl = []
					}
					if (this.dataForm.signatureFile) {
						try {
							this.dataForm.signatureFile = JSON.parse(this.dataForm.signatureFile)
						} catch (e) {
							this.dataForm.signatureFile = []
						}
					} else {
						this.dataForm.signatureFile = []
					}
					console.log('退卡记录详情数据:', this.dataForm)
				} else {
					this.$message.error(res.msg || '获取详情失败')
				}
			}).catch(err => {
				console.error('获取详情失败:', err)
				this.$message.error('获取详情失败')
			}).finally(() => {
				this.loading = false
			})
		},
		// 加载选项数据
		loadOptions() {
			// 加载门店选项
			previewDataInterface('730960205902251269').then(res => {
				this.mdOptions = res.data || []
			})
		},
		// 获取门店名称
		getStoreName(storeId) {
			const store = this.mdOptions.find(item => item.id === storeId)
			return store ? store.fullName : '无'
		},
		// 格式化日期
		formatDate(date) {
			if (!date) return '无'
			const d = new Date(date)
			const year = d.getFullYear()
			const month = String(d.getMonth() + 1).padStart(2, '0')
			const day = String(d.getDate()).padStart(2, '0')
			return `${year}-${month}-${day}`
		},
		// 格式化金额
		formatAmount(amount) {
			if (!amount || amount === '' || amount === 'undefined') return '0.00元'
			const num = parseFloat(amount)
			return isNaN(num) ? '0.00元' : `${num.toFixed(2)}元`
		},
		// 预览文件
		previewFile(file) {
			if (file.url) {
				window.open(file.url, '_blank')
			} else {
				this.$message.warning('文件链接不可用')
			}
		},
		// 编辑记录
		editRecord() {
			this.visible = false
			this.$emit('edit', this.dataForm.id)
		},
		// 关闭弹窗
		handleClose() {
			this.visible = false
			this.$emit('refresh')
		}
	}
}
</script>

<style scoped>
/* 详情内容 */
.detail-content {
	max-height: 70vh;
	overflow-y: auto;
	padding: 0 10px;
}

/* 信息卡片 */
.info-card {
	margin-bottom: 20px;
	border-radius: 8px;
	overflow: hidden;
}

.card-header {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 600;
	color: #303133;
}

.card-header i {
	font-size: 18px;
	color: #409EFF;
}

.card-title {
	font-size: 16px;
	font-weight: 600;
}

/* 信息项 */
.info-item {
	margin-bottom: 16px;
}

.info-label {
	display: inline-block;
	/* min-width: 100px; */
	font-weight: 500;
	color: #606266;
	margin-right: 8px;
}

.info-value {
	color: #303133;
	font-size: 14px;
}

.info-value.amount {
	color: #E6A23C;
	font-weight: 600;
}

/* 品项列表容器 */
.px-list-container {
	width: 100%;
}

/* 品项项 */
.px-item {
	margin-bottom: 24px;
	border: 1px solid #e4e7ed;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

/* 品项基本信息 */
.px-basic-info {
	background: #f8f9fa;
	padding: 20px;
	border-bottom: 1px solid #e4e7ed;
}

.px-item-header {
	margin-bottom: 18px;
}

.px-item-title {
	font-size: 16px;
	font-weight: 600;
	color: #303133;
}

/* 品项详细信息 */
.px-detail-info {
	background: #fff;
	padding: 15px;
	border-radius: 6px;
	border: 1px solid #e4e7ed;
}

.px-detail-row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.px-detail-item {
	display: flex;
	align-items: center;
}

.px-detail-label {
	font-size: 14px;
	color: #606266;
	font-weight: 500;
	margin-right: 8px;
}

.px-detail-value {
	font-size: 14px;
	color: #303133;
	font-weight: 600;
}

.px-detail-value.amount {
	color: #E6A23C;
}

/* 人员业绩区域 */
.px-staff-section {
	padding: 18px 20px;
	border-bottom: 1px solid #e4e7ed;
}

.px-staff-section:last-child {
	border-bottom: none;
}

.px-staff-header {
	margin-bottom: 12px;
}

.px-staff-title {
	font-size: 14px;
	font-weight: 600;
	color: #409EFF;
}

.px-staff-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.px-staff-row {
	width: 100%;
}

.px-staff-item {
	padding: 12px 16px;
	border: 1px solid #e4e7ed;
	border-radius: 6px;
	background: #fafafa;
}

.px-staff-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.px-staff-name {
	font-size: 14px;
	color: #303133;
	font-weight: 500;
}

.px-staff-amount {
	font-size: 14px;
	color: #E6A23C;
	font-weight: 600;
}

.px-staff-details {
	display: flex;
	gap: 20px;
}

.px-staff-detail-item {
	display: flex;
	align-items: center;
}

.px-staff-detail-label {
	font-size: 12px;
	color: #606266;
	margin-right: 4px;
}

.px-staff-detail-value {
	font-size: 12px;
	color: #303133;
	font-weight: 500;
}

.px-staff-detail-value.amount {
	color: #E6A23C;
}

/* 科技部老师提示信息 */
.px-staff-tip {
	display: flex;
	align-items: center;
	padding: 12px 16px;
	background: #f0f9ff;
	border: 1px solid #b3d8ff;
	border-radius: 6px;
	color: #409eff;
	font-size: 14px;
}

.px-staff-tip i {
	margin-right: 8px;
	font-size: 16px;
}

/* 文件列表 */
.file-list {
	display: flex;
}

.file-item {
	margin-top: 20px;
	width: 100px;
	height: 100px;
	margin-left: 20px;
}

.file-item i {
	color: #409EFF;
	font-size: 16px;
}

.file-name {
	flex: 1;
	font-size: 14px;
	color: #303133;
}

/* 弹窗底部按钮 */
.dialog-footer {
	text-align: right;
	padding: 20px 0;
}

.dialog-footer .el-button {
	margin-left: 10px;
}

/* 响应式布局 */
@media (max-width: 768px) {
	.detail-content {
		max-height: 60vh;
		padding: 0 5px;
	}

	.px-detail-row {
		flex-direction: column;
		gap: 12px;
	}

	.px-staff-details {
		flex-direction: column;
		gap: 8px;
	}

	.info-item {
		margin-bottom: 12px;
	}

	.info-label {
		/* min-width: 80px; */
		font-size: 13px;
	}
}
</style>
