<template>
	<div class="item-trace-container">
		<!-- 顶部导航 -->
		<div class="trace-header">
			<h1 class="title">换住源溯源系统</h1>
			<el-input
				v-model="searchQuery"
				placeholder="请输入换住区块编号"
				class="search-input"
				clearable
				@keyup.enter="handleSearch"
			>
				<template #append>
					<el-button :icon="Search" @click="handleSearch" />
				</template>
			</el-input>
		</div>

		<el-row   :gutter="20"  >
			<el-col :span="12" v-if="!isEmpty(state.userA)">
				<el-descriptions title="甲方用户信息" :column="3" border>
					<el-descriptions-item
						label="姓名"
						label-align="right"
						align="center"
						label-class-name="my-label"
						class-name="my-content"
						width="150px"
					>{{ state.userA.nickName }}</el-descriptions-item
					>
					<el-descriptions-item label="手机号" label-align="right" align="center">{{ state.userA.phone }}</el-descriptions-item>

				</el-descriptions>

			</el-col>
			<el-col :span="12" v-if="!isEmpty(state.userB)">

				<el-descriptions title="甲方用户信息" :column="3" border>
					<el-descriptions-item
						label="姓名"
						label-align="right"
						align="center"
						label-class-name="my-label"
						class-name="my-content"
						width="150px"
					>{{ state.userB.nickName }}</el-descriptions-item
					>
					<el-descriptions-item label="手机号" label-align="right" align="center">{{ state.userB.phone }}</el-descriptions-item>
				</el-descriptions>

			</el-col>
		</el-row>
		<div style="height: 40px"></div>

<!--		A-->
		<el-row :gutter="20" v-if="!isEmpty(state.houseA)">
			<el-col :span="6">
				<el-image
					:src=" state.houseA.image"
					fit="cover"
					class="main-image"

				/>
			</el-col>
			<el-col :span="18">
				<el-col :xs="24" :sm="24" :md="12" :lg="14">
					<!-- 信息展示区 -->
					<div class="info-section">
						<h1 class="property-title">{{ state.houseA.title}}</h1>

						<div class="property-meta">
							<div class="meta-item">
								<span class="meta-label">房源地址:</span>
								<span class="meta-value">{{ state.houseA.city || '暂无' }}</span>
							</div>

							<div class="price-section">
								<span class="price-label">价格:</span>
								<span class="price-value">{{ state.houseA.price || '0' }}</span>
								<span class="price-unit">元/平方</span>
								<el-tag type="success" size="small" class="blockchain-tag">
									<span class="tag-icon">⛓</span>
									<span>链上价格</span>
								</el-tag>
							</div>

							<div class="verification-badge">
								<el-icon><SuccessFilled /></el-icon>
								<span>房源信息已通过区块链验证</span>
							</div>

							<div class="property-details">
								<div class="detail-item">
									<span class="detail-label">小区名称:</span>
									<span class="detail-value">{{ state.houseA.name || '暂无' }}</span>
								</div>
								<div class="detail-item">
									<span class="detail-label">朝向:</span>
									<span class="detail-value">{{ state.houseA.face || '暂无' }}</span>
								</div>
								<div class="detail-item">
									<span class="detail-label">面积:</span>
									<span class="detail-value">{{ state.houseA.area || '0' }} 平方</span>
								</div>
								<div class="detail-item">
									<span class="detail-label">楼层:</span>
									<span class="detail-value">{{ state.houseA.floor || '0' }}层</span>
								</div>
							</div>

							<!-- 区块链哈希展示 -->
							<div class="blockchain-hash">
								<div class="hash-title">
									<el-icon><Connection /></el-icon>
									<span>区块链编号</span>
								</div>
								<el-tooltip :content="state.houseA.hex || '暂无'" placement="top">
									<div class="hash-value">
									{{	state.houseA.hex}}
									</div>
								</el-tooltip>

							</div>
						</div>

					</div>
				</el-col>
			</el-col>

		</el-row>

		<el-row :gutter="20"  v-if="!isEmpty(state.houseB)">
			<el-col :span="6">
				<el-image
					:src=" state.houseB.image"
					fit="cover"
					class="main-image"

				/>
			</el-col>
			<el-col :span="18">
				<el-col :xs="24" :sm="24" :md="12" :lg="14">
					<!-- 信息展示区 -->
					<div class="info-section">
						<h1 class="property-title">{{ state.houseB.title}}</h1>

						<div class="property-meta">
							<div class="meta-item">
								<span class="meta-label">房源地址:</span>
								<span class="meta-value">{{ state.houseB.city || '暂无' }}</span>
							</div>

							<div class="price-section">
								<span class="price-label">价格:</span>
								<span class="price-value">{{ state.houseB.price || '0' }}</span>
								<span class="price-unit">元/平方</span>
								<el-tag type="success" size="small" class="blockchain-tag">
									<span class="tag-icon">⛓</span>
									<span>链上价格</span>
								</el-tag>
							</div>

							<div class="verification-badge">
								<el-icon><SuccessFilled /></el-icon>
								<span>房源信息已通过区块链验证</span>
							</div>

							<div class="property-details">
								<div class="detail-item">
									<span class="detail-label">小区名称:</span>
									<span class="detail-value">{{ state.houseB.name || '暂无' }}</span>
								</div>
								<div class="detail-item">
									<span class="detail-label">朝向:</span>
									<span class="detail-value">{{ state.houseB.face || '暂无' }}</span>
								</div>
								<div class="detail-item">
									<span class="detail-label">面积:</span>
									<span class="detail-value">{{ state.houseB.area || '0' }} 平方</span>
								</div>
								<div class="detail-item">
									<span class="detail-label">楼层:</span>
									<span class="detail-value">{{ state.houseB.floor || '0' }}层</span>
								</div>
							</div>

							<!-- 区块链哈希展示 -->
							<div class="blockchain-hash">
								<div class="hash-title">
									<el-icon><Connection /></el-icon>
									<span>区块链编号</span>
								</div>
								<el-tooltip :content="state.houseA.hex || '暂无'" placement="top">
									<div class="hash-value">
										{{	state.houseB.hex}}
									</div>
								</el-tooltip>

							</div>
						</div>

					</div>
				</el-col>
			</el-col>

		</el-row>
	</div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ArrowRight, Connection, Search, SuccessFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
