<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>201</td>
                <td :class="props.udata[`dealArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.dealArea }}</td>
                <td :class="props.udata[`resDealArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resDealArea }}</td>
                <td :class="props.udata[`affDealArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.affDealArea }}</td>
                <td :class="props.udata[`limitDealArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.limitDealArea }}</td>
                <td :class="props.udata[`officeDealArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.officeDealArea }}</td>
                <td :class="props.udata[`busDealArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.busDealArea }}</td>
            </tr>
            <tr>
                <td style="border-bottom: 0px;border-top: 0px"></td>
                <td colspan="2" style="border-bottom: 0px;" class="text-left">其中：批准预售面积</td>
                <td>万平方米</td>
                <td>202</td>
                <td :class="props.udata[`superviseDealArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.superviseDealArea
                }}</td>
                <td :class="props.udata[`resSuperviseDealArea` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.resSuperviseDealArea }}</td>
                <td :class="props.udata[`affSuperviseDealArea` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.affSuperviseDealArea }}</td>
                <td :class="props.udata[`limitSuperviseDealArea` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.limitSuperviseDealArea }}</td>
                <td :class="props.udata[`officeSuperviseDealArea` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.officeSuperviseDealArea }}</td>
                <td :class="props.udata[`busSuperviseDealArea` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.busSuperviseDealArea }}</td>
            </tr>
            <tr>
                <td style="border-top: 0px;border-bottom: 0;"></td>
                <td style="border-top:0px"></td>
                <td>其中：已竣工面积</td>
                <td>万平方米</td>
                <td>203</td>
                <td :class="props.udata[`finishDealArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.finishDealArea }}</td>
                <td :class="props.udata[`resFinishDealArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resFinishDealArea
                }}</td>
                <td :class="props.udata[`affFinishDealArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.affFinishDealArea
                }}</td>
                <td :class="props.udata[`limitFinishDealArea` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.limitFinishDealArea }}</td>
                <td :class="props.udata[`officeFinishDealArea` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.officeFinishDealArea }}</td>
                <td :class="props.udata[`busFinishDealArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.busFinishDealArea
                }}</td>
            </tr>
            <tr>
                <td style="border-top: 0px;"></td>
                <td colspan="2">现售面积</td>
                <td>万平方米</td>
                <td>204</td>
                <td :class="props.udata[`cashDealArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.cashDealArea }}</td>
                <td :class="props.udata[`resCashDealArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resCashDealArea }}
                </td>
                <td :class="props.udata[`affCashDealArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.affCashDealArea }}
                </td>
                <td :class="props.udata[`limitCashDealArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.limitCashDealArea
                }}</td>
                <td :class="props.udata[`officeCashDealArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.officeCashDealArea
                }}</td>
                <td :class="props.udata[`busCashDealArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.busCashDealArea }}
                </td>
            </tr>
            <tr>
                <td colspan="3" style="border-bottom: 0px;text-align: left">成交套数</td>
                <td>万平方米</td>
                <td>205</td>
                <td :class="props.udata[`dealCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.dealCount }}</td>
                <td :class="props.udata[`resDealCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resDealCount }}</td>
                <td :class="props.udata[`affDealCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.affDealCount }}</td>
                <td :class="props.udata[`limitDealCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.limitDealCount }}</td>
                <td :class="props.udata[`officeDealCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.officeDealCount }}
                </td>
                <td :class="props.udata[`busDealCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.busDealCount }}</td>
            </tr>
            <tr>
                <td style="border-bottom: 0px;border-top: 0px"></td>
                <td colspan="2" style="border-bottom: 0px;" class="text-left">其中：预售套数</td>
                <td>万平方米</td>
                <td>206</td>
                <td :class="props.udata[`superviseDealCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.superviseDealCount
                }}</td>
                <td :class="props.udata[`resSuperviseDealCount` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.resSuperviseDealCount }}</td>
                <td :class="props.udata[`affSuperviseDealCount` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.affSuperviseDealCount }}</td>
                <td :class="props.udata[`limitSuperviseDealCount` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.limitSuperviseDealCount }}</td>
                <td :class="props.udata[`officeSuperviseDealCount` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.officeSuperviseDealCount }}</td>
                <td :class="props.udata[`busSuperviseDealCount` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.busSuperviseDealCount }}</td>
            </tr>
            <tr>
                <td style="border-top: 0px;border-bottom: 0;"></td>
                <td style="border-top:0px"></td>
                <td>其中：已竣工套数</td>
                <td>万平方米</td>
                <td>207</td>
                <td :class="props.udata[`finishDealCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.finishDealCount }}
                </td>
                <td :class="props.udata[`resFinishDealCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resFinishDealCount
                }}</td>
                <td :class="props.udata[`affFinishDealCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.affFinishDealCount
                }}</td>
                <td :class="props.udata[`limitFinishDealCount` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.limitFinishDealCount }}</td>
                <td :class="props.udata[`officeFinishDealCount` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.officeFinishDealCount }}</td>
                <td :class="props.udata[`busFinishDealCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.busFinishDealCount
                }}</td>
            </tr>
            <tr>
                <td style="border-top: 0px;"></td>
                <td colspan="2"> 现售套数</td>
                <td>万平方米</td>
                <td>208</td>
                <td :class="props.udata[`cashDealCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.cashDealCount }}</td>
                <td :class="props.udata[`resCashDealCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resCashDealCount }}
                </td>
                <td :class="props.udata[`affCashDealCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.affCashDealCount }}
                </td>
                <td :class="props.udata[`limitCashDealCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.limitCashDealCount
                }}</td>
                <td :class="props.udata[`officeCashDealCount` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.officeCashDealCount }}</td>
                <td :class="props.udata[`busCashDealCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.busCashDealCount }}
                </td>
            </tr>
            <tr>
                <td colspan="3">平均成交价格</td>
                <td>元/平方米</td>
                <td>209</td>
                <td :class="props.udata[`dealPrice` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.dealPrice }}</td>
                <td :class="props.udata[`resDealPrice` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resDealPrice }}</td>
                <td :class="props.udata[`affDealPrice` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.affDealPrice }}</td>
                <td :class="props.udata[`limitDealPrice` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.limitDealPrice }}</td>
                <td :class="props.udata[`officeDealPrice` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.officeDealPrice }}
                </td>
                <td :class="props.udata[`busDealPrice` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.busDealPrice }}</td>
            </tr>
            <tr>
                <td colspan="3" style="border-bottom: 0px;text-align: left">成交面积与上年同比增长</td>
                <td>%</td>
                <td>210</td>
                <td :class="props.udata[`dealAreaProportion` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.dealAreaProportion
                }}</td>
                <td :class="props.udata[`resAreaProportion` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resAreaProportion
                }}</td>
                <td :class="props.udata[`affAreaProportion` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.affAreaProportion
                }}</td>
                <td :class="props.udata[`limitAreaProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.limitAreaProportion }}</td>
                <td :class="props.udata[`officeAreaProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.officeAreaProportion }}</td>
                <td :class="props.udata[`busAreaProportion` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.busAreaProportion
                }}</td>
            </tr>
            <tr>
                <td style="border-bottom: 0px;border-top: 0px"></td>
                <td colspan="2" style="border-bottom: 0px;" class="text-left">其中：预售面积</td>
                <td>%</td>
                <td>211</td>
                <td :class="props.udata[`superviseAreaProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.superviseAreaProportion }}%</td>
                <td :class="props.udata[`resSuperviseAreaProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.resSuperviseAreaProportion }}%</td>
                <td :class="props.udata[`affSuperviseAreaProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.affSuperviseAreaProportion }}</td>
                <td :class="props.udata[`limitSuperviseAreaProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.limitSuperviseAreaProportion }}</td>
                <td :class="props.udata[`officeSuperviseAreaProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.officeSuperviseAreaProportion }}</td>
                <td :class="props.udata[`busSuperviseAreaProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.busSuperviseAreaProportion }}</td>
            </tr>
            <tr>
                <td style="border-top: 0px;border-bottom: 0;"></td>
                <td style="border-top:0px"></td>
                <td>其中：已竣工面积</td>
                <td>%</td>
                <td>212</td>
                <td :class="props.udata[`finishDealProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.finishDealProportion }}</td>
                <td :class="props.udata[`resFinishAreaProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.resFinishAreaProportion }}</td>
                <td :class="props.udata[`affFinishAreaProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.affFinishAreaProportion }}</td>
                <td :class="props.udata[`limitFinishAreaProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.limitFinishAreaProportion }}</td>
                <td :class="props.udata[`officeFinishAreaProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.officeFinishAreaProportion }}</td>
                <td :class="props.udata[`busFinishAreaProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.busFinishAreaProportion }}</td>
            </tr>
            <tr>
                <td style="border-top: 0px;"></td>
                <td colspan="2">现售面积</td>
                <td>%</td>
                <td>213</td>
                <td :class="props.udata[`cashDealProportion` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.cashDealProportion
                }}</td>
                <td :class="props.udata[`resCashAreaProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.resCashAreaProportion }}</td>
                <td :class="props.udata[`affCashAreaProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.affCashAreaProportion }}</td>
                <td :class="props.udata[`limitCashAreaProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.limitCashAreaProportion }}</td>
                <td :class="props.udata[`officeCashAreaProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.officeCashAreaProportion }}</td>
                <td :class="props.udata[`busCashAreaProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.busCashAreaProportion }}</td>
            </tr>
            <tr>
                <td colspan="3" style="border-bottom: 0px;text-align: left">成交套数与上年同比增长</td>
                <td>%</td>
                <td>214</td>
                <td :class="props.udata[`cashDealProportion` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.countProportion }}
                </td>
                <td :class="props.udata[`resCountProportion` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resCountProportion
                }}</td>
                <td :class="props.udata[`affCountProportion` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.affCountProportion
                }}</td>
                <td :class="props.udata[`limitCountProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.limitCountProportion }}</td>
                <td :class="props.udata[`officeCountProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                    props.udata.officeCountProportion }}</td>
                <td :class="props.udata[`busCountProportion` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.busCountProportion
                    }}</td>
        </tr>
        <tr>
            <td style="border-bottom: 0px;border-top: 0px"></td>
            <td colspan="2" style="border-bottom: 0px;" class="text-left">其中：预售套数</td>
            <td>%</td>
            <td>215</td>
            <td :class="props.udata[`superviseCountProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                props.udata.superviseCountProportion }}%</td>
            <td :class="props.udata[`resSuperviseCountProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                props.udata.resSuperviseCountProportion }}%</td>
            <td :class="props.udata[`affSuperviseCountProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                props.udata.affSuperviseCountProportion }}</td>
            <td :class="props.udata[`limitSuperviseCountProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                props.udata.limitSuperviseCountProportion }}</td>
            <td :class="props.udata[`officeSuperviseCountProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                props.udata.officeSuperviseCountProportion }}</td>
            <td :class="props.udata[`busSuperviseCountProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                props.udata.busSuperviseCountProportion }}</td>
        </tr>
        <tr>
            <td style="border-top: 0px;border-bottom: 0;"></td>
            <td style="border-top:0px"></td>
            <td>其中：已竣工套数</td>
            <td>%</td>
            <td>216</td>
            <td :class="props.udata[`finishCountProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                props.udata.finishCountProportion }}</td>
            <td :class="props.udata[`resFinishCountProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                props.udata.resFinishCountProportion }}</td>
            <td :class="props.udata[`affFinishCountProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                props.udata.affFinishCountProportion }}</td>
            <td :class="props.udata[`limitFinishCountProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                props.udata.limitFinishCountProportion }}</td>
            <td :class="props.udata[`officeFinishCountProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                props.udata.officeFinishCountProportion }}</td>
            <td :class="props.udata[`busFinishCountProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                props.udata.busFinishCountProportion }}</td>
        </tr>
        <tr>
            <td style="border-top: 0px;"></td>
            <td colspan="2">现售套数</td>
            <td>%</td>
            <td>217</td>
            <td :class="props.udata[`cashDcountProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                props.udata.cashDcountProportion }}</td>
            <td :class="props.udata[`resCashCountProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                props.udata.resCashCountProportion }}</td>
            <td :class="props.udata[`affCashCountProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                props.udata.affCashCountProportion }}</td>
            <td :class="props.udata[`limitCashCountProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                props.udata.limitCashCountProportion }}</td>
            <td :class="props.udata[`officeCashCountProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                props.udata.officeCashCountProportion }}</td>
            <td :class="props.udata[`busCashCountProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                props.udata.busCashCountProportion }}</td>
        </tr>
        <tr>
            <td colspan="3">平均成交价格与上年同比增长</td>
            <td>%</td>
            <td>218</td>
            <td :class="props.udata[`dealPriceProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                props.udata.dealPriceProportion }}%</td>
            <td :class="props.udata[`resDealPriceProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                props.udata.resDealPriceProportion }}%</td>
            <td :class="props.udata[`affDealPriceProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                props.udata.affDealPriceProportion }}</td>
            <td :class="props.udata[`limitDealPriceProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                props.udata.limitDealPriceProportion }}</td>
            <td :class="props.udata[`officeDealPriceProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                props.udata.officeDealPriceProportion }}</td>
            <td :class="props.udata[`busDealPriceProportion` + `tag`] == 1 ? 'redbg' : ''">{{
                props.udata.busDealPriceProportion }}</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>
