<template>
    <div>
        <table class="table">
            <tr>
                <td rowspan="3" colspan="3">分类</td>
                <td colspan="2" style="border-bottom: 0px;text-align: left;padding-left: 20px">批准预（销）售面积</td>
                <td colspan="2" style="border-bottom: 0px;text-align: left;padding-left: 20px">月末累计可售面积</td>
                <td colspan="6" style="border-bottom: 0px;text-align: left;padding-left: 20px">实际登记销售面积</td>
                <td colspan="2" style="border-bottom: 0px;text-align: left;padding-left: 20px">平均销售价格</td>
                <td rowspan="3">价值</td>
            </tr>
            <tr>
                <td rowspan="2" style="border: 0px"></td>
                <td rowspan="2" style="width: 90px">与上年同期比（%）</td>
                <td rowspan="2" style="border: 0px"></td>
                <td rowspan="2" style="width: 90px">与上年同期比（%）</td>
                <td rowspan="2" style="border: 0px"></td>
                <td rowspan="2" style="width: 90px">与上年同期比（%）</td>
                <td colspan="2" style="border-bottom: 0px;text-align: left;padding-left: 20px">预售</td>
                <td colspan="2" style="border-bottom: 0px;text-align: left;padding-left: 20px">现售</td>
                <td rowspan="2" style="border: 0px"></td>
                <td rowspan="2" style="width: 90px">与上年同期比（%）</td>
            </tr>
            <tr>
                <td style="border: 0px"></td>
                <td style="width: 90px">与上年同期比（%）</td>
                <td style="border: 0px"></td>
                <td style="width: 90px">与上年同期比（%）</td>
            </tr>
            <tr>
                <td rowspan="2">当年期内</td>
                <td colspan="2" style="border-bottom: 0px;">商品房</td>
                <td :class="props.udata[`approveArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.approveArea }}</td>
                <td :class="props.udata[`approveProportion` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.approveProportion }}</td>
                <td :class="props.udata[`inventoryArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.inventoryArea }}</td>
                <td :class="props.udata[`inventoryProportion` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.inventoryProportion }}</td>
                <td :class="props.udata[`dealArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.dealArea }}</td>
                <td :class="props.udata[`dealProportion` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.dealProportion }}</td>
                <td :class="props.udata[`dealPreArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.dealPreArea }}</td>
                <td :class="props.udata[`dealPreProportion` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.dealPreProportion }}</td>
                <td :class="props.udata[`dealCashArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.dealCashArea }}</td>
                <td :class="props.udata[`dealCashProportion` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.dealCashProportion }}</td>
                <td :class="props.udata[`price` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.price }}</td>
                <td :class="props.udata[`priceProportion` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.priceProportion }}</td>
                <td :class="props.udata[`total` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.total }}</td>
            </tr>
            <tr>
                <td style="border: 0px"></td>
                <td>商品住房</td>
                <td :class="props.udata[`resApproveArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resApproveArea }}</td>
                <td :class="props.udata[`resApproveProportion` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resApproveProportion }}</td>
                <td :class="props.udata[`resInventoryArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resInventoryArea }}</td>
                <td :class="props.udata[`resInventoryProportion` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resInventoryProportion }}</td>
                <td :class="props.udata[`dealResArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.dealResArea }}</td>
                <td :class="props.udata[`dealResProportion` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.dealResProportion }}</td>
                <td :class="props.udata[`dealPreResArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.dealPreResArea }}</td>
                <td :class="props.udata[`dealPreResProportion` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.dealPreResProportion }}</td>
                <td :class="props.udata[`dealCashResArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.dealCashResArea }}</td>
                <td :class="props.udata[`dealCashResProportion` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.dealCashResProportion }}</td>
                <td :class="props.udata[`resPrice` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resPrice }}</td>
                <td :class="props.udata[`resPriceProportion` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resPriceProportion }}</td>
                <td :class="props.udata[`resTotal` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resTotal }}</td>
            </tr>
            <tr>
                <td rowspan="2">去年同期</td>
                <td colspan="2" style="border-bottom: 0px;">商品房</td>
                <td :class="props.udata[`resApproveArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.approveLastArea }}</td>
                <td></td>
                <td :class="props.udata[`inventoryLastArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.inventoryLastArea }}</td>
                <td></td>
                <td :class="props.udata[`dealLastArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.dealLastArea }}</td>
                <td></td>
                <td :class="props.udata[`dealPreLastArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.dealPreLastArea }}</td>
                <td></td>
                <td :class="props.udata[`dealCashLastArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.dealCashLastArea }}</td>
                <td></td>
                <td :class="props.udata[`lastPrice` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.lastPrice }}</td>
                <td></td>
                <td :class="props.udata[`lastTotal` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.lastTotal }}</td>
            </tr>
            <tr>
                <td style="border-top: 0px"></td>
                <td>商品住房</td>
                <td :class="props.udata[`resApproveLastArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resApproveLastArea }}</td>
                <td></td>
                <td :class="props.udata[`resInventoryLastArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resInventoryLastArea }}</td>
                <td></td>
                <td :class="props.udata[`dealLastResArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.dealLastResArea }}</td>
                <td></td>
                <td :class="props.udata[`dealPreLastResArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.dealPreLastResArea }}</td>
                <td></td>
                <td :class="props.udata[`dealCashLastResArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.dealCashLastResArea }}</td>
                <td></td>
                <td :class="props.udata[`resLastPrice` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resLastPrice }}</td>
                <td></td>
                <td :class="props.udata[`resLastTotal` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resLastTotal }}</td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';
const props = defineProps({
    udata: {
        type: Object,
        default: {},
    },
});
</script>

<style scoped lang="scss"></style>