<template>
    <div>

        <table class="table">
            <tr>
                <td></td>
                <td>分类</td>
                <td>价格</td>
                <td>与上年同期比（%）</td>
                <td>当月与上月环比增长（%）</td>
            </tr>
            <tr>
                <td rowspan="4">当年期内</td>
                <td>商品房</td>
                <td :class="props.udata[`yearPrice` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.yearPrice }}</td>
                <td :class="props.udata[`synYearPro` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.synYearPro }}</td>
                <td :class="props.udata[`qoqYearPro` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.qoqYearPro }}</td>
            </tr>
            <tr>
                <td>商品住房</td>
                <td :class="props.udata[`resYearPrice` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resYearPrice }}</td>
                <td :class="props.udata[`resSynYearPro` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resSynYearPro }}</td>
                <td :class="props.udata[`resQoqYearPro` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resQoqYearPro }}</td>
            </tr>
            <tr>
                <td>二手房</td>
                <td :class="props.udata[`secYearPrice` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.secYearPrice }}</td>
                <td :class="props.udata[`secSynYearPro` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.secSynYearPro }}</td>
                <td :class="props.udata[`secQoqYearPro` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.secQoqYearPro }}</td>
            </tr>
            <tr>
                <td>二手住房</td>
                <td :class="props.udata[`resSecYearPrice` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resSecYearPrice }}
                </td>
                <td :class="props.udata[`resSecSynYearPro` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resSecSynYearPro }}
                </td>
                <td :class="props.udata[`resSecQoqYearPro` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resSecQoqYearPro }}
                </td>
            </tr>
            <tr>
                <td rowspan="4">去年同期</td>
                <td>商品房</td>
                <td :class="props.udata[`lastYearPrice` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.lastYearPrice }}</td>
                <td :class="props.udata[`synLastYearPro` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.synLastYearPro }}</td>
                <td :class="props.udata[`qoqLastYearPro` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.qoqLastYearPro }}</td>
            </tr>
            <tr>
                <td>商品住房</td>
                <td :class="props.udata[`resLastYearPrice` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resLastYearPrice }}</td>
                <td :class="props.udata[`resSynLastYearPro` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resSynLastYearPro }}</td>
                <td :class="props.udata[`resQoqLastYearPro` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resQoqLastYearPro }}</td>
            </tr>
            <tr>
                <td>二手房</td>
                <td :class="props.udata[`secLastYearPrice` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.secLastYearPrice }}</td>
                <td :class="props.udata[`secSynLastYearPro` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.secSynLastYearPro }}</td>
                <td :class="props.udata[`secQoqLastYearPro` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.secQoqLastYearPro }}</td>
            </tr>
            <tr>
                <td>二手住房</td>
                <td :class="props.udata[`resSecLastYearPrice` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resSecLastYearPrice }}</td>
                <td :class="props.udata[`resSecSynLastYearPro` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resSecSynLastYearPro }}</td>
                <td :class="props.udata[`resSecQoqLastYearPro` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resSecQoqLastYearPro }}</td>
            </tr>
            <tr>
                <td rowspan="4">本月</td>
                <td>商品房</td>
                <td :class="props.udata[`monthPrice` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.monthPrice }}</td>
                <td :class="props.udata[`synMonthPro` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.synMonthPro }}</td>
                <td :class="props.udata[`qoqMonthPro` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.qoqMonthPro }}</td>
            </tr>
            <tr>
                <td>商品住房</td>
                <td :class="props.udata[`resMonthPrice` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resMonthPrice }}</td>
                <td :class="props.udata[`resSynMonthPro` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resSynMonthPro }}</td>
                <td :class="props.udata[`resQoqMonthPro` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resQoqMonthPro }}</td>
            </tr>
            <tr>
                <td>二手房</td>
                <td :class="props.udata[`secMonthPrice` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.secMonthPrice }}</td>
                <td :class="props.udata[`secSynMonthPro` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.secSynMonthPro }}</td>
                <td :class="props.udata[`secQoqMonthPro` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.secQoqMonthPro }}</td>
            </tr>
            <tr>
                <td>二手住房</td>
                <td :class="props.udata[`resSecMonthPrice` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resSecMonthPrice }}</td>
                <td :class="props.udata[`resSecSynMonthPro` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resSecSynMonthPro }}</td>
                <td :class="props.udata[`resSecQoqMonthPro` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resSecQoqMonthPro }}</td>
            </tr>
            <tr>
                <td rowspan="4">上月</td>
                <td>商品房</td>
                <td :class="props.udata[`lastMonthPrice` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.lastMonthPrice }}</td>
                <td :class="props.udata[`synLastMonthPro` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.synLastMonthPro }}</td>
                <td :class="props.udata[`qoqLastMonthPro` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.qoqLastMonthPro }}</td>
            </tr>
            <tr>
                <td>商品住房</td>
                <td :class="props.udata[`resQoqLastMonthPro` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resQoqLastMonthPro }}</td>
                <td :class="props.udata[`resSynLastMonthPro` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resSynLastMonthPro }}</td>
                <td :class="props.udata[`resLastMonthPrice` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resLastMonthPrice }}</td>
            </tr>
            <tr>
                <td>二手房</td>
                <td :class="props.udata[`secLastMonthPrice` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.secLastMonthPrice }}</td>
                <td :class="props.udata[`secSynLastMonthPro` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.secSynLastMonthPro }}</td>
                <td :class="props.udata[`secQoqLastMonthPro` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.secQoqLastMonthPro }}</td>
            </tr>
            <tr>
                <td>二手住房</td>
                <td :class="props.udata[`resSecLastMonthPrice` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resSecLastMonthPrice }}</td>
                <td :class="props.udata[`resSecSynLastMonthPro` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resSecSynLastMonthPro }}</td>
                <td :class="props.udata[`resSecQoqLastMonthPro` + `tag`] == 1 ? 'redbg' : ''">{{ props.udata.resSecQoqLastMonthPro }}</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>