<template>
    <div>
        <el-dialog title="产品详情" :close-on-click-modal="false" :visible.sync="visible" class="NCC-dialog NCC-dialog_center"
            lock-scroll width="1200px">
            <div class="detail-content">
                <!-- 产品基本信息 -->
                <el-card class="info-card" shadow="hover" v-if="productInfo">
                    <div slot="header" class="card-header">
                        <i class="el-icon-goods"></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">{{ productInfo.productName || '无' }}</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="info-item">
                                <label class="info-label">价格：</label>
                                <span class="info-value">¥{{ formatMoney(productInfo.price) }}</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="info-item">
                                <label class="info-label">库存：</label>
                                <span class="info-value">{{ productInfo.currentInventory !== undefined ? productInfo.currentInventory : '无' }}</span>
                            </div>
                        </el-col>
					</el-row>
					<el-row :gutter="20">
                        <el-col :span="8">
                            <div class="info-item">
                                <label class="info-label">产品类别：</label>
                                <span class="info-value">{{ productInfo.productCategory || '无' }}</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="info-item">
                                <label class="info-label">归属部门：</label>
                                <span class="info-value">{{ productInfo.departmentName || '无' }}</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="info-item">
                                <label class="info-label">标准单位：</label>
                                <span class="info-value">{{ productInfo.standardUnit || '无' }}</span>
                            </div>
                        </el-col>
					</el-row>
					<el-row :gutter="20">
                        <el-col :span="8">
                            <div class="info-item">
                                <label class="info-label">上架状态：</label>
                                <el-tag :type="productInfo.onShelfStatus === 1 ? 'success' : 'info'" size="small">
                                    {{ productInfo.onShelfStatus === 1 ? '上架' : '下架' }}
                                </el-tag>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="info-item">
                                <label class="info-label">统计分类：</label>
                                <span class="info-value">{{ productInfo.statisticsCategory || '无' }}</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="info-item">
                                <label class="info-label">归属仓库：</label>
                                <span class="info-value">{{ productInfo.warehouse || '无' }}</span>
                            </div>
                        </el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="8">
                            <div class="info-item">
                                <label class="info-label">供应商名称：</label>
                                <span class="info-value">{{ productInfo.supplierName || '无' }}</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="info-item">
                                <label class="info-label">合同签订日期：</label>
                                <span class="info-value">{{ formatDate(productInfo.contractSignDate) || '无' }}</span>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="info-item">
                                <label class="info-label">合同结束日期：</label>
                                <span class="info-value">{{ formatDate(productInfo.contractEndDate) || '无' }}</span>
                            </div>
                        </el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="24">
							<div class="info-item">
								<label class="info-label">备注：</label>
								<span class="info-value">{{ productInfo.remark || '无' }}</span>
							</div>
						</el-col> 
					</el-row>
                </el-card>

                <!-- Tab标签页：库存和使用记录 -->
                <el-tabs v-model="activeTab" class="detail-tabs">
                    <!-- 库存管理Tab -->
                    <el-tab-pane label="库存管理" name="inventory">
                        <div class="tab-content">
                            <div class="tab-header">
                                <el-button type="primary" icon="el-icon-plus" size="small" @click="addInventory()">添加库存</el-button>
                            </div>
                            <NCC-table v-loading="inventoryLoading" :data="inventoryList" has-c
                                :header-cell-style="{ background: '#f5f7fa', color: '#606266' }">
                                <el-table-column label="库存ID" align="center" show-overflow-tooltip>
                                    <template slot-scope="scope">
                                        <div class="inventory-id-info">
                                            <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="quantity-info">
                                            <span class="text-nowrap">{{ scope.row.quantity || 0 }}</span>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="入库时间" align="center" show-overflow-tooltip>
                                    <template slot-scope="scope">
                                        <div class="stock-time-info">
                                            <span class="text-nowrap">{{ formatDate(scope.row.stockInTime) || '无' }}</span>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="生产日期" align="center" show-overflow-tooltip>
                                    <template slot-scope="scope">
                                        <div class="production-date-info">
                                            <span class="text-nowrap">{{ formatDate(scope.row.productionDate) || '无' }}</span>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="保质期(天)" align="center">
                                    <template slot-scope="scope">
                                        <div class="shelf-life-info">
                                            <span class="text-nowrap">{{ scope.row.shelfLife || '无' }}</span>
                                        </div>
                                    </template>
                                </el-table-column>
								<el-table-column label="批次号" align="center" show-overflow-tooltip>
									<template slot-scope="scope">
										<div class="batch-number-info">
											<span class="text-nowrap">{{ scope.row.batchNumber || '无' }}</span>
										</div>
									</template>
								</el-table-column>
								<el-table-column label="入库类型" align="center">
									<template slot-scope="scope">
										<el-tag :type="scope.row.stockInType === 2 ? 'warning' : 'info'" size="small">
											{{ scope.row.stockInType === 2 ? '采购入库' : '普通入库' }}
										</el-tag>
									</template>
								</el-table-column>
								<el-table-column label="采购单价" align="center" v-if="hasPurchaseInventory">
									<template slot-scope="scope">
										<div class="purchase-unit-price-info">
											
											<span class="text-nowrap">{{ scope.row.purchaseUnitPrice ? '¥' + formatMoney(scope.row.purchaseUnitPrice) : '无' }}</span>
										</div>
									</template>
								</el-table-column>
								<el-table-column label="采购总金额" align="center" v-if="hasPurchaseInventory">
									<template slot-scope="scope">
										<div class="purchase-amount-info">
											<span class="text-nowrap">{{ scope.row.purchaseAmount ? '¥' + formatMoney(scope.row.purchaseAmount) : '无' }}</span>
										</div>
									</template>
								</el-table-column>
								<!-- isEffective 是否有效 -->
								<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>
								<el-table-column label="操作" align="left" width="100">
									<template slot-scope="scope">
										<el-button v-if="scope.row.isEffective === 1" type="text" icon="el-icon-delete" 
											@click="deleteInventory(scope.row)" class="cancel-btn">作废</el-button>
									</template>
								</el-table-column>
                            </NCC-table>
                            <pagination :total="inventoryTotal" :page.sync="inventoryQuery.currentPage"
                                :limit.sync="inventoryQuery.pageSize" @pagination="initInventoryData" />
                        </div>
                    </el-tab-pane>

                    <!-- 使用记录Tab -->
                    <el-tab-pane label="使用记录" name="usage">
                        <div class="tab-content">
                            <div class="tab-header">
                                <el-button type="primary" icon="el-icon-plus" size="small" @click="addUsage()">批量添加使用记录</el-button>
                            </div>
                            <NCC-table v-loading="usageLoading" :data="usageList" has-c
                                :header-cell-style="{ background: '#f5f7fa', color: '#606266' }">
                                <el-table-column label="批次号" align="center" show-overflow-tooltip>
                                    <template slot-scope="scope">
                                        <div class="usage-id-info">
                                            <span class="text-nowrap">{{ scope.row.usageBatchId || '无' }}</span>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="产品名称" align="center">
                                    <template slot-scope="scope">
                                        <div class="product-name-info">
                                            <span class="text-nowrap">{{ scope.row.productName || '无' }}</span>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="门店名称" align="center">
                                    <template slot-scope="scope">
                                        <div class="store-name-info">
                                            <span class="text-nowrap">{{ scope.row.storeName || '无' }}</span>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="使用数量" align="center">
                                    <template slot-scope="scope">
                                        <div class="usage-quantity-info">
                                            <span class="text-nowrap">{{ scope.row.usageQuantity || 0 }}</span>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="单价" align="center">
                                    <template slot-scope="scope">
                                        <div class="unit-price-info">
                                            <span class="text-nowrap">{{ scope.row.unitPrice ? '¥' + formatMoney(scope.row.unitPrice) : '无' }}</span>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="总金额" align="center">
                                    <template slot-scope="scope">
                                        <div class="total-amount-info">
                                            <span class="text-nowrap">{{ scope.row.totalAmount ? '¥' + formatMoney(scope.row.totalAmount) : '无' }}</span>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="使用时间" align="center" show-overflow-tooltip>
                                    <template slot-scope="scope">
                                        <div class="usage-time-info">
                                            <span class="text-nowrap">{{ formatDateTime(scope.row.usageTime) || '无' }}</span>
                                        </div>
                                    </template>
                                </el-table-column>
								<el-table-column label="审批状态" align="center">
									<template slot-scope="scope">
										<el-tag v-if="scope.row.approvalStatus" 
											:type="getApprovalStatusType(scope.row.approvalStatus)" 
											size="small">
											{{ scope.row.approvalStatus || '无' }}
										</el-tag>
										<span v-else class="text-nowrap">无</span>
									</template>
								</el-table-column>
								<el-table-column label="是否已领取" align="center">
									<template slot-scope="scope">
										<el-tag v-if="scope.row.isReceived !== undefined && scope.row.isReceived !== null" 
											:type="scope.row.isReceived === 1 ? 'success' : 'info'" 
											size="small">
											{{ scope.row.isReceived === 1 ? '已领取' : '未领取' }}
										</el-tag>
										<span v-else class="text-nowrap">无</span>
									</template>
								</el-table-column>
								<!-- isEffective 是否有效 -->
								<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>
								<el-table-column label="操作" align="left" width="140">
									<template slot-scope="scope">
										<el-button v-if="scope.row.isEffective === 1" type="text" icon="el-icon-printer" 
											 @click="handlePrint(scope.row)" class="edit-btn">打印</el-button>
										<el-button v-if="scope.row.isEffective === 1" type="text" icon="el-icon-delete" 
											@click="deleteUsage(scope.row)" class="cancel-btn">作废</el-button>
									</template>
								</el-table-column>
                            </NCC-table>
                            <pagination :total="usageTotal" :page.sync="usageQuery.currentPage"
                                :limit.sync="usageQuery.pageSize" @pagination="initUsageData" />
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>

        </el-dialog>
    	<!-- 库存表单弹窗 -->
		<InventoryForm v-if="inventoryFormVisible" ref="InventoryForm" @refresh="refreshInventory" />
		<!-- 使用记录表单弹窗 -->
		<UsageForm v-if="usageFormVisible" ref="UsageForm" @refresh="refreshUsage" />
    </div>
