<template>
    <div>
        <table class="table">
            <tr>
                <td rowspan="3" colspan="3">指标名称</td>
                <td rowspan="3">计量单位</td>
                <td rowspan="3">代码</td>
                <td colspan="6" class="text-left" style="border-bottom: 0px">商品房</td>
            </tr>
            <tr>
                <td rowspan="2" style="border: 0px"></td>
                <td colspan="3" style="border-bottom: 0px;text-align: left">商品住房</td>
                <td rowspan="2">办公楼</td>
                <td rowspan="2">商业营业用房</td>
            </tr>
            <tr>
                <td style="border-top: 0px"></td>
                <td class="text-left">其中：经济适用住房</td>
                <td class="text-left">其中：限价房等政策性商品住房</td>
            </tr>
            <tr>
                <td colspan="3">甲</td>
                <td>乙</td>
                <td>丙</td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
            <tr>
                <td colspan="3" style="border-bottom: 0px;text-align: left">当期上市面积</td>
                <td>万平方米</td>
                <td>101</td>
                <td :class="props.udata[`marketArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.marketArea }}</td>
                <td :class="props.udata[`resMarketArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resMarketArea }}</td>
                <td :class="props.udata[`affMarketArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.affMarketArea }}</td>
                <td :class="props.udata[`limitMarketArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.limitMarketArea }}
                </td>
                <td :class="props.udata[`officeMarketArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.officeMarketArea }}
                </td>
                <td :class="props.udata[`busMarketArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.busMarketArea }}</td>
            </tr>
            <tr>
                <td style="border-bottom: 0px;border-top: 0px"></td>
                <td colspan="2" class="text-left">其中：批准预售面积</td>
                <td>万平方米</td>
                <td>102</td>
                <td :class="props.udata[`approveArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.approveArea }}</td>
                <td :class="props.udata[`resApproveArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resApproveArea }}</td>
                <td :class="props.udata[`affApproveArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.affApproveArea }}</td>
                <td :class="props.udata[`limitApproveArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.limitApproveArea }}
                </td>
                <td :class="props.udata[`officeApproveArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.officeApproveArea
                }}</td>
                <td :class="props.udata[`busApproveArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.busApproveArea }}</td>
            </tr>
            <tr>
                <td style="border-top: 0px"></td>
                <td colspan="2" class="text-left">现售备案面积</td>
                <td>万平方米</td>
                <td>103</td>
                <td :class="props.udata[`cashArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.cashArea }}</td>
                <td :class="props.udata[`resCashArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resCashArea }}</td>
                <td :class="props.udata[`affCashArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.affCashArea }}</td>
                <td :class="props.udata[`limitCashArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.limitCashArea }}</td>
                <td :class="props.udata[`officeCashArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.officeCashArea }}</td>
                <td :class="props.udata[`busCashArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.busCashArea }}</td>
            </tr>
            <tr>
                <td colspan="3" class="text-left" style="border-bottom: 0px;">当期上市面积与上年同比增长</td>
                <td>万平方米</td>
                <td>104</td>
                <td :class="props.udata[`inventorylArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.inventorylArea }}</td>
                <td :class="props.udata[`resInventorylArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resInventorylArea
                }}</td>
                <td :class="props.udata[`affInventorylArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.affInventorylArea
                }}</td>
                <td :class="props.udata[`limitInventorylArea` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.limitInventorylArea }}</td>
                <td :class="props.udata[`officeInventorylArea` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.officeInventorylArea }}</td>
                <td :class="props.udata[`busInventorylArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.busInventorylArea
                }}</td>
            </tr>
            <tr>
                <td style="border-top: 0px;border-bottom: 0px"></td>
                <td colspan="2" class="text-left" style="border-bottom: 0px">其中：批准预售面积</td>
                <td>万平方米</td>
                <td>105</td>
                <td :class="props.udata[`superviseArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.superviseArea }}</td>
                <td :class="props.udata[`resSuperviseArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resSuperviseArea }}
                </td>
                <td :class="props.udata[`affSuperviseArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.affSuperviseArea }}
                </td>
                <td :class="props.udata[`limitSuperviseArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.limitSuperviseArea
                }}</td>
                <td :class="props.udata[`officeSuperviseArea` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.officeSuperviseArea }}</td>
                <td :class="props.udata[`busSuperviseArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.busSuperviseArea }}
                </td>
            </tr>
            <tr>
                <td style="border-top: 0px;border-bottom: 0px"></td>
                <td style="border-top: 0px"></td>
                <td class="text-left">其中：已竣工面积</td>
                <td>万平方米</td>
                <td>106</td>
                <td :class="props.udata[`finishArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.finishArea }}</td>
                <td :class="props.udata[`resFinishArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resFinishArea }}</td>
                <td :class="props.udata[`affFinishArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.affFinishArea }}</td>
                <td :class="props.udata[`limitFinishArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.limitFinishArea }}
                </td>
                <td :class="props.udata[`officeFinishArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.officeFinishArea }}
                </td>
                <td :class="props.udata[`busFinishArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.busFinishArea }}</td>
            </tr>
            <tr>
                <td style="border-top: 0px;border-bottom: 0px"></td>
                <td colspan="2" style="border-bottom: 0px" class="text-left">现售备案面积</td>
                <td>万平方米</td>
                <td>107</td>
                <td :class="props.udata[`cashInventorylArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.cashInventorylArea
                }}</td>
                <td :class="props.udata[`resCashInventorylArea` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.resCashInventorylArea }}</td>
                <td :class="props.udata[`affCashInventorylArea` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.affCashInventorylArea }}</td>
                <td :class="props.udata[`limitCashInventorylArea` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.limitCashInventorylArea }}</td>
                <td :class="props.udata[`officeCashInventorylArea` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.officeCashInventorylArea }}</td>
                <td :class="props.udata[`busCashInventorylArea` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.busCashInventorylArea }}</td>
            </tr>
            <tr>
                <td colspan="3" class="text-left" style="border-bottom: 0px;">当期上市面积与上年同比增长</td>
                <td>%</td>
                <td>108</td>
                <td :class="props.udata[`marketProportion` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.marketProportion }}
                </td>
                <td :class="props.udata[`resMarketProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.resMarketProportion }}</td>
                <td :class="props.udata[`affMarketProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.affMarketProportion }}</td>
                <td :class="props.udata[`limitMarketProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.limitMarketProportion }}</td>
                <td :class="props.udata[`officeMarketProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.officeMarketProportion }}</td>
                <td :class="props.udata[`busMarketProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.busMarketProportion }}</td>
            </tr>
            <tr>
                <td style="border-bottom: 0px;border-top: 0px"></td>
                <td colspan="2" class="text-left">其中：批准预售面积</td>
                <td>%</td>
                <td>109</td>
                <td :class="props.udata[`approveProportion` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.approveProportion
                }}%</td>
                <td :class="props.udata[`resApproveProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.resApproveProportion }}%</td>
                <td :class="props.udata[`affApproveProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.affApproveProportion }}%</td>
                <td :class="props.udata[`limitApproveProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.limitApproveProportion }}%</td>
                <td :class="props.udata[`officeApproveProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.officeApproveProportion }}%</td>
                <td :class="props.udata[`busApproveProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.busApproveProportion }}%</td>
            </tr>
            <tr>
                <td style="border-top: 0px"></td>
                <td colspan="2" class="text-left">现售备案面积</td>
                <td>%</td>
                <td>110</td>
                <td :class="props.udata[`cashProportion` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.cashProportion }}%
                </td>
                <td :class="props.udata[`resCashProportion` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resCashProportion
                }}%</td>
                <td :class="props.udata[`affCashProportion` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.affCashProportion
                }}%</td>
                <td :class="props.udata[`limitCashProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.limitCashProportion }}%</td>
                <td :class="props.udata[`officeCashProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.officeCashProportion }}%</td>
                <td :class="props.udata[`busCashProportion` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.busCashProportion
                }}%</td>
            </tr>
            <tr>
                <td colspan="3" class="text-left" style="border-bottom: 0px;">月末累计可售面积与上年同比增长</td>
                <td>%</td>
                <td>111</td>
                <td :class="props.udata[`inventorylProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.inventorylProportion }}%</td>
                <td :class="props.udata[`resInventorylProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.resInventorylProportion }}%</td>
                <td :class="props.udata[`affInventorylProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.affInventorylProportion }}%</td>
                <td :class="props.udata[`limitInventorylProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.limitInventorylProportion }}%</td>
                <td :class="props.udata[`officeInventorylProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.officeInventorylProportion }}%</td>
                <td :class="props.udata[`busInventorylProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.busInventorylProportion }}%</td>
            </tr>
            <tr>
                <td style="border-top: 0px;border-bottom: 0px"></td>
                <td colspan="2" class="text-left" style="border-bottom: 0px">其中：可预售面积</td>
                <td>%</td>
                <td>112</td>
                <td :class="props.udata[`superviseProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.superviseProportion }}%</td>
                <td :class="props.udata[`resSuperviseProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.resSuperviseProportion }}%</td>
                <td :class="props.udata[`affSuperviseProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.affSuperviseProportion }}%</td>
                <td :class="props.udata[`limitSuperviseProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.limitSuperviseProportion }}%</td>
                <td :class="props.udata[`officeSuperviseProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.officeSuperviseProportion }}%</td>
                <td :class="props.udata[`busSuperviseProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.busSuperviseProportion }}%</td>
            </tr>
            <tr>
                <td style="border-top: 0px;border-bottom: 0px"></td>
                <td style="border-top: 0px"></td>
                <td class="text-left">其中：已竣工面积</td>
                <td>%</td>
                <td>113</td>
                <td :class="props.udata[`finishProportionea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.finishProportionea
                }}%</td>
                <td :class="props.udata[`resFinishProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.resFinishProportion }}%</td>
                <td :class="props.udata[`affFinishProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.affFinishProportion }}%</td>
                <td :class="props.udata[`limitFinishProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.limitFinishProportion }}%</td>
                <td :class="props.udata[`officeFinishProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.officeFinishProportion }}%</td>
                <td :class="props.udata[`busFinishProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.busFinishProportion }}%</td>
            </tr>
            <tr>
                <td style="border-top: 0px;"></td>
                <td colspan="2" class="text-left">可现售面积</td>
                <td>%</td>
                <td>114</td>
                <td :class="props.udata[`cashInventorylProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.cashInventorylProportion }}%</td>
                <td :class="props.udata[`resCashInventorylProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.resCashInventorylProportion }}%</td>
                <td :class="props.udata[`affCashInventorylProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.affCashInventorylProportion }}%</td>
                <td :class="props.udata[`limitCashInventorylProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.limitCashInventorylProportion }}%</td>
                <td :class="props.udata[`officeCashInventorylProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.officeCashInventorylProportion }}%</td>
                <td :class="props.udata[`busCashInventorylProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.busCashInventorylProportion }}%</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>