<template>
	<div class="order-container">
		<el-tabs tab-position="left" style="height: 200px" class="demo-tabs">
			<el-tab-pane label="我申请的">
				<el-tabs v-model="state.page.status" @tab-click="handleClick">
					<el-tab-pane v-for="status in state.getOrderStatus" :label="status.name" :name="status.status">
						<el-table
							:data="state.getList"
							style="width: 100%"
							class="order-table"
						>
							<el-table-column prop="item.name" label="甲方房源名称"   align="center"/>
							<el-table-column label="甲方房源图片" >
								<template #default="{ row }">
									<img :src="row.item.image" class="product-image">
								</template>
							</el-table-column>
							<el-table-column prop="item.name" label="乙方房源名称"   align="center"/>
							<el-table-column  label="乙方房源图片" >
								<template #default="{ row }">
									<img :src="row.itemA.image" class="product-image">
								</template>
							</el-table-column>
							<el-table-column prop="itemA.price" label="状态"  align="center">
								<template #default="{ row }">
									{{ row.status }}
								</template>
							</el-table-column>
							<el-table-column label="操作" width="180" align="center">
								<template #default="scope">
									<el-button
										link
										type="info"
										size="small"
										@click="showReceipt(scope.row)"
									>
										查看凭证
									</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-tab-pane>
				</el-tabs>
			</el-tab-pane>
			<el-tab-pane label="他人申请">
				<el-table
					:data="state.list"
					style="width: 100%"
					class="order-table"
				>
					<el-table-column prop="user.nickName" label="申请人名称"   align="center"/>
					<el-table-column prop="user.introduce" label="申请人联系方式"   align="center"/>
					<el-table-column prop="item.name" label="申请人房源名称"   align="center"/>
					<el-table-column label="申请人房源图片" >
						<template #default="{ row }">
							<img :src="row.item.image" class="product-image">
						</template>
					</el-table-column>
					<el-table-column  label="状态"  align="center">
						<template #default="{ row }">
							{{ row.status }}
						</template>
					</el-table-column>
					<el-table-column label="操作" width="180" align="center">
						<template #default="scope">
							<el-button
								link
								type="primary"
								size="small"
								v-if="scope.row.status == '待审核'"
								@click="update(scope.row,'已同意')"
							>
								同意换住
							</el-button>
							<el-button
								link
								type="info"
								size="small"
								@click="showReceipt(scope.row)"
							>
								查看凭证
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-tab-pane>
		</el-tabs>

		<!-- 换住凭证对话框 -->
		<el-dialog
			v-model="receiptDialogVisible"
			title="换住凭证"
			width="500"
		>
			<div class="receipt-content">
				<p class="receipt-tip">此凭证可用于房源溯源验证，请妥善保管</p>
				<div class="receipt-code">
					{{ currentReceipt }}
				</div>
				<p class="receipt-instruction">
					复制上方密钥可以在商铺溯源页面查看详细内容
				</p>
				<el-button
					type="primary"
					class="copy-btn"
					@click="copyReceipt"
				>
					复制凭证
				</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import {TabsPaneContext } from 'element-plus'
import { ElMessage } from 'element-plus'
const dialogVisible = ref(false)
const receiptDialogVisible = ref(false)
const currentReceipt = ref('')
const state = reactive(<any>{
	getOrderStatus: [
		{name: "全部", status:null},
		{name: "待审核", status: "待审核"},
		{name: "已同意", status: "已同意"},
		{name: "已拒绝 ", status: "已拒绝 "}
	],
	getList: [],
	orderForm: {
		score: 0
	},
	page: {
		page: 1,
		limit: 9999,
		order: 'desc',
		status: null,
	},
	list:[]
})

/**
 * 显示换住凭证
 */
const showReceipt = (row: any) => {
	currentReceipt.value = row.hex
	receiptDialogVisible.value = true
}
/**
 * 复制凭证
 */
const copyReceipt = () => {
	navigator.clipboard.writeText(currentReceipt.value)
		.then(() => {
			ElMessage.success('凭证已复制到剪贴板')
		})
		.catch(() => {
			ElMessage.error('复制失败，请手动复制')
		})
}

/**
 * 获取列表数据
 */
function getList() {
	frontRequest.get("/api/order/page", { params: state.page }).then(res => {
		state.getList = res.data.list
	})
	frontRequest.get("/api/order/list").then(res => {
		state.list = res.data
	})
}
const handleClick = (tab: TabsPaneContext) => {
	const selectedStatus = state.getOrderStatus[tab.index].status
	state.page.orderStatus = selectedStatus
	getList()
}

onMounted(() => {
	getList()
})
const update = (data: any, status: number) => {
	if (status === 3) {
		dialogVisible.value = true
		state.orderForm = { ...data, evaluate: '' }
		state.orderForm.status = 3
		return
	}
	data.orderStatus = status
	frontRequest.put("/api/order", data).then(res => {
		toast.success("修改成功~")
		getList()
	})
}
</script>

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

.order-table {
	margin-top: 20px;
}

.product-image {
	width: 80px;
	height: 80px;
}

.receipt-content {
	text-align: center;
	padding: 20px;
}

.receipt-tip {
	color: #666;
	margin-bottom: 20px;
}

.receipt-code {
	padding: 15px;
	background-color: #f5f5f5;
	border-radius: 4px;
	font-family: monospace;
	word-break: break-all;
	margin-bottom: 20px;
	font-size: 16px;
}

.receipt-instruction {
	color: #999;
	font-size: 14px;
	margin-bottom: 20px;
}

.copy-btn {
	width: 100%;
}
</style>

<route lang="json">
{
"meta": {
"layout": "front"
}
}
</route>