</template>

<script>
import request from '@/utils/request'
import InventoryForm from './inventory-form.vue'
import UsageForm from './usage-form.vue'

export default {
	components: { InventoryForm, UsageForm },
	data() {
		return {
			visible: false,
			activeTab: 'inventory',
			productId: '',
			productInfo: null,
			// 库存相关
			inventoryList: [],
			inventoryLoading: false,
			inventoryTotal: 0,
			inventoryQuery: {
				currentPage: 1,
				pageSize: 20,
				ProductId: ''
			},
			inventoryFormVisible: false,
			// 使用记录相关
			usageList: [],
			usageLoading: false,
			usageTotal: 0,
			usageQuery: {
				currentPage: 1,
				pageSize: 20,
				ProductId: '',
				StoreId: undefined
			},
			usageFormVisible: false,
			// 选项数据
			storeOptions: []
		}
	},
	computed: {
		// 判断是否有采购入库记录
		hasPurchaseInventory() {
			return this.inventoryList && this.inventoryList.some(item => item.stockInType === 2)
		}
	},
	methods: {
		init(productId, productInfo) {
			this.visible = true
			this.productId = productId
			this.productInfo = productInfo
			this.activeTab = 'inventory'
			this.inventoryQuery.ProductId = productId
			this.usageQuery.ProductId = productId
			this.initInventoryData()
			this.initStoreOptions()
		},
		// 初始化门店选项
		initStoreOptions() {
			request({
				url: '/api/Extend/LqMdxx',
				method: 'GET',
				data: {
					currentPage: 1,
					pageSize: 1000
				}
			}).then(res => {
				if (res.data && res.data.list) {
					this.storeOptions = res.data.list
				}
			}).catch(() => {
				this.storeOptions = []
			})
		},
		// 库存相关方法
		initInventoryData() {
			this.inventoryLoading = true
			let query = { ...this.inventoryQuery }
			// 移除空值
			Object.keys(query).forEach(key => {
				if (query[key] === undefined || query[key] === null || query[key] === '') {
					delete query[key]
				}
			})
			request({
				url: '/api/Extend/LqInventory/GetList',
				method: 'GET',
				data: query
			}).then(res => {
				if (res.code == 200 && res.data) {
					this.inventoryList = res.data.list || []
					this.inventoryTotal = res.data.pagination ? res.data.pagination.total : 0
				} else {
					this.inventoryList = []
					this.inventoryTotal = 0
				}
				this.inventoryLoading = false
			}).catch(() => {
				this.inventoryLoading = false
				this.inventoryList = []
				this.inventoryTotal = 0
			})
		},
		addInventory() {
			this.inventoryFormVisible = true
			this.$nextTick(() => {
				// 从详情页调用，传入产品ID，默认选中当前产品
				this.$refs.InventoryForm.init(this.productId)
			})
		},
		refreshInventory() {
			this.inventoryFormVisible = false
			this.initInventoryData()
		},
		// 作废库存
		deleteInventory(row) {
			this.$confirm('确定要作废这条库存记录吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				const remarks = encodeURIComponent('作废')
				request({
					url: `/api/Extend/LqInventory/Cancel/${row.id}?remarks=${remarks}`,
					method: 'PUT'
				}).then(res => {
					this.$message({
						type: 'success',
						message: res.msg || '作废成功',
						onClose: () => {
							this.initInventoryData()
						}
					})
				}).catch(() => {
					// 请求失败
				})
			}).catch(() => {
				// 用户取消
			})
		},
		// 使用记录相关方法
		initUsageData() {
			this.usageLoading = true
			let query = { ...this.usageQuery }
			// 移除空值
			Object.keys(query).forEach(key => {
				if (query[key] === undefined || query[key] === null || query[key] === '') {
					delete query[key]
				}
			})
			console.error(query)
			request({
				url: '/api/Extend/LqInventoryUsage/GetList',
				method: 'GET',
				data: query
			}).then(res => {
				if (res.code == 200 && res.data) {
					this.usageList = res.data.list || []
					this.usageTotal = res.data.pagination ? res.data.pagination.total : 0
				} else {
					this.usageList = []
					this.usageTotal = 0
				}
				this.usageLoading = false
			}).catch(() => {
				this.usageLoading = false
				this.usageList = []
				this.usageTotal = 0
			})
		},
		addUsage() {
			this.usageFormVisible = true
			this.$nextTick(() => {
				this.$refs.UsageForm.init(this.productId)
			})
		},
		refreshUsage() {
			this.usageFormVisible = false
			this.initUsageData()
		},
		// 作废使用记录
		deleteUsage(row) {
			this.$confirm('确定要作废这条使用记录吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				request({
					url: `/api/Extend/LqInventoryUsage/Cancel?id=${row.id}`,
					method: 'PUT'
				}).then(res => {
					this.$message({
						type: 'success',
						message: res.msg || '作废成功',
						onClose: () => {
							this.initUsageData()
						}
					})
				}).catch(() => {
					// 请求失败
				})
			}).catch(() => {
				// 用户取消
			})
		},
		// 打印功能
		handlePrint(row) {
			if (!row.usageBatchId) {
				this.$message.warning('无法打印，批次ID不存在')
				return
			}
			
			// 调用接口获取批次信息
			request({
				url: `/api/Extend/LqInventoryUsage/GetBatchInfo?batchId=${row.usageBatchId}`,
				method: 'GET'
			}).then(res => {
				if (res.code === 200 && res.data) {
					// 构建打印内容
					let printContent = this.buildPrintContent(res.data)
					
					// 打开新窗口并打印
					let newWindow = window.open('_blank')
					if (!newWindow) {
						this.$message.error('无法打开打印窗口，请检查浏览器弹窗设置')
						return
					}
					
					newWindow.document.write(printContent)
					newWindow.document.close()
					
					// 等待内容加载完成后打印
					setTimeout(() => {
						newWindow.print()
					}, 300)
				} else {
					this.$message.error(res.msg || '获取批次信息失败')
				}
			}).catch(err => {
				this.$message.error('获取批次信息失败，请稍后重试')
			})
		},
		// 构建打印内容
		buildPrintContent(batchData) {
			// 格式化时间
			const formatDateTime = (timestamp) => {
				if (!timestamp) return '无'
				try {
					const date = new Date(timestamp)
					if (isNaN(date.getTime())) return '无'
					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}`
				} catch (e) {
					return '无'
				}
			}
			
			const formatDate = (timestamp) => {
				if (!timestamp) return '无'
				try {
					const date = new Date(timestamp)
					if (isNaN(date.getTime())) return '无'
					const year = date.getFullYear()
					const month = String(date.getMonth() + 1).padStart(2, '0')
					const day = String(date.getDate()).padStart(2, '0')
					return `${year}-${month}-${day}`
				} catch (e) {
					return '无'
				}
			}
			
			const formatMoney = (amount) => {
				if (!amount && amount !== 0) return '0.00'
				return Number(amount).toFixed(2)
			}
			
			// 过滤出有效记录（isEffective === 1）
			const effectiveRecords = batchData.UsageRecords ? batchData.UsageRecords.filter(item => item.isEffective === 1) : []
			
			// 获取门店名称（取第一条有效记录的门店名称）
			const storeName = effectiveRecords.length > 0 ? (effectiveRecords[0].storeName || '无') : '无'
			
			// 构建使用记录表格行（只包含有效记录，只显示产品名称和数量）
			let usageTableRows = ''
			if (effectiveRecords.length > 0) {
				effectiveRecords.forEach((item, index) => {
					usageTableRows += `
						<tr>
							<td style="text-align: center;">${index + 1}</td>
							<td>${item.productName || '无'}</td>
							<td style="text-align: center;">${item.usageQuantity || 0}</td>
						</tr>
					`
				})
			} else {
				usageTableRows = '<tr><td colspan="3" style="text-align: center;">暂无有效使用记录</td></tr>'
			}
			
			return `
				<!DOCTYPE html>
				<html>
				<head>
					<meta charset="UTF-8">
					<title>产品使用批次详情</title>
					<style>
						* {
							margin: 0;
							padding: 0;
							box-sizing: border-box;
						}
						body {
							font-family: "Microsoft YaHei", Arial, sans-serif;
							font-size: 13px;
							padding: 15px;
							color: #333;
						}
						.print-header {
							text-align: center;
							margin-bottom: 15px;
							border-bottom: 2px solid #333;
							padding-bottom: 10px;
						}
						.print-header h1 {
							font-size: 22px;
							font-weight: bold;
							margin-bottom: 5px;
						}
						.print-info {
							margin-bottom: 12px;
						}
						.print-info table {
							width: 100%;
							border-collapse: collapse;
							margin-bottom: 12px;
						}
						.print-info table td {
							padding: 6px 10px;
							border: 1px solid #ddd;
						}
						.print-info table td:first-child {
							background-color: #f5f5f5;
							font-weight: bold;
							width: 200px;
							text-align: right;
						}
						.print-table {
							width: 100%;
							border-collapse: collapse;
							margin-bottom: 12px;
						}
						.print-table thead {
							display: table-header-group;
						}
						.print-table tbody {
							display: table-row-group;
						}
						.print-table th,
						.print-table td {
							border: 1px solid #ddd;
							padding: 5px 6px;
							text-align: left;
							font-size: 12px;
						}
						.print-table th {
							background-color: #f5f5f5;
							font-weight: bold;
							text-align: center;
						}
						.print-table tbody tr {
							page-break-inside: avoid;
						}
						.print-footer {
							margin-top: 15px;
							padding-top: 10px;
							border-top: 1px solid #ddd;
							text-align: right;
							font-size: 11px;
							color: #666;
						}
						@media print {
							body {
								padding: 8px;
							}
							.print-header {
								page-break-after: avoid;
								margin-bottom: 12px;
								padding-bottom: 8px;
							}
							.print-info {
								page-break-after: avoid;
								margin-bottom: 10px;
							}
							.print-table {
								page-break-inside: auto;
							}
							.print-table thead {
								display: table-header-group;
							}
							.print-table tbody tr {
								page-break-inside: avoid;
							}
						}
					</style>
				</head>
				<body>
					<div class="print-header">
						<h1>产品使用批次详情</h1>
					</div>
					
					<div class="print-info">
						<table>
							<tr>
								<td>门店名称：</td>
								<td>${storeName}</td>
							</tr>
						</table>
					</div>
					
					<div class="print-info">
						<h3 style="margin-bottom: 8px; font-size: 14px;">使用记录明细</h3>
						<table class="print-table">
							<thead>
								<tr>
									<th style="width: 50px;">序号</th>
									<th>产品名称</th>
									<th style="width: 100px;">数量</th>
								</tr>
							</thead>
							<tbody>
								${usageTableRows}
							</tbody>
						</table>
					</div>
					
					<div class="print-footer">
						<p>打印时间：${formatDateTime(new Date().getTime())}</p>
					</div>
				</body>
				</html>
			`
		},
		// 工具方法
		formatMoney(amount) {
			if (!amount && amount !== 0) return '0.00'
			return Number(amount).toFixed(2)
		},
		formatDate(date) {
			if (!date) return '无'
			try {
				const d = new Date(date)
				if (isNaN(d.getTime())) return '无'
				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}`
			} catch (e) {
				return date
			}
		},
		formatDateTime(dateTime) {
			if (!dateTime) return '无'
			try {
				const date = new Date(dateTime)
				if (isNaN(date.getTime())) return '无'
				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}`
			} catch (e) {
				return dateTime
			}
		},
		// 获取审批状态标签类型
		getApprovalStatusType(status) {
			if (!status) return 'info'
			const statusMap = {
				'待审批': 'warning',
				'审批中': 'primary',
				'已通过': 'success',
				'未通过': 'danger',
				'已退回': 'info'
			}
			return statusMap[status] || 'info'
		}
	},
	watch: {
		activeTab(newVal) {
			console.error(newVal,'1111111111')
			if (newVal === 'usage') {
				console.error('initUsageData')
				this.initUsageData()
			} else if (newVal === 'inventory') {
				console.error('initInventoryData')
				this.initInventoryData()
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.detail-content {
	.info-card {
		margin-bottom: 20px;

		.card-header {
			display: flex;
			align-items: center;
			gap: 8px;

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

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

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

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

			.info-value {
				color: #303133;
				flex: 1;
			}
		}
	}

	.detail-tabs {
		margin-top: 20px;

		.tab-content {
			.tab-header {
				margin-bottom: 15px;
				display: flex;
				justify-content: flex-start;
			}
		}
	}
}

// 通用文本不换行样式
.text-nowrap {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

// 库存相关样式
.inventory-id-info,
.quantity-info,
.stock-time-info,
.production-date-info,
.shelf-life-info,
.batch-number-info,
.purchase-unit-price-info,
.purchase-amount-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

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

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

.stock-time-icon,
.production-date-icon {
	color: #909399;
	font-size: 16px;
}

.shelf-life-icon,
.batch-number-icon {
	color: #E6A23C;
	font-size: 16px;
}

.purchase-unit-price-icon {
	color: #67C23A;
	font-size: 16px;
}

.purchase-amount-icon {
	color: #F56C6C;
	font-size: 16px;
}

// 使用记录相关样式
.usage-id-info,
.product-name-info,
.store-name-info,
.usage-quantity-info,
.unit-price-info,
.total-amount-info,
.usage-time-info,
.related-consume-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

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

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

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

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

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

.total-amount-icon {
	color: #F56C6C;
	font-size: 16px;
}

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

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

// 作废按钮样式
.cancel-btn {
	color: #F56C6C !important;
	&:hover {
		color: #f78989 !important;
	}
}
</style>

