<template>
  <div class="table-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="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>
      </tr>
      <tr>
        <td rowspan="2" style="border: 0px"></td>
        <td rowspan="2">与上年同期比（%）</td>
        <td rowspan="2" style="border: 0px"></td>
        <td rowspan="2">与上年同期比（%）</td>
        <td rowspan="2" style="border: 0px"></td>
        <td rowspan="2">与上年同期比（%）</td>
      </tr>
      <tr>
        <td style="border: 0px"></td>
        <td>与上年同期比（%）</td>
      </tr>
      <tr>
        <td rowspan="2">当年期内</td>
        <td colspan="2" style="border-bottom: 0px;">二手房</td>
        <td><el-input-number v-model="state.form.area" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.areaProportion" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.amount" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.amountProportion" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.count" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.countProportion" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.price" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.priceProportion" :controls="false" style="width:120px" /></td>
      </tr>
      <tr>
        <td style="border: 0px"></td>
        <td>二手住房</td>
        <td><el-input-number v-model="state.form.resArea" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.resAreaProportion" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.resAmount" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.resAmountProportion" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.resCount" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.resCountProportion" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.resPrice" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.resPriceProportion" :controls="false" style="width:120px" /></td>
      </tr>
      <tr>
        <td rowspan="2">去年同期</td>
        <td colspan="2" style="border-bottom: 0px;">二手房</td>
        <td><el-input-number v-model="state.form.lastArea" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.lastAmount" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.dealLastCount" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.lastPrice" :controls="false" style="width:120px" /></td>
        <td></td>
      </tr>
      <tr>
        <td style="border-top: 0px"></td>
        <td>二手住房</td>
        <td><el-input-number v-model="state.form.resLastArea" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.resLastAmount" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.dealLastResCount" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.resLastPrice" :controls="false" style="width:120px" /></td>
        <td></td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">

import {
  reactive,
  defineProps,
  watch,
  defineExpose
} from "vue";

const setvalue = (e: any) => {
  state.form = e;
}

const getvalue = () => {
  return state.form
}

defineExpose({
  getvalue,
  setvalue
})

const props = defineProps({
  udata: {
    type: Object,
    default: {},
  },
});

const state = reactive({
  form: {
    area: 0,
    areaProportion: 0,
    amount: 0,
    amountProportion: 0,
    count: 0,
    countProportion: 0,
    price: 0,
    priceProportion: 0,
    resArea: 0,
    resAmountProportion: 0,
    resAreaProportion: 0,
    resAmount: 0,
    resCount: 0,
    resCountProportion: 0,
    resPrice: 0,
    resPriceProportion: 0,
    lastArea: 0,
    lastAmount: 0,

    dealLastCount: 0,
    lastPrice: 0,
    resLastArea: 0,
    resLastAmount: 0,
    dealLastResCount: 0,
    resLastPrice: 0,
  } as any
})



</script>

<style scoped lang="scss">
.table-div {
  overflow-x: auto;
}

.table {
  width: 100%;
}
</style>