<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="6" 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 rowspan="3">价值</td>
      </tr>
      <tr>
        <td rowspan="2" style="border: 0px"></td>
        <td rowspan="2" style="width: 90px">与上年同期比（%）</td>
        <td rowspan="2" style="border: 0px"></td>
        <td rowspan="2" style="width: 90px">与上年同期比（%）</td>
        <td rowspan="2" style="border: 0px"></td>
        <td rowspan="2" style="width: 90px">与上年同期比（%）</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 rowspan="2" style="border: 0px"></td>
        <td rowspan="2" style="width: 90px">与上年同期比（%）</td>
      </tr>
      <tr>
        <td style="border: 0px"></td>
        <td style="width: 90px">与上年同期比（%）</td>
        <td style="border: 0px"></td>
        <td style="width: 90px">与上年同期比（%）</td>
      </tr>
      <tr>
        <td rowspan="2">当年期内</td>
        <td colspan="2" style="border-bottom: 0px;">商品房</td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.approveArea" placeholder="请输入" />
        </td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.approveProportion"
            placeholder="请输入" /></td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.inventoryArea" placeholder="请输入" />
        </td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.inventoryProportion"
            placeholder="请输入" /></td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.dealArea" placeholder="请输入" /></td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.dealProportion" placeholder="请输入" />
        </td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.dealPreArea" placeholder="请输入" />
        </td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.dealPreProportion"
            placeholder="请输入" /></td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.dealCashArea" placeholder="请输入" />
        </td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.dealCashProportion"
            placeholder="请输入" /></td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.price" placeholder="请输入" /></td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.priceProportion"
            placeholder="请输入" /></td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.total" placeholder="请输入" /></td>
      </tr>
      <tr>
        <td style="border: 0px"></td>
        <td>商品住房</td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.resApproveArea" placeholder="请输入" />
        </td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.resApproveProportion"
            placeholder="请输入" /></td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.resInventoryArea"
            placeholder="请输入" /></td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.resInventoryProportion"
            placeholder="请输入" /></td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.dealResArea" placeholder="请输入" />
        </td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.dealResProportion"
            placeholder="请输入" /></td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.dealPreResArea" placeholder="请输入" />
        </td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.dealPreResProportion"
            placeholder="请输入" /></td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.dealCashResArea"
            placeholder="请输入" /></td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.dealCashResProportion"
            placeholder="请输入" /></td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.resPrice" placeholder="请输入" /></td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.resPriceProportion"
            placeholder="请输入" /></td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.resTotal" placeholder="请输入" /></td>
      </tr>
      <tr>
        <td rowspan="2">去年同期</td>
        <td colspan="2" style="border-bottom: 0px;">商品房</td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.approveLastArea"
            placeholder="请输入" /></td>
        <td></td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.inventoryLastArea"
            placeholder="请输入" /></td>
        <td></td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.dealLastArea" placeholder="请输入" />
        </td>
        <td></td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.dealPreLastArea"
            placeholder="请输入" /></td>
        <td></td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.dealCashLastArea"
            placeholder="请输入" /></td>
        <td></td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.lastPrice" placeholder="请输入" /></td>
        <td></td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.lastTotal" placeholder="请输入" /></td>
      </tr>
      <tr>
        <td style="border-top: 0px"></td>
        <td>商品住房</td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.resApproveLastArea"
            placeholder="请输入" /></td>
        <td></td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.resInventoryLastArea"
            placeholder="请输入" /></td>
        <td></td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.dealLastResArea"
            placeholder="请输入" /></td>
        <td></td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.dealPreLastResArea"
            placeholder="请输入" /></td>
        <td></td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.dealCashLastResArea"
            placeholder="请输入" /></td>
        <td></td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.resLastPrice" placeholder="请输入" />
        </td>
        <td></td>
        <td><el-input-number :controls="false" style="width:120px" v-model="state.form.resLastTotal" placeholder="请输入" />
        </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: {
    approveArea: 0,
    approveProportion: 0,
    inventoryArea: 0,
    inventoryProportion: 0,
    dealArea: 0,
    dealProportion: 0,
    dealPreArea: 0,
    dealPreProportion: 0,
    dealCashArea: 0,
    dealCashProportion: 0,
    price: 0,
    priceProportion: 0,
    total: 0,
    resApproveArea: 0,
    resApproveProportion: 0,
    resInventoryArea: 0,
    resInventoryProportion: 0,
    dealResArea: 0,
    dealResProportion: 0,
    dealPreResArea: 0,
    dealPreResProportion: 0,
    dealCashResArea: 0,
    dealCashResProportion: 0,
    resPrice: 0,
    resPriceProportion: 0,
    resTotal: 0,
    approveLastArea: 0,
    inventoryLastArea: 0,
    dealLastArea: 0,
    dealPreLastArea: 0,
    dealCashLastArea: 0,
    lastPrice: 0,
    lastTotal: 0,
    resApproveLastArea: 0,
    resInventoryLastArea: 0,
    dealLastResArea: 0,
    dealPreLastResArea: 0,
    dealCashLastResArea: 0,
    resLastPrice: 0,
    resLastTotal: 0
  } as any
})



</script>

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

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