<template>
	<div class="blockchain-detail-container">
		<!-- 头部区块信息 -->
		<div class="blockchain-header">
			<div class="nav-logo">
				<span class="logo-icon">⛓</span>
				<span class="logo-text">链家溯源 · 房源详情</span>
			</div>
			<div class="blockchain-breadcrumb">
				<el-breadcrumb separator="/">
					<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item>房源详情</el-breadcrumb-item>
					<el-breadcrumb-item>{{ state.info.title || '加载中...' }}</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
		</div>

		<!-- 主要内容区 -->
		<div class="detail-content">
			<el-row :gutter="30">
				<el-col :xs="24" :sm="24" :md="12" :lg="10">
					<!-- 图片展示区 -->
					<div class="image-section">
						<el-image
							:src="state.info.image"
							fit="cover"
							class="main-image"
							:preview-src-list="[state.info.image]"
						/>
						<div class="blockchain-badge">
							<span class="badge-icon">🔗</span>
							<span class="badge-text">链上验证</span>
						</div>
						<div class="image-tags">
							<el-tag v-if="state.info.tag" type="info" class="location-tag">
								<i class="el-icon-location-information"></i>
								{{ state.info.tag }}
							</el-tag>
							<el-tag v-if="state.info.type" type="success" class="type-tag">
								{{ state.info.type }}
							</el-tag>
						</div>
					</div>
				</el-col>

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

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

							<div class="price-section">
								<span class="price-label">价格:</span>
								<span class="price-value">{{ state.info.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.info.name || '暂无' }}</span>
								</div>
								<div class="detail-item">
									<span class="detail-label">朝向:</span>
									<span class="detail-value">{{ state.info.face || '暂无' }}</span>
								</div>
								<div class="detail-item">
									<span class="detail-label">面积:</span>
									<span class="detail-value">{{ state.info.area || '0' }} 平方</span>
								</div>
								<div class="detail-item">
									<span class="detail-label">楼层:</span>
									<span class="detail-value">{{ state.info.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.info.hex || '暂无'" placement="top">
									<div class="hash-value">
										{{ shortenHash(state.info.hex) || '暂无区块链信息' }}
									</div>
								</el-tooltip>
								<el-button
									type="text"
									size="small"
									class="view-transaction"
									v-if="state.info.hex"
								>
									查看交易记录 <el-icon><ArrowRight /></el-icon>
								</el-button>
							</div>
						</div>

						<!-- 操作按钮 -->
						<div class="action-buttons">
							<el-button
								type="primary"
								class="buy-button"
								@click="handleBuy"
								v-if="state.info.price"
							>
								<el-icon><Refresh /></el-icon>
								换住
							</el-button>

							<el-button
								:type="state.info.isFavorite ? 'danger' : 'info'"
								class="favorite-button"
								@click="handleFavorite"
							>
								<el-icon>{{ state.info.isFavorite ? 'StarFilled' : 'Star' }}</el-icon>
								{{ state.info.isFavorite ? '已收藏' : '收藏房源' }}
							</el-button>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>

		<!-- 购买抽屉 -->
		<el-drawer
			v-model="buyDrawer"
			title="区块链换住确认"
			size="40%"

		>
			<div class="drawer-content">
				<el-form
					ref="formRef"
					:model="state.buyForm"
					label-position="top"
					class="blockchain-form"
				>
					<el-form-item label="选择您需要交换的房源"
												:rules="[
        {
          required: true,
          message: '请选择您需要交换的房源',
          trigger: 'blur',
        },
      ]" prop="userHouseId">
						<el-select
							style="width:100%"
							v-model="state.buyForm.userHouseId"
							placeholder="请选择"
							clearable
						>
							<el-option v-for="item in state.houseList"
												 :label="`${item.name}-${item.type}`"
												 :value="item.id" />
						</el-select>
					</el-form-item>
					<el-form-item label="房源名称" prop="title">
						<el-input v-model="state.buyForm.title" disabled>
							<template #prefix>
								<el-icon><OfficeBuilding /></el-icon>
							</template>
						</el-input>
					</el-form-item>
					<el-form-item label="房源单价(元)" prop="price">
						<el-input v-model="state.buyForm.price" disabled>
							<template #prefix>
								<el-icon><Coin /></el-icon>
							</template>
						</el-input>
					</el-form-item>
					<el-form-item label="总价(元)" prop="totalAmount">
						<el-input v-model="state.buyForm.totalAmount" disabled>
							<template #prefix>
								<el-icon><Money /></el-icon>
							</template>
						</el-input>
					</el-form-item>
					<el-form-item label="用户姓名" prop="title">
						<el-input v-model="state.userInfo.nickName" disabled>
							<template #prefix>
								<el-icon><User /></el-icon>
							</template>
						</el-input>
					</el-form-item>
					<el-form-item label="联系方式" prop="title">
						<el-input v-model="state.userInfo.introduce" disabled>
						</el-input>
					</el-form-item>
					<el-form-item label="区块链确认" prop="blockchain">
						<el-alert
							title="此交易将通过区块链网络确认，交易记录将永久保存"
							type="info"
							:closable="false"
							show-icon
						/>
					</el-form-item>
					<el-form-item>
						<el-button
							type="primary"
							class="confirm-button"
							@click="buySubmitForm(formRef)"
						>
							<el-icon><Checked /></el-icon>
							确认申请交换
						</el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-drawer>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import {
	SuccessFilled,
	ShoppingCart,
	Goods,

	Connection,
	ArrowRight,
	OfficeBuilding,
	Coin,
	Money,
	Checked
} from '@element-plus/icons-vue'
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'

const route = useRoute()
const itemId = route.params.id
const buyDrawer = ref(false)
const formRef = ref<FormInstance>()
const state = reactive(<any>{
	info: {},
	buyForm: {
		itemId: itemId,
		title: "",
		quantity: 1,
		price: 0,
		totalAmount: 0
	},
	cateList: [],
	userInfo:{},
	houseList:[]
})

/**
 * 缩短哈希显示
 */
function shortenHash(hash: string) {
	if (!hash) return ''
	return hash.substring(0, 6) + '...' + hash.substring(hash.length - 4)
}


function init() {
	frontRequest.get(`/api/item/${itemId}`).then(response => {
		state.info = response.data
	})
	frontRequest.get(`api/address/page`).then(response => {
		state.cateList = response.data.list
	})

	frontRequest.get("/api/item/push").then(res =>{
		state.houseList = res.data

	})
}

/**
 * 用户收藏
 */
function handleFavorite() {
	if (state.info.isFavorite) {
		frontRequest.post("/api/behavior/delete", {itemId: itemId, type: 1}).then(res => {
			ElMessage.success({
				message: '已取消收藏',
				offset: 80
			})
			init()
		})
	} else {
		frontRequest.post("/api/behavior", {itemId: itemId, type: 1}).then(res => {
			ElMessage.success({
				message: '收藏成功',
				offset: 80
			})
			init()
		})
	}
}

/**
 * 购买按钮提交
 */
const buySubmitForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.validate((valid) => {
		if (valid) {
			frontRequest.post("/api/order",{
				itemId:itemId,  //房源编号
				userHouseId:state.buyForm.userHouseId,  //换住房源编号
			}).then(() => {
				ElMessage.success({
					message: '换住信息已提交区块链网络',
					offset: 80
				})
				buyDrawer.value = false
			})
		}
	})
}

/**
 * 购买按钮
 */
const handleBuy = () => {
	//判断是否是自己房源
	frontRequest.get("/api/user/userInfo").then(res =>{
		if (state.info.userId === res.data.id){
			ElMessage.warning("自己房源不能换住")
			return
		}
		state.userInfo = res.data
		buyDrawer.value = true
		state.buyForm.title = state.info.title
		state.buyForm.id = state.info.id
		state.buyForm.price = state.info.price
		updateTotalAmount()
	})
}




onMounted(() => {
	init()
})
</script>

<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>
