<template>
    <div>
        <table class="table">
            <tr>
                <td rowspan="3" colspan="3">指标名称</td>
                <td rowspan="3">计量单位</td>
                <td rowspan="3">代码</td>
                <td colspan="3" class="text-left" style="border-bottom: 0px">本 市</td>
                <td colspan="5" class="text-left" style="border-bottom: 0px">外 地</td>
            </tr>
            <tr>
                <td rowspan="2" style="border: 0px"></td>
                <td rowspan="2" style="border-bottom: 0px;">本市城区</td>
                <td rowspan="2" style="border-bottom: 0px;">本市其他</td>
                <td rowspan="2" style="border: 0px"></td>
                <td rowspan="2" style="border-bottom: 0px;">本省其他地区</td>
                <td rowspan="2" style="border-bottom: 0px;">外省市</td>
                <td colspan="2" style="border-bottom: 0px;text-align: left">境 外</td>
            </tr>
            <tr>
                <td style="border-top: 0px"></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>
                <td>7</td>
                <td>8</td>
            </tr>
            <tr>
                <td colspan="3" style="border-bottom: 0px;text-align: left">成交面积</td>
                <td>万平方米</td>
                <td>501</td>
                <td :class="props.udata[`dealArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.dealArea }}</td>
                <td :class="props.udata[`countyArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.countyArea }}</td>
                <td :class="props.udata[`otherCountyArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.otherCountyArea }}</td>
                <td :class="props.udata[`fieldArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.fieldArea }}</td>
                <td :class="props.udata[`otherFieldArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.otherFieldArea }}</td>
                <td :class="props.udata[`otherProvincesArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.otherProvincesArea }}</td>
                <td :class="props.udata[`abroadArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.abroadArea }}</td>
                <td :class="props.udata[`hkAbroadArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.hkAbroadArea }}</td>
            </tr>
            <tr>
                <td style="border-bottom: 0px;border-top: 0px"></td>
                <td colspan="2" class="text-left">其中：个人</td>
                <td>万平方米</td>
                <td>502</td>
                <td :class="props.udata[`perDealArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.perDealArea }}</td>
                <td :class="props.udata[`perCountyArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.perCountyArea }}</td>
                <td :class="props.udata[`perOtherCountyArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.perOtherCountyArea }}</td>
                <td :class="props.udata[`perFieldArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.perFieldArea }}</td>
                <td :class="props.udata[`perOtherFieldArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.perOtherFieldArea }}</td>
                <td :class="props.udata[`perOtherProvincesArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.perOtherProvincesArea }}</td>
                <td :class="props.udata[`perAbroadArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.perAbroadArea }}</td>
                <td :class="props.udata[`perHkAbroadArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.perHkAbroadArea }}</td>
            </tr>
            <tr>
                <td style="border-top: 0px"></td>
                <td colspan="2" class="text-left">机构</td>
                <td>万平方米</td>
                <td>503</td>
                <td :class="props.udata[`insDealArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.insDealArea }}</td>
                <td :class="props.udata[`insCountyArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.insCountyArea }}</td>
                <td :class="props.udata[`insOtherCountyArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.insOtherCountyArea }}</td>
                <td :class="props.udata[`insFieldArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.insFieldArea }}</td>
                <td :class="props.udata[`insOtherFieldArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.insOtherFieldArea }}</td>
                <td :class="props.udata[`insOtherProvincesArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.insOtherProvincesArea }}</td>
                <td :class="props.udata[`insAbroadArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.insAbroadArea }}</td>
                <td :class="props.udata[`insHkAbroadArea` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.insHkAbroadArea }}</td>
            </tr>
            <tr>
                <td colspan="3" style="border-bottom: 0px;text-align: left">成交套数</td>
                <td>套</td>
                <td>504</td>
                <td :class="props.udata[`dealCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.dealCount }}</td>
                <td :class="props.udata[`countyCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.countyCount }}</td>
                <td :class="props.udata[`otherCountyCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.otherCountyCount }}</td>
                <td :class="props.udata[`fieldCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.fieldCount }}</td>
                <td :class="props.udata[`otherFieldCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.otherFieldCount }}</td>
                <td :class="props.udata[`otherProvincesCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.otherProvincesCount }}</td>
                <td :class="props.udata[`abroadCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.abroadCount }}</td>
                <td :class="props.udata[`hkAbroadCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.hkAbroadCount }}</td>
            </tr>
            <tr>
                <td style="border-bottom: 0px;border-top: 0px"></td>
                <td colspan="2" class="text-left">其中：个人</td>
                <td>套</td>
                <td>505</td>
                <td :class="props.udata[`perDealCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.perDealCount }}</td>
                <td :class="props.udata[`perCountyCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.perCountyCount }}</td>
                <td :class="props.udata[`perOtherCountyCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.perOtherCountyCount }}</td>
                <td :class="props.udata[`perFieldCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.perFieldCount }}</td>
                <td :class="props.udata[`perOtherFieldCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.perOtherFieldCount }}</td>
                <td :class="props.udata[`perOtherProvincesCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.perOtherProvincesCount }}</td>
                <td :class="props.udata[`perAbroadCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.perAbroadCount }}</td>
                <td :class="props.udata[`perHkAbroadCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.perHkAbroadCount }}</td>
            </tr>
            <tr>
                <td style="border-top: 0px"></td>
                <td colspan="2" class="text-left">机构</td>
                <td>套</td>
                <td>506</td>
                <td :class="props.udata[`insDealCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.insDealCount }}</td>
                <td :class="props.udata[`insCountyCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.insCountyCount }}</td>
                <td :class="props.udata[`insOtherCountyCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.insOtherCountyCount }}</td>
                <td :class="props.udata[`insFieldCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.insFieldCount }}</td>
                <td :class="props.udata[`insOtherFieldCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.insOtherFieldCount }}</td>
                <td :class="props.udata[`insOtherProvincesCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.insOtherProvincesCount }}</td>
                <td :class="props.udata[`insAbroadCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.insAbroadCount }}</td>
                <td :class="props.udata[`insHkAbroadCount` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.insHkAbroadCount }}</td>
            </tr>
            <tr>
                <td colspan="3">平均成交价格</td>
                <td>元/平方米</td>
                <td>507</td>
                <td :class="props.udata[`dealPrice` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.dealPrice }}</td>
                <td :class="props.udata[`countyPrice` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.countyPrice }}</td>
                <td :class="props.udata[`otherCountyPrice` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.otherCountyPrice }}</td>
                <td :class="props.udata[`fieldPrice` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.fieldPrice }}</td>
                <td :class="props.udata[`otherFieldPrice` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.otherFieldPrice }}</td>
                <td :class="props.udata[`otherProvincesPrice` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.otherProvincesPrice }}</td>
                <td :class="props.udata[`abroadPrice` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.abroadPrice }}</td>
                <td :class="props.udata[`hkAbroadPrice` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.hkAbroadPrice }}</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>