<template>
	<el-dialog title="批次详情" :close-on-click-modal="false" :visible.sync="visible"
		class="NCC-dialog NCC-dialog_center" lock-scroll width="1000px">
		<div v-loading="loading">
			<!-- 批次基本信息 -->
			<el-card class="box-card" shadow="never">
				<div slot="header" class="card-header">
					<span>批次基本信息</span>
				</div>
				<el-row :gutter="20">
					<el-col :span="8">
						<div class="info-item">
							<span class="label">批次ID：</span>
							<span class="value">{{ batchInfo.BatchId || '无' }}</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<span class="label">创建时间：</span>
							<span class="value">{{ formatDateTime(batchInfo.CreateTime) }}</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<span class="label">创建人：</span>
							<span class="value">{{ batchInfo.CreateUserName || '无' }}</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<span class="label">总记录数：</span>
							<span class="value">{{ batchInfo.TotalCount || 0 }}</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<span class="label">有效记录数：</span>
							<span class="value">{{ batchInfo.EffectiveCount || 0 }}</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<span class="label">无效记录数：</span>
							<span class="value">{{ batchInfo.IneffectiveCount || 0 }}</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<span class="label">总使用数量：</span>
							<span class="value">{{ batchInfo.TotalUsageQuantity || 0 }}</span>
						</div>
					</el-col>
					<!-- <el-col :span="8">
						<div class="info-item">
							<span class="label">总使用金额：</span>
							<span class="value">¥{{ formatMoney(batchInfo.TotalUsageAmount) }}</span>
						</div>
					</el-col> -->
				</el-row>
			</el-card>

			<!-- 申请记录信息 -->
			<el-card v-if="batchInfo.ApplicationInfo" class="box-card" shadow="never" style="margin-top: 20px;">
				<div slot="header" class="card-header">
					<span>申请记录信息</span>
				</div>
				<el-row :gutter="20">
					<el-col :span="8">
						<div class="info-item">
							<span class="label">申请编号：</span>
							<span class="value">{{ batchInfo.ApplicationInfo.Id || '无' }}</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<span class="label">申请人：</span>
							<span class="value">{{ batchInfo.ApplicationInfo.ApplicationUserName || '无' }}</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<span class="label">申请门店：</span>
							<span class="value">{{ batchInfo.ApplicationInfo.ApplicationStoreName || '无' }}</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<span class="label">申请时间：</span>
							<span class="value">{{ formatDateTime(batchInfo.ApplicationInfo.ApplicationTime) }}</span>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<span class="label">审批状态：</span>
							<el-tag :type="getStatusType(batchInfo.ApplicationInfo.ApprovalStatus)" size="small">
								{{ batchInfo.ApplicationInfo.ApprovalStatus || '无' }}
							</el-tag>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="info-item">
							<span class="label">是否已领取：</span>
							<el-tag :type="batchInfo.ApplicationInfo.IsReceived === 1 ? 'success' : 'info'" size="small">
								{{ batchInfo.ApplicationInfo.IsReceived === 1 ? '已领取' : '未领取' }}
							</el-tag>
						</div>
					</el-col>
					<el-col :span="8" v-if="batchInfo.ApplicationInfo.ReceiveTime">
						<div class="info-item">
							<span class="label">领取时间：</span>
							<span class="value">{{ formatDateTime(batchInfo.ApplicationInfo.ReceiveTime) }}</span>
						</div>
					</el-col>
					<el-col :span="8" v-if="batchInfo.ApplicationInfo.ReceiveUser">
						<div class="info-item">
							<span class="label">领取人：</span>
							<span class="value">{{ batchInfo.ApplicationInfo.ReceiveUserName || '无' }}</span>
						</div>
					</el-col>
					<el-col :span="24" v-if="batchInfo.ApplicationInfo.Remarks">
						<div class="info-item">
							<span class="label">备注：</span>
							<span class="value">{{ batchInfo.ApplicationInfo.Remarks || '无' }}</span>
						</div>
					</el-col>
				</el-row>
			</el-card>

			<!-- 使用记录列表 -->
			<el-card class="box-card" shadow="never" style="margin-top: 20px;">
				<div slot="header" class="card-header">
					<span>使用记录列表</span>
				</div>
				<NCC-table :data="batchInfo.UsageRecords || []"
					:header-cell-style="{ background: '#f5f7fa', color: '#606266' }">
					<el-table-column label="产品名称" align="center" prop="productName" />
					<el-table-column label="单价" align="center" >
						<template slot-scope="scope">
							<span>¥{{ formatMoney(scope.row.unitPrice) }}</span>
						</template>
					</el-table-column>
					<el-table-column label="门店" align="center" prop="storeName"/>
					<el-table-column label="使用时间" align="center" prop="usageTime" width="150">
						<template slot-scope="scope">
							<span>{{ formatDateTime(scope.row.usageTime) }}</span>
						</template>
					</el-table-column>
					<el-table-column label="使用数量" align="center" prop="usageQuantity"  />
					<el-table-column label="合计金额" align="center" prop="totalAmount" >
						<template slot-scope="scope">
							<span class="amount-text">¥{{ formatMoney(scope.row.totalAmount) }}</span>
						</template>
					</el-table-column>
					<el-table-column label="是否有效" align="center">
						<template slot-scope="scope">
							<el-tag :type="scope.row.isEffective === 1 ? 'success' : 'info'" size="small">
								{{ scope.row.isEffective === 1 ? '有效' : '无效' }}
							</el-tag>
						</template>
					</el-table-column>
				</NCC-table>
			</el-card>
		</div>
	</el-dialog>
