<template>
	<el-dialog title="流水详情" :visible.sync="visible" width="900px" :close-on-click-modal="false" custom-class="flow-detail-dialog">
		<div v-loading="loading" class="detail-container">
			<!-- 基本信息 -->
			<div class="detail-section">
				<div class="section-title">
					<i class="el-icon-info section-icon"></i>
					<span>基本信息</span>
				</div>
				<div class="detail-content">
					<div class="detail-grid">
						<div class="detail-item">
							<div class="detail-label">
								<i class="el-icon-upload2 detail-icon" :class="form.flowType === 0 ? 'send-icon' : 'return-icon'"></i>
								<span>流水类型</span>
							</div>
							<div class="detail-value">
								<el-tag :type="form.flowType === 0 ? 'primary' : 'success'" size="small" class="flow-type-tag">
									<i :class="form.flowType === 0 ? 'el-icon-upload2' : 'el-icon-download'"></i>
									{{ form.flowTypeName || '无' }}
								</el-tag>
							</div>
						</div>
						<div class="detail-item">
							<div class="detail-label">
								<i class="el-icon-tickets detail-icon batch-icon"></i>
								<span>批次号</span>
							</div>
							<div class="detail-value">
								<span>{{ form.batchNumber || '无' }}</span>
							</div>
						</div>
						<div class="detail-item">
							<div class="detail-label">
								<i class="el-icon-office-building detail-icon store-icon"></i>
								<span>门店名称</span>
							</div>
							<div class="detail-value">
								<span>{{ form.storeName || '无' }}</span>
							</div>
						</div>
						<div class="detail-item">
							<div class="detail-label">
								<i class="el-icon-goods detail-icon product-icon"></i>
								<span>产品类型</span>
							</div>
							<div class="detail-value">
								<span>{{ form.productType || '无' }}</span>
							</div>
						</div>
						<div class="detail-item">
							<div class="detail-label">
								<i class="el-icon-s-shop detail-icon supplier-icon"></i>
								<span>清洗商名称</span>
							</div>
							<div class="detail-value">
								<span>{{ form.laundrySupplierName || '无' }}</span>
							</div>
						</div>
						<div class="detail-item">
							<div class="detail-label">
								<i class="el-icon-s-data detail-icon quantity-icon"></i>
								<span>数量</span>
							</div>
							<div class="detail-value">
								<span class="value-number">{{ form.quantity || 0 }}</span>
							</div>
						</div>
						<div class="detail-item" v-if="form.flowType === 0">
							<div class="detail-label">
								<i class="el-icon-time detail-icon time-icon"></i>
								<span>送出时间</span>
							</div>
							<div class="detail-value">
								<span>{{ form.sendTime ? formatDateTime(form.sendTime) : '无' }}</span>
							</div>
						</div>
						<div class="detail-item" v-if="form.flowType === 1">
							<div class="detail-label">
								<i class="el-icon-time detail-icon time-icon"></i>
								<span>送回时间</span>
							</div>
							<div class="detail-value">
								<span>{{ form.returnTime ? formatDateTime(form.returnTime) : '无' }}</span>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 费用信息 -->
			<div class="detail-section">
				<div class="section-title">
					<i class="el-icon-coin section-icon"></i>
					<span>费用信息</span>
				</div>
				<div class="detail-content">
					<div class="detail-grid">
						<div class="detail-item price-item">
							<div class="detail-label">
								<i class="el-icon-coin detail-icon price-icon"></i>
								<span>清洗单价</span>
							</div>
							<div class="detail-value">
								<span class="value-number">¥{{ form.laundryPrice || 0 }}</span>
							</div>
						</div>
						<div class="detail-item price-item total-item">
							<div class="detail-label">
								<i class="el-icon-money detail-icon total-price-icon"></i>
								<span>总费用</span>
							</div>
							<div class="detail-value">
								<span class="value-number value-total">¥{{ form.totalPrice || 0 }}</span>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 其他信息 -->
			<div class="detail-section">
				<div class="section-title">
					<i class="el-icon-document section-icon"></i>
					<span>其他信息</span>
				</div>
				<div class="detail-content">
					<div class="detail-grid">
						<div class="detail-item full-width">
							<div class="detail-label">
								<i class="el-icon-document detail-icon remark-icon"></i>
								<span>备注</span>
							</div>
							<div class="detail-value">
								<span>{{ form.remark || '无' }}</span>
							</div>
						</div>
						<div class="detail-item">
							<div class="detail-label">
								<i class="el-icon-success detail-icon status-icon"></i>
								<span>是否有效</span>
							</div>
							<div class="detail-value">
								<el-tag :type="form.isEffective === 1 ? 'success' : 'info'" size="small" class="status-tag">
									{{ form.isEffective === 1 ? '有效' : '无效' }}
								</el-tag>
							</div>
						</div>
						<div class="detail-item">
							<div class="detail-label">
								<i class="el-icon-user detail-icon user-icon"></i>
								<span>创建人</span>
							</div>
							<div class="detail-value">
								<span>{{ form.createUserName || '无' }}</span>
							</div>
						</div>
						<div class="detail-item">
							<div class="detail-label">
								<i class="el-icon-time detail-icon time-icon"></i>
								<span>创建时间</span>
							</div>
							<div class="detail-value">
								<span>{{ formatDateTime(form.createTime) || '无' }}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="visible = false" type="primary">关闭</el-button>
		</div>
	</el-dialog>
