<template>
    <div>
        <table class="table">
            <tr>
                <td rowspan="3">批准销售商品房</td>
                <td></td>
                <td>面积（平方米）</td>
                <td>
                    <el-input v-model="form.approveArea" placeholder="请输入" />
                </td>
            </tr>
            <tr>
                <td rowspan="2">其中：住宅</td>
                <td>面积（平方米）</td>
                <td>
                    <el-input v-model="form.resApproveArea" placeholder="请输入" />
                </td>
            </tr>
            <tr>
                <td>套数（套）</td>
                <td>
                    <el-input v-model="form.resApproveCount" placeholder="请输入" />
                </td>
            </tr>
            <tr>
                <td rowspan="4">新建商品房（住宅）成交</td>
                <td rowspan="2">90平方米及以下</td>
                <td>面积（平方米）</td>
                <td>
                    <el-input v-model="form.resSaleDownArea" placeholder="请输入" />
                </td>
            </tr>
            <tr>
                <td>套数（套）</td>
                <td>
                    <el-input v-model="form.resSaleDownCount" placeholder="请输入" />
                </td>
            </tr>
            <tr>
                <td rowspan="2">90平方米以上</td>
                <td>面积（平方米）</td>
                <td>
                    <el-input v-model="form.resSaleUpArea" placeholder="请输入" />
                </td>
            </tr>
            <tr>
                <td>套数（套）</td>
                <td>
                    <el-input v-model="form.resSaleUpCount" placeholder="请输入" />
                </td>
            </tr>
            <tr>
                <td rowspan="3">商品房累计可售</td>
                <td></td>
                <td>面积（平方米）</td>
                <td>
                    <el-input v-model="form.inventoryTotalArea" placeholder="请输入" />
                </td>
            </tr>
            <tr>
                <td rowspan="2">其中：住宅</td>
                <td>面积（平方米）</td>
                <td>
                    <el-input v-model="form.resInventoryTotalArea" placeholder="请输入" />
                </td>
            </tr>
            <tr>
                <td>套数（套）</td>
                <td>
                    <el-input v-model="form.resInventoryTotalCount" placeholder="请输入" />
                </td>
            </tr>
            <tr>
                <td rowspan="4">外地人(非潍坊人）购房面积（平方米）</td>
                <td rowspan="2">新建商品房</td>
                <td></td>
                <td>
                    <el-input v-model="form.outArea" placeholder="请输入" />
                </td>
            </tr>
            <tr>
                <td>其中：住宅</td>
                <td>
                    <el-input v-model="form.resOutArea" placeholder="请输入" />
                </td>
            </tr>
            <tr>
                <td rowspan="2">二手房</td>
                <td></td>
                <td>
                    <el-input v-model="form.outSecondArea" placeholder="请输入" />
                </td>
            </tr>
            <tr>
                <td>其中：住宅</td>
                <td>
                    <el-input v-model="form.resOutSecondArea" placeholder="请输入" />
                </td>
            </tr>
            <tr>
                <td rowspan="4">外地人购房占比（%）</td>
                <td rowspan="2">新建商品房</td>
                <td></td>
                <td>
                    <el-input v-model="form.outProportion" placeholder="请输入" />
                </td>
            </tr>
            <tr>
                <td>其中：住宅</td>
                <td>
                    <el-input v-model="form.resOutProportion" placeholder="请输入" />
                </td>
            </tr>
            <tr>
                <td rowspan="2">二手房</td>
                <td></td>
                <td>
                    <el-input v-model="form.outSecondProportion" placeholder="请输入" />
                </td>
            </tr>
            <tr>
                <td>其中：住宅</td>
                <td>
                    <el-input v-model="form.resOutSecondProportion" placeholder="请输入" />
                </td>
            </tr>
        </table>
    </div>
</template>
  
<script setup lang="ts">
import {
    defineAsyncComponent,
    ref,
    defineProps,
    reactive,
    onMounted,
    nextTick,
    computed,
    watch,
} from "vue";

let form = reactive({
    approveArea: 0,
    resApproveArea: 0,
    resApproveCount: 0,
    resSaleDownArea: 0,
    resSaleDownCount: 0,
    resSaleUpArea: 0,
    resSaleUpCount: 0,
    inventoryTotalArea: 0,
    resInventoryTotalCount: 0,
    resInventoryTotalArea: 0,
    outArea: 0,
    resOutArea: 0,
    outProportion: 0,
    outSecondArea: 0,
    resOutSecondArea: 0,
    resOutProportion: 0,
    outSecondProportion: 0,
    resOutSecondProportion: 0,
})
const setvalue = (e: any) => {
    form.approveArea = e.approveArea
    form.resApproveArea = e.resApproveArea
    form.resApproveCount = e.resApproveCount
    form.resSaleDownArea = e.resSaleDownArea
    form.resSaleDownCount = e.resSaleDownCount
    form.resSaleUpArea = e.resSaleUpArea
    form.resSaleUpCount = e.resSaleUpCount
    form.inventoryTotalArea = e.inventoryTotalArea
    form.resInventoryTotalCount = e.resInventoryTotalCount
    form.resInventoryTotalArea = e.resInventoryTotalArea
    form.outArea = e.outArea
    form.resOutArea = e.resOutArea
    form.outProportion = e.outProportion
    form.outSecondArea = e.outSecondArea
    form.resOutProportion = e.resOutProportion
    form.outSecondProportion = e.outSecondProportion
    form.resOutSecondProportion = e.resOutSecondProportion
}

const getvalue = () => {
    return form
}

//这里需要暴露出去不然父组件调用不到这个方法
defineExpose({
    getvalue,
    setvalue
})

</script>
<style lang="scss" scoped>
.table {
    width: 100%;
    border-collapse: collapse;

    tr {
        td {
            border: 1px solid #c0c0c0;
            padding: 10px;
            text-align: center;
        }

        .text-left {
            text-align: left;
            padding-left: 10px;
        }
    }
}
</style>
  