</template>

<script>
import { getBatchInfo } from '@/api/extend/lqInventory'

export default {
		data() {
		return {
			visible: false,
			loading: false,
			batchInfo: {
				BatchId: '',
				CreateTime: null,
				CreateUser: '',
				CreateUserName: '',
				TotalCount: 0,
				EffectiveCount: 0,
				IneffectiveCount: 0,
				TotalUsageQuantity: 0,
				TotalUsageAmount: 0,
				UsageRecords: [],
				ApplicationInfo: null
			}
		}
	},
	methods: {
		init(batchId) {
			this.visible = true
			this.loading = true
			this.batchInfo = {
				BatchId: '',
				CreateTime: null,
				CreateUser: '',
				CreateUserName: '',
				TotalCount: 0,
				EffectiveCount: 0,
				IneffectiveCount: 0,
				TotalUsageQuantity: 0,
				TotalUsageAmount: 0,
				UsageRecords: [],
				ApplicationInfo: null
			}
			getBatchInfo(batchId).then(res => {
				this.loading = false
				if (res.code == 200 && res.data) {
					this.batchInfo = res.data
				} else {
					this.$message({
						type: 'error',
						message: res.msg || '查询失败'
					})
				}
			}).catch(() => {
				this.loading = false
			})
		},
		getStatusType(status) {
			const statusMap = {
				'待审批': 'info',
				'审批中': 'warning',
				'已通过': 'success',
				'未通过': 'danger',
				'已退回': 'info'
			}
			return statusMap[status] || 'info'
		},
		formatDateTime(timestamp) {
			if (!timestamp) return '无'
			const date = new Date(timestamp)
			const year = date.getFullYear()
			const month = String(date.getMonth() + 1).padStart(2, '0')
			const day = String(date.getDate()).padStart(2, '0')
			const hours = String(date.getHours()).padStart(2, '0')
			const minutes = String(date.getMinutes()).padStart(2, '0')
			const seconds = String(date.getSeconds()).padStart(2, '0')
			return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
		},
		formatMoney(amount) {
			if (!amount && amount !== 0) return '0.00'
			return Number(amount).toFixed(2)
		}
	}
}
</script>

<style lang="scss" scoped>
.box-card {
	margin-bottom: 0;
}

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

.info-item {
	display: flex;
	align-items: center;
	margin-bottom: 12px;

	.label {
		color: #606266;
		font-weight: 500;
		min-width: 100px;
	}

	.value {
		color: #303133;
	}
}

.amount-text {
	color: #67C23A;
	font-weight: 600;
}

::v-deep .el-table__header-wrapper {
	.el-table__header {
		th {
			background-color: #f5f7fa;
			color: #606266;
			font-weight: 600;
		}
	}
}
</style>

