<template>
  <div class="table-div">
    <table class="table">
      <tr>
        <td rowspan="2" colspan="2"></td>
        <td colspan="2" style="border-bottom: 0px;text-align: left;padding-left: 20px">≤60㎡</td>
        <td colspan="2" style="border-bottom: 0px;text-align: left;padding-left: 20px">60-80㎡</td>
        <td colspan="2" style="border-bottom: 0px;text-align: left;padding-left: 20px">80-90㎡</td>
        <td colspan="2" style="border-bottom: 0px;text-align: left;padding-left: 20px">90-100㎡</td>
        <td colspan="2" style="border-bottom: 0px;text-align: left;padding-left: 20px">100-120㎡</td>
        <td colspan="2" style="border-bottom: 0px;text-align: left;padding-left: 20px">120-144㎡</td>
        <td colspan="2" style="border-bottom: 0px;text-align: left;padding-left: 20px">144-180㎡</td>
        <td colspan="2" style="border-bottom: 0px;text-align: left;padding-left: 20px">＞180㎡</td>
        <td rowspan="2">合计</td>
      </tr>
      <tr>
        <td style="border: 0px"></td>
        <td>占比</td>
        <td style="border: 0px"></td>
        <td>占比</td>
        <td style="border: 0px"></td>
        <td>占比</td>
        <td style="border: 0px"></td>
        <td>占比</td>
        <td style="border: 0px"></td>
        <td>占比</td>
        <td style="border: 0px"></td>
        <td>占比</td>
        <td style="border: 0px"></td>
        <td>占比</td>
        <td style="border: 0px"></td>
        <td>占比</td>
      </tr>
      <tr>
        <td rowspan="3" style="width: 140px">当期上市面积</td>
        <td style="width: 130px">批准预（销）售</td>
        <td><el-input-number v-model="state.form.approveSixArea" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.approveSixProportion" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.approveEightyArea" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.approveEightyProportion" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.approveNinetyArea" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.approveNinetyProportion" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.approveHunArea" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.approveHunProportion" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.approveHunTwentyArea" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.approveHunTwentyProportion" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.approveHunFortyArea" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.approveHunFortyProportion" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.approveHunEightyArea" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.approveHunEightyProportion" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.approveMaxArea" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.approveMaxProportion" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.approveArea" :controls="false" style="width:120px" /></td>
      </tr>
      <tr>
        <td>月末累计可售</td>
        <td><el-input-number v-model="state.form.inventorySixArea" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.inventorySixProportion" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.inventoryEightyArea" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.inventoryEightyProportion" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.inventoryNinetyArea" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.inventoryNinetyProportion" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.inventoryHunArea" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.inventoryHunProportion" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.inventoryHunTwentyArea" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.inventoryHunTwentyProportion" :controls="false" style="width:120px" />
        </td>
        <td><el-input-number v-model="state.form.inventoryHunFortyArea" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.inventoryHunFortyProportion" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.inventoryHunEightyArea" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.inventoryHunEightyProportion" :controls="false" style="width:120px" />
        </td>
        <td><el-input-number v-model="state.form.inventoryMaxArea" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.inventoryMaxProportion" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.inventoryArea" :controls="false" style="width:120px" /></td>
      </tr>
      <tr>
        <td>登记销售</td>
        <td><el-input-number v-model="state.form.saleSixArea" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.saleSixProportion" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.saleEightyArea" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.saleEightyProportion" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.saleNinetyArea" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.saleNinetyProportion" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.saleHunArea" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.saleHunProportion" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.saleHunTwentyArea" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.saleHunTwentyProportion" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.saleHunFortyArea" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.saleHunFortyProportion" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.saleHunEightyArea" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.saleHunEightyProportion" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.saleMaxArea" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.saleMaxProportion" :controls="false" style="width:120px" /></td>
        <td><el-input-number v-model="state.form.saleArea" :controls="false" style="width:120px" /></td>
      </tr>
      <tr>
        <td rowspan="3">套数</td>
        <td>批准预（销）售</td>
        <td><el-input-number v-model="state.form.approveSixCount" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.approveEightyCount" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.approveNinetyCount" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.approveHunCount" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.approveHunTwentyCount" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.approveHunFortyCount" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.approveHunEightyCount" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.approveMaxCount" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.approveCount" :controls="false" style="width:120px" /></td>
      </tr>
      <tr>
        <td>月末累计可售</td>
        <td><el-input-number v-model="state.form.inventorySixCount" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.inventoryEightyCount" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.inventoryNinetyCount" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.inventoryHunCount" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.inventoryHunTwentyCount" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.inventoryHunFortyCount" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.inventoryHunEightyCount" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.inventoryMaxCount" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.inventoryCount" :controls="false" style="width:120px" /></td>
      </tr>
      <tr>
        <td>登记销售</td>
        <td><el-input-number v-model="state.form.saleSixCount" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.saleEightyCount" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.saleNinetyCount" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.saleHunCount" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.saleHunTwentyCount" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.saleHunFortyCount" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.saleHunEightyCount" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.saleMaxCount" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.saleTotalCount" :controls="false" style="width:120px" /></td>
      </tr>
      <tr>
        <td>房产价值</td>
        <td>登记销售</td>
        <td><el-input-number v-model="state.form.saleSixTotal" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.saleEightyTotal" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.saleNinetyTotal" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.saleHunTotal" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.saleHunTwentyTotal" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.saleHunFortyTotal" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.saleHunEightyTotal" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.saleMaxTotal" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.saleTotal" :controls="false" style="width:120px" /></td>
      </tr>
      <tr>
        <td>平均成交价格</td>
        <td>登记销售</td>
        <td><el-input-number v-model="state.form.saleSixPrice" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.saleEightyPrice" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.saleNinetyPrice" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.saleHunPrice" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.saleHunTwentyPrice" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.saleHunFortyPrice" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.saleHunEightyPrice" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.saleMaxPrice" :controls="false" style="width:120px" /></td>
        <td></td>
        <td><el-input-number v-model="state.form.salePrice" :controls="false" style="width:120px" /></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: {
    approveSixArea: 0,
    approveSixProportion: 0,
    approveEightyArea: 0,
    approveEightyProportion: 0,
    approveNinetyArea: 0,
    approveNinetyProportion: 0,
    approveHunArea: 0,
    approveHunProportion: 0,
    approveHunTwentyArea: 0,
    approveHunTwentyProportion: 0,
    approveHunFortyArea: 0,
    approveHunFortyProportion: 0,
    approveHunEightyArea: 0,
    approveHunEightyProportion: 0,
    approveMaxArea: 0,
    approveMaxProportion: 0,
    approveArea: 0,
    inventorySixArea: 0,
    inventorySixProportion: 0,
    inventoryEightyArea: 0,
    inventoryEightyProportion: 0,
    inventoryNinetyArea: 0,
    inventoryNinetyProportion: 0,
    inventoryHunArea: 0,
    inventoryHunProportion: 0,
    inventoryHunTwentyArea: 0,
    inventoryHunTwentyProportion: 0,
    inventoryHunFortyArea: 0,
    inventoryHunFortyProportion: 0,
    inventoryHunEightyArea: 0,
    inventoryHunEightyProportion: 0,
    inventoryMaxArea: 0,
    inventoryMaxProportion: 0,
    inventoryArea: 0,
    saleSixArea: 0,
    saleSixProportion: 0,
    saleEightyArea: 0,
    saleEightyProportion: 0,
    saleNinetyArea: 0,
    saleNinetyProportion: 0,
    saleHunArea: 0,
    saleHunProportion: 0,
    saleHunTwentyArea: 0,
    saleHunTwentyProportion: 0,
    saleHunFortyArea: 0,
    saleHunFortyProportion: 0,
    saleHunEightyArea: 0,
    saleHunEightyProportion: 0,
    saleMaxArea: 0,
    saleMaxProportion: 0,
    saleArea: 0,
    approveSixCount: 0,
    approveEightyCount: 0,
    approveNinetyCount: 0,
    approveHunCount: 0,
    approveHunTwentyCount: 0,
    approveHunFortyCount: 0,
    approveHunEightyCount: 0,
    approveMaxCount: 0,
    approveCount: 0,
    inventorySixCount: 0,
    inventoryEightyCount: 0,
    inventoryNinetyCount: 0,
    inventoryHunCount: 0,
    inventoryHunTwentyCount: 0,
    inventoryHunFortyCount: 0,
    inventoryHunEightyCount: 0,
    inventoryMaxCount: 0,
    inventoryCount: 0,
    saleSixCount: 0,
    saleEightyCount: 0,
    saleNinetyCount: 0,
    saleHunCount: 0,
    saleHunTwentyCount: 0,
    saleHunFortyCount: 0,
    saleHunEightyCount: 0,
    saleMaxCount: 0,
    saleTotalCount: 0,
    saleSixTotal: 0,
    saleEightyTotal: 0,
    saleNinetyTotal: 0,
    saleHunTotal: 0,
    saleHunTwentyTotal: 0,
    saleHunFortyTotal: 0,
    saleHunEightyTotal: 0,
    saleMaxTotal: 0,
    saleTotal: 0,
    saleSixPrice: 0,
    saleEightyPrice: 0,
    saleNinetyPrice: 0,
    saleHunPrice: 0,
    saleHunTwentyPrice: 0,
    saleHunFortyPrice: 0,
    saleHunEightyPrice: 0,
    saleMaxPrice: 0,
    salePrice: 0,
  } as any
})



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

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