<template>
    <div>
        <div class="ors">
            <div class="orstitle">
                <SvgIcon name="ele-Notification" class="font15 color" />
                <p>说明</p>
            </div>
            <div class="orsitem">1、尚未开展二手房合同网签的，要通过手工汇总的形式进行数据报送。</div>
            <div class="orsitem">2、成交面积：指当日（前一日14:00至当日14:00，下同）网签的新建商品房（二手房）买卖合同的房屋（住宅）总建筑面积。</div>
            <div class="orsitem">3、成交金额：指当日网签的新建商品房（二手房）及商品住宅（二手住宅）买卖合同总价款。</div>
        </div>
        <table class="table">
            <tr>
                <td rowspan="2">新建商品房成交套数</td>
                <td>套数</td>
                <td>
                    <el-input v-model="form.saleCount" placeholder="请输入" />
                </td>
            </tr>
            <tr>
                <td>其中：住宅</td>
                <td>
                    <el-input v-model="form.saleResCount" placeholder="请输入" />
                </td>
            </tr>
            <tr>
                <td rowspan="2">新建商品房成交面积</td>
                <td>（㎡）</td>
                <td>
                    <el-input v-model="form.saleArea" placeholder="请输入" />
                </td>
            </tr>
            <tr>
                <td>其中：住宅</td>
                <td>
                    <el-input v-model="form.saleResArea" placeholder="请输入" />
                </td>
            </tr>
            <tr>
                <td rowspan="2">新建商品房成交金额</td>
                <td>（万元）</td>
                <td>
                    <el-input v-model="form.saleAmount" placeholder="请输入" />
                </td>
            </tr>
            <tr>
                <td>其中：住宅</td>
                <td>
                    <el-input v-model="form.saleResAmount" placeholder="请输入" />
                </td>
            </tr>
            <tr>
                <td rowspan="2">二手房成交套数</td>
                <td>套数</td>
                <td>
                    <el-input v-model="form.secondCount" placeholder="请输入" />
                </td>
            </tr>
            <tr>
                <td>其中：住宅</td>
                <td>
                    <el-input v-model="form.secondResCount" placeholder="请输入" />
                </td>
            </tr>
            <tr>
                <td rowspan="2">二手房成交面积</td>
                <td>（㎡）</td>
                <td>
                    <el-input v-model="form.secondArea" placeholder="请输入" />
                </td>
            </tr>
            <tr>
                <td>其中：住宅</td>
                <td>
                    <el-input v-model="form.secondResArea" placeholder="请输入" />
                </td>
            </tr>
            <tr>
                <td rowspan="2">二手房成交金额</td>
                <td>（万元）</td>
                <td>
                    <el-input v-model="form.secondAmount" placeholder="请输入" />
                </td>
            </tr>
            <tr>
                <td>其中：住宅</td>
                <td>
                    <el-input v-model="form.secondResAmount" placeholder="请输入" />
                </td>
            </tr>
        </table>
    </div>
</template>
  
<script setup lang="ts">
import {
    defineAsyncComponent,
    ref,
    reactive,
    onMounted,
    defineProps,
    nextTick,
    computed,
    watch,
} from "vue";


let form = reactive({
    saleCount: 0,
    saleResCount: 0,
    saleArea: 0,
    saleResArea: 0,
    saleAmount: 0,
    saleResAmount: 0,
    secondCount: 0,
    secondResCount: 0,
    secondArea: 0,
    secondResArea: 0,
    secondAmount: 0,
    secondResAmount: 0,
})

const setvalue = (e: any) => {
    form.saleCount = e.saleCount
    form.saleResCount = e.saleResCount
    form.saleArea = e.saleArea
    form.saleResArea = e.saleResArea
    form.saleAmount = e.saleAmount
    form.saleResAmount = e.saleResAmount
    form.secondCount = e.secondCount
    form.secondResCount = e.secondResCount
    form.secondArea = e.secondArea
    form.secondResArea = e.secondResArea
    form.secondAmount = e.secondAmount
    form.secondResAmount = e.secondResAmount
}

const getvalue = () => {
    return form
}

//这里需要暴露出去不然父组件调用不到这个方法
defineExpose({
    getvalue,
    setvalue
})
</script>
<style lang="scss" scoped>
.ors {
    display: flex;
    flex-direction: column;
    background-color: #ecf2fe;
    padding: 20px;
    margin-bottom: 10px;

    .orsitem {
        display: flex;
        align-items: center;
        padding-left: 20px;
        padding-bottom: 5px;

        b {
            flex: 0 0 5%;
            color: #001330;
        }
    }
}

.orstitle {
    display: flex;
    align-items: center;
    font-weight: bold;
    color: #333;
    font-size: 15px;
    margin-bottom: 10px;

    .color {
        color: #2362e1;
        margin-right: 4px;
    }
}

.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>
  