</template>

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

export default {
	name: 'DetailDialog',
	data() {
		return {
			visible: false,
			loading: false,
			form: {
				id: '',
				flowType: 0,
				flowTypeName: '',
				batchNumber: '',
				storeId: '',
				storeName: '',
				productType: '',
				laundrySupplierId: '',
				laundrySupplierName: '',
				quantity: 0,
				laundryPrice: 0,
				totalPrice: 0,
				remark: '',
				isEffective: 1,
				createUser: '',
				createUserName: '',
				createTime: '',
				sendTime: '',
				returnTime: ''
			}
		}
	},
	methods: {
		// 初始化
		init(id) {
			this.visible = true
			this.loading = true
			request({
				url: `/api/Extend/LqLaundryFlow/${id}`,
				method: 'GET'
			}).then(res => {
				this.loading = false
				if (res.code == 200 && res.data) {
					this.form = res.data
				} else {
					this.$message.error(res.msg || '获取详情失败')
					this.visible = false
				}
			}).catch(() => {
				this.loading = false
				this.visible = false
			})
		},
		// 格式化日期时间
		formatDateTime(dateTime) {
			if (!dateTime) return ''
			const date = new Date(dateTime)
			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}`
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .flow-detail-dialog {
  .el-dialog {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  .el-dialog__header {
    padding: 18px 24px;
    border-bottom: 1px solid #e4e7ed;
    background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
    color: #fff;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, #409EFF 0%, #66b1ff 100%);
    }

    .el-dialog__title {
      color: #fff;
      font-size: 18px;
      font-weight: 600;
    }

    .el-dialog__close {
      color: rgba(255, 255, 255, 0.8);
      font-size: 20px;
      transition: all 0.2s ease;

      &:hover {
        color: #fff;
      }
    }
  }

  .el-dialog__body {
    padding: 16px;
    background: #ffffff;
    max-height: 70vh;
    overflow-y: auto;
  }

  .el-dialog__footer {
    padding: 12px 24px;
    background: #ffffff;
    border-top: 1px solid #e4e7ed;
  }
}

.detail-container {
	padding: 0;
}

.detail-section {
	margin-bottom: 12px;
	background: #ffffff;
	border-radius: 8px;
	border: 1px solid #e4e7ed;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	overflow: hidden;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

	&:hover {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		transform: translateY(-1px);
	}

	&:last-child {
		margin-bottom: 0;
	}
}

.section-title {
	display: flex;
	align-items: center;
	padding: 12px 16px;
	background: linear-gradient(135deg, rgba(64, 158, 255, 0.08) 0%, rgba(102, 177, 255, 0.05) 100%);
	border-bottom: 1px solid rgba(64, 158, 255, 0.15);
	font-size: 14px;
	font-weight: 600;
	color: #303133;
}

.section-icon {
	margin-right: 8px;
	color: #409EFF;
	font-size: 16px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.detail-section:hover .section-icon {
	transform: scale(1.1) rotate(5deg);
}

.detail-content {
	padding: 12px;
}

.detail-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.detail-item {
	display: flex;
	flex-direction: column;
	padding: 10px 12px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 250, 0.9) 100%);
	border-radius: 6px;
	border: 1px solid rgba(64, 158, 255, 0.1);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 2px;
		background: linear-gradient(90deg, #409EFF 0%, #66b1ff 100%);
		opacity: 0;
		transition: opacity 0.3s;
	}

	&:hover {
		background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
		border-color: rgba(64, 158, 255, 0.3);
		box-shadow: 0 4px 12px rgba(64, 158, 255, 0.1);

		&::before {
			opacity: 1;
		}

		.detail-icon {
			transform: scale(1.1) rotate(5deg);
		}
	}

	&.full-width {
		grid-column: 1 / -1;
	}

	&.price-item {
		background: linear-gradient(135deg, rgba(230, 162, 60, 0.08) 0%, rgba(240, 180, 90, 0.05) 100%);
		border-color: rgba(230, 162, 60, 0.2);

		&::before {
			background: linear-gradient(90deg, #E6A23C 0%, #f0b45a 100%);
		}
	}

	&.total-item {
		background: linear-gradient(135deg, rgba(245, 108, 108, 0.08) 0%, rgba(255, 128, 128, 0.05) 100%);
		border-color: rgba(245, 108, 108, 0.2);

		&::before {
			background: linear-gradient(90deg, #F56C6C 0%, #ff8080 100%);
		}
	}
}

.detail-label {
	display: flex;
	align-items: center;
	margin-bottom: 6px;
	font-weight: 500;
	color: #606266;
	font-size: 13px;
}

.detail-icon {
	margin-right: 6px;
	font-size: 14px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.detail-value {
	color: #303133;
	font-size: 13px;
	word-break: break-all;
	line-height: 1.5;
}

.value-number {
	font-weight: 600;
	color: #E6A23C;
	font-size: 13px;
}

.value-total {
	font-size: 13px;
	font-weight: 600;
	color: #F56C6C;
	letter-spacing: -0.3px;
}

.flow-type-tag {
	i {
		margin-right: 4px;
	}
}

.status-tag {
	font-weight: 500;
}

// 图标颜色
.batch-icon {
	color: #409EFF;
}

.store-icon {
	color: #409EFF;
}

.product-icon {
	color: #67C23A;
}

.supplier-icon {
	color: #409EFF;
}

.quantity-icon {
	color: #E6A23C;
}

.price-icon {
	color: #E6A23C;
}

.total-price-icon {
	color: #F56C6C;
}

.remark-icon {
	color: #909399;
}

.status-icon {
	color: #67C23A;
}

.user-icon {
	color: #909399;
}

.time-icon {
	color: #909399;
}

.send-icon {
	color: #409EFF;
}

.return-icon {
	color: #67C23A;
}

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

// 响应式布局
@media (max-width: 1200px) {
	.detail-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.detail-grid {
		grid-template-columns: 1fr;
	}
}

// 滚动条美化
::v-deep .el-dialog__body {
	&::-webkit-scrollbar {
		width: 6px;
	}

	&::-webkit-scrollbar-track {
		background: rgba(240, 242, 245, 0.5);
		border-radius: 3px;
	}

	&::-webkit-scrollbar-thumb {
		background: linear-gradient(135deg, #c0c4cc 0%, #909399 100%);
		border-radius: 3px;
		transition: background 0.3s;

		&:hover {
			background: linear-gradient(135deg, #909399 0%, #606266 100%);
		}
	}
}
</style>