// 搜索查询
const searchQuery = ref('')

function isEmpty(obj) {
	return Object.keys(obj).length === 0;
}

const state = reactive(<any>{
	dto:{},
	houseA:{},
	houseB:{},
	userA:{},
	userB:{},
})

// 搜索房源
const handleSearch = async () => {
	if (!searchQuery.value.trim()) {
		ElMessage.warning('请输入查询内容')
		return
	}
	frontRequest.get(`/api/order/hex?hex=${searchQuery.value}`).then(response =>{
		ElMessage.success('查询成功')
		state.dto = response.data.dto
		state.houseA = response.data.houseA
		state.houseB = response.data.houseB
		state.userA = response.data.userA
		state.userB = response.data.userB
	})
}
</script>

<style scoped>
.item-trace-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}

.trace-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
}

.title {
	color: #333;
	font-size: 24px;
}

.search-input {
	width: 400px;
}
.info-header h2 {
	margin-right: 15px;
	font-size: 22px;
	color: #333;
}
.info-section h3 {
	color: #666;
	font-size: 18px;
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 1px solid #eee;
}

</style>

<style scoped>
/* 全局样式 */
.blockchain-detail-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	color: #333;
}

/* 头部样式 */
.blockchain-header {
	margin-bottom: 30px;
	padding-bottom: 15px;
	border-bottom: 1px solid #eaeaea;
}

.nav-logo {
	display: flex;
	align-items: center;
	font-size: 20px;
	font-weight: bold;
	color: #2c3e50;
	margin-bottom: 15px;
}

.logo-icon {
	margin-right: 10px;
	font-size: 24px;
	color: #1abc9c;
}

.blockchain-breadcrumb {
	padding: 8px 0;
}

/* 图片区域 */
.image-section {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	margin-bottom: 20px;
}

.main-image {
	width: 100%;
	height: 400px;
	display: block;
	transition: all 0.3s;
}

.main-image:hover {
	transform: scale(1.02);
}

.blockchain-badge {
	position: absolute;
	top: 15px;
	right: 15px;
	background-color: rgba(26, 188, 156, 0.9);
	color: white;
	padding: 6px 12px;
	border-radius: 4px;
	font-size: 14px;
	display: flex;
	align-items: center;
	z-index: 2;
}

.badge-icon {
	margin-right: 5px;
	font-size: 14px;
}

.image-tags {
	position: absolute;
	bottom: 15px;
	left: 15px;
	display: flex;
	gap: 10px;
	z-index: 2;
}

.location-tag {
	background-color: rgba(52, 152, 219, 0.9);
	color: white;
	border: none;
}

.type-tag {
	background-color: rgba(46, 204, 113, 0.9);
	color: white;
	border: none;
}

/* 信息区域 */
.info-section {
	padding: 0 15px;
}

