<!--用户详情-->
<template>
	<el-tabs v-model="state.page.status"  @tab-click="handleClick">
		<el-tab-pane v-for="status in state.getStatus" :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">
					</template>
				</el-table-column>
				<template v-slot:empty>
					<el-empty description="数据去外太空了~" />
				</template>
			</el-table>
		</el-tab-pane>
	</el-tabs>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import { TabsPaneContext } from 'element-plus'
const state = reactive({
	getStatus: [
		{name: "全部", status:null},
		{name: "待审核", status: "待审核"},
		{name: "已同意", status: "已同意"},
		{name: "已拒绝 ", status: "已拒绝 "}
	],
	getList:[],
	orderForm:{
		score: 0
	},
	page:{
		page:1,
		limit:10,
		order:'desc',
		status:null,
	}
})
/**
 * 获取列表数据
 */
function getList() {
	adminRequest.get("/sys/order/page",{	params: state.page}).then(res =>{
		state.getList = res.data.list;

	})
}
const handleClick = (tab: TabsPaneContext, event: Event) => {
	const selectedStatus = state.getStatus[tab.index].status;
	state.page.status = selectedStatus;
	getList()
}

onMounted(()=>{
	getList()
})

</script>


<style scoped>
.product-image {
	width: 100px;
	height: 100px;
}

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