<template>
	<div>
		<el-table :data="props.list" style="width: 100%">
			<el-table-column align="center" prop="areaName" label="区县" />
			<el-table-column align="center" prop="areaCode" label="行政代码" width="105" />
			<el-table-column align="center" label="批准销售商品房">
				<el-table-column align="center" label="">
					<el-table-column align="center" prop="approveArea" show-overflow-tooltip width="105">
						<template #header>
							<div class="uname"><span>面积</span><span>（平方米）</span></div>
						</template>
						<template #default="scope">
							<div class="nones" :class="scope.row.approveAreatag == 1 ? 'redbg' : ''">
								{{ scope.row.approveArea }}
							</div>
						</template>
					</el-table-column>
				</el-table-column>
				<el-table-column align="center" label="其中：住宅">
					<el-table-column align="center" prop="resApproveArea" show-overflow-tooltip width="105">
						<template #header>
							<div class="uname"><span>面积</span><span>（平方米）</span></div>
						</template>
						<template #default="scope">
							<div class="nones" :class="scope.row.resApproveAreatag == 1 ? 'redbg' : ''">
								{{ scope.row.resApproveArea }}
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" label="" prop="resApproveCount" show-overflow-tooltip width="105">
						<template #header>
							<div class="uname"><span>套数</span><span>（套）</span></div>
						</template>
						<template #default="scope">
							<div class="nones" :class="scope.row.resApproveCounttag == 1 ? 'redbg' : ''">
								{{ scope.row.resApproveCount }}
							</div>
						</template>
					</el-table-column>
				</el-table-column>
			</el-table-column>
			<el-table-column align="center" label="新建商品房（住宅）成交">
				<el-table-column align="center" label="90平方米及以下">
					<el-table-column align="center" prop="resSaleDownArea" show-overflow-tooltip width="105">
						<template #header>
							<div class="uname"><span>面积</span><span>（平方米）</span></div>
						</template>
						<template #default="scope">
							<div class="nones" :class="scope.row.resSaleDownAreatag == 1 ? 'redbg' : ''">
								{{ scope.row.resSaleDownArea }}
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" label="" prop="resSaleDownCount" show-overflow-tooltip width="105">
						<template #header>
							<div class="uname"><span>套数</span><span>（套）</span></div>
						</template>
						<template #default="scope">
							<div class="nones" :class="scope.row.resSaleDownCounttag == 1 ? 'redbg' : ''">
								{{ scope.row.resSaleDownCount }}
							</div>
						</template>
					</el-table-column>
				</el-table-column>
				<el-table-column align="center" label="90平方米以上">
					<el-table-column align="center" prop="resSaleUpArea" show-overflow-tooltip width="105">
						<template #header>
							<div class="uname"><span>面积</span><span>（平方米）</span></div>
						</template>
						<template #default="scope">
							<div class="nones" :class="scope.row.resSaleUpAreatag == 1 ? 'redbg' : ''">
								{{ scope.row.resSaleUpArea }}
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" label="" prop="resSaleUpCount" show-overflow-tooltip width="105">
						<template #header>
							<div class="uname"><span>套数</span><span>（套）</span></div>
						</template>
						<template #default="scope">
							<div class="nones" :class="scope.row.resSaleUpCounttag == 1 ? 'redbg' : ''">
								{{ scope.row.resSaleUpCount }}
							</div>
						</template>
					</el-table-column>
				</el-table-column>
			</el-table-column>
			<el-table-column align="center" label="商品房累计可售">
				<el-table-column align="center" label="">
					<el-table-column align="center" prop="inventoryTotalArea" show-overflow-tooltip width="105">
						<template #header>
							<div class="uname"><span>面积</span><span>（平方米）</span></div>
						</template>
						<template #default="scope">
							<div class="nones" :class="scope.row.inventoryTotalAreatag == 1 ? 'redbg' : ''">
								{{ scope.row.inventoryTotalArea }}
							</div>
						</template>
					</el-table-column>
				</el-table-column>
				<el-table-column align="center" label="其中：住宅">
					<el-table-column align="center" prop="resInventoryTotalCount" show-overflow-tooltip width="105">
						<template #header>
							<div class="uname"><span>面积</span><span>（平方米）</span></div>
						</template>
						<template #default="scope">
							<div class="nones" :class="scope.row.resInventoryTotalCounttag == 1 ? 'redbg' : ''">
								{{ scope.row.resInventoryTotalCount }}
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" label="" prop="resInventoryTotalArea" show-overflow-tooltip width="105">
						<template #header>
							<div class="uname"><span>套数</span><span>（套）</span></div>
						</template>
						<template #default="scope">
							<div class="nones" :class="scope.row.resInventoryTotalAreatag == 1 ? 'redbg' : ''">
								{{ scope.row.resInventoryTotalArea }}
							</div>
						</template>
					</el-table-column>
				</el-table-column>
			</el-table-column>
			<el-table-column align="center" label="外地人(非潍坊人）购房面积（平方米）">
				<el-table-column align="center" label="新建商品房">
					<el-table-column align="center" label="" prop="outArea" width="105">
						<template #default="scope">
							<div class="nones" :class="scope.row.outAreatag == 1 ? 'redbg' : ''">
								{{ scope.row.outArea }}
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" label="其中：住宅" prop="resOutArea" width="105">
						<template #default="scope">
							<div class="nones" :class="scope.row.resOutAreatag == 1 ? 'redbg' : ''">
								{{ scope.row.resOutArea }}
							</div>
						</template>
					</el-table-column>
				</el-table-column>
				<el-table-column align="center" label="二手房">
					<el-table-column align="center" label="" prop="outSecondArea" width="105">
						<template #default="scope">
							<div class="nones" :class="scope.row.outSecondAreatag == 1 ? 'redbg' : ''">
								{{ scope.row.outSecondArea }}
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" label="其中：住宅" prop="resOutSecondArea" width="105">
						<template #default="scope">
							<div class="nones" :class="scope.row.resOutSecondAreatag == 1 ? 'redbg' : ''">
								{{ scope.row.resOutSecondArea }}
							</div>
						</template>
					</el-table-column>
				</el-table-column>
			</el-table-column>
			<el-table-column align="center" label="外地人购房占比（%）">
				<el-table-column align="center" label="新建商品房">
					<el-table-column align="center" label="" prop="outProportion" width="105">
						<template #default="scope">
							<div class="nones" :class="scope.row.outProportiontag == 1 ? 'redbg' : ''">
								{{ scope.row.outProportion }}
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" label="其中：住宅" prop="resOutProportion" width="105">
						<template #default="scope">
							<div class="nones" :class="scope.row.resOutProportiontag == 1 ? 'redbg' : ''">
								{{ scope.row.resOutProportion }}
							</div>
						</template>
					</el-table-column>
				</el-table-column>
				<el-table-column align="center" label="二手房">
					<el-table-column align="center" label="" prop="outSecondProportion" width="105">
						<template #default="scope">
							<div class="nones" :class="scope.row.outSecondProportiontag == 1 ? 'redbg' : ''">
								{{ scope.row.outSecondProportion }}
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" label="其中：住宅" prop="resOutSecondProportion" width="105">
						<template #default="scope">
							<div class="nones" :class="scope.row.resOutSecondProportiontag == 1 ? 'redbg' : ''">
								{{ scope.row.resOutSecondProportion }}
							</div>
						</template>
					</el-table-column>
				</el-table-column>
			</el-table-column>
			<el-table-column align="center" label="操作" show-overflow-tooltip width="70" fixed="right">
				<template #default="scope">
					<el-button v-if="scope.row.areaCode != '370700'" size="small" @click="remove(scope.row)" text
						type="primary">退回</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';
const emit = defineEmits(["removeshow"]);

const remove = (row: any) => {
	emit("removeshow", row.id);
}

const props = defineProps({
	list: {
		type: Array,
		default: [],
	},
	month: {
		type: String,
		default: '',
	}
});
</script>

<style scoped lang="scss">
.redbg {
	background-color: #ffaba0;
}

::v-deep .el-scrollbar__bar {
	display: block !important;
}
.nones {
	text-align: center;
	width: 100%;
	height: 100%;
}

.uname {
	display: flex;
	flex-direction: column;
	align-items: center;
}
</style>