.property-title {
	font-size: 24px;
	font-weight: 700;
	color: #2c3e50;
	margin-bottom: 20px;
	line-height: 1.3;
}

.property-meta {
	margin-bottom: 30px;
}

.meta-item {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
	font-size: 16px;
}

.meta-label {
	color: #7f8c8d;
	margin-right: 10px;
	min-width: 80px;
}

.meta-value {
	color: #34495e;
	font-weight: 500;
}

.price-section {
	display: flex;
	align-items: center;
	margin: 25px 0;
	padding-bottom: 20px;
	border-bottom: 1px dashed #eaeaea;
}

.price-label {
	color: #7f8c8d;
	margin-right: 10px;
	font-size: 16px;
}

.price-value {
	color: #e74c3c;
	font-size: 28px;
	font-weight: 700;
	margin-right: 5px;
}

.price-unit {
	color: #95a5a6;
	font-size: 16px;
	margin-right: 15px;
}

.blockchain-tag {
	background-color: #e8f8f5;
	color: #1abc9c;
	border: none;
	display: flex;
	align-items: center;
}

.tag-icon {
	margin-right: 5px;
}

.verification-badge {
	display: flex;
	align-items: center;
	background-color: #f8f9fa;
	padding: 10px 15px;
	border-radius: 6px;
	margin-bottom: 25px;
	color: #1abc9c;
	font-size: 14px;
}

.verification-badge .el-icon {
	margin-right: 8px;
	font-size: 18px;
}

.property-details {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px;
	margin-bottom: 30px;
}

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

.detail-label {
	color: #7f8c8d;
	margin-right: 8px;
	min-width: 50px;
}

.detail-value {
	color: #34495e;
	font-weight: 500;
}

/* 区块链哈希区域 */
.blockchain-hash {
	background-color: #f5f7fa;
	padding: 15px;
	border-radius: 6px;
	margin-bottom: 30px;
	border-left: 4px solid #1abc9c;
}

.hash-title {
	display: flex;
	align-items: center;
	color: #2c3e50;
	font-weight: 600;
	margin-bottom: 10px;
}

.hash-title .el-icon {
	margin-right: 8px;
	color: #1abc9c;
}

.hash-value {
	font-family: 'Courier New', monospace;
	background-color: #2c3e50;
	color: #ecf0f1;
	padding: 10px;
	border-radius: 4px;
	word-break: break-all;
	margin-bottom: 10px;
	font-size: 14px;
	cursor: pointer;
	transition: all 0.3s;
}

.hash-value:hover {
	background-color: #1a252f;
}

.view-transaction {
	color: #1abc9c !important;
	font-size: 13px;
}

.view-transaction .el-icon {
	margin-left: 3px;
}

/* 操作按钮 */
.action-buttons {
	display: flex;
	gap: 15px;
	margin-top: 30px;
	flex-wrap: wrap;
}

.buy-button {
	background-color: #e74c3c;
	border: none;
	height: 48px;
	font-size: 16px;
	font-weight: 500;
	padding: 0 25px;
	flex: 1;
}

.buy-button:hover {
	background-color: #c0392b;
}

.buy-button .el-icon {
	margin-right: 8px;
}

.cart-button {
	height: 48px;
	font-size: 16px;
	font-weight: 500;
	padding: 0 25px;
	flex: 1;
	border: 1px solid #1abc9c;
	color: #1abc9c;
	background-color: rgba(26, 188, 156, 0.1);
}

.cart-button:hover {
	background-color: rgba(26, 188, 156, 0.2);
}

.cart-button .el-icon {
	margin-right: 8px;
}

.favorite-button {
	height: 48px;
	font-size: 16px;
	font-weight: 500;
	padding: 0 25px;
	flex: 1;
}

.favorite-button .el-icon {
	margin-right: 8px;
}

/* 抽屉样式 */
.drawer-content {
	padding: 20px;
}

.blockchain-form {
	max-width: 500px;
	margin: 0 auto;
}

.blockchain-form :deep(.el-form-item__label) {
	font-weight: 500;
	color: #2c3e50;
}

.confirm-button {
	width: 100%;
	height: 48px;
	font-size: 16px;
	margin-top: 20px;
}

.confirm-button .el-icon {
	margin-right: 8px;
}

/* 响应式调整 */
@media (max-width: 768px) {
	.property-details {
		grid-template-columns: 1fr;
	}
	.action-buttons {
		flex-direction: column;
	}
	.buy-button,
	.cart-button,
	.favorite-button {
		width: 100%;
	}
}
</style>
<route lang="json">
{
"meta": {
"layout": "front"
}
}
</route>
