<template>
    <table class="table-form w-full text-14px" border="1" cellspacing="5" cellpadding="10">
        <tbody>
            <tr class="bg bor">
                <td colspan="2">动员预付款</td>
                <td colspan="4">材料预付款</td>
                <td colspan="2">保留金信息</td>
                <td colspan="2">农民工工资保证金(元)</td>
                <td colspan="2">整体结算比例(%)</td>
                <td colspan="2">农民工工资专户</td>
            </tr>
            <tr>
                <td>总额（元）</td>
                <td>
                    <el-input v-model="formModel.dyTotalAmount" placeholder="请输入" type="number" :controls="false" :min="0" />
                </td>
                <td>预付款限额(元)</td>
                <td>
                    <el-input v-model="formModel.clAdvancePaymentQuota" placeholder="请输入" :controls="false" :min="0" type="number" />
                </td>
                <td>开户银行</td>
                <td>
                    <el-input v-model="formModel.bankOfDeposit" placeholder="请输入" style="width: 180px;" />
                </td>
                <td>保留金比列 (%)</td>
                <td>
                    <el-input v-model="formModel.blReserveFundsRatio" placeholder="请输入" :controls="false" :min="0" />
                </td>
                <td>保证金起扣点(元)</td>
                <td>
                    <el-input v-model="formModel.nmSdStartDeductPoint" placeholder="请输入" :controls="false" :min="0" type="number" />
                </td>
                <td>中期计量总体支付比例(%)</td>
                <td>
                    <el-input v-model="formModel.middlePayRatio" placeholder="请输入" :controls="false" :min="0" type="number" />
                </td>
                <td>农民工工资专户 开户银行</td>
                <td>
                    <el-input v-model="formModel.farmersBank" placeholder="请输入" />
                </td>
            </tr>
            <tr>
                <td>起扣点(元)</td>
                <td>
                    <el-input v-model="formModel.dyStartDeductPoint" placeholder="请输入" :controls="false" :min="0" type="number" />
                </td>
                <td>隔几期扣回 (期)</td>
                <td>
                    <el-input v-model="formModel.clIntervalDeduct" placeholder="请输入" :controls="false" :min="0" type="number" />
                </td>
                <td>银行账号</td>
                <td>
                    <el-input v-model="formModel.bankAccountNumber" placeholder="请输入" />
                </td>
                <td>起扣点(元)</td>
                <td>
                    <el-input v-model="formModel.blStartDeductPoint" placeholder="请输入" :controls="false" :min="0" type="number" />
                </td>
                <td>保证金比列 (%)</td>
                <td>
                    <el-input v-model="formModel.nmSdRatio" placeholder="请输入" :controls="false" :min="0" type="number" />
                </td>
                <td>7d强度支付比例 (%)</td>
                <td>
                    <el-input v-model="formModel.sevenRatio" placeholder="请输入" :controls="false" :min="0" type="number" />
                </td>
                <td>农民工工资专户 银行账号</td>
                <td>
                    <el-input v-model="formModel.farmersBankAccountNumber" placeholder="请输入" />
                </td>
            </tr>
            <tr>
                <td>全额扣回点(元)</td>
                <td>
                    <el-input v-model="formModel.dyFullDeductPoint" type="number" placeholder="请输入" :controls="false" :min="0" />
                </td>
                <td>从第几期起扣 (期)</td>
                <td>
                    <el-input v-model="formModel.clFromIntervalDeduct" placeholder="请输入" :controls="false" :min="0" type="number" />
                </td>
                <td>银行账户名称</td>
                <td>
                    <el-input v-model="formModel.bankAccountName" placeholder="请输入" />
                </td>
                <td>累计扣回限额(元)</td>
                <td>
                    <el-input v-model="formModel.blTotalDeductQuota" placeholder="请输入" :controls="false" :min="0" type="number" />
                </td>
                <td>保证金扣回限额(元)</td>
                <td>
                    <el-input v-model="formModel.nmTotalDeductQuota" placeholder="请输入" :controls="false" :min="0" type="number" />
                </td>
                <td>28d强度支付比例 (%)</td>
                <td>
                    <el-input v-model="formModel.twentyEightRatio" placeholder="请输入" :controls="false" :min="0" type="number" />
                </td>
                <td>农民工工资专户 银行账户名称</td>
                <td>
                    <el-input v-model="formModel.farmersBankAccountName" placeholder="请输入" />
                </td>
            </tr>
            <tr>
                <td rowspan="2">扣回比列(%)</td>
                <td rowspan="2">
                    <el-input v-model="formModel.dyDeductRatio" placeholder="请输入" class="maxinp" :controls="false" :min="0" type="number" />
                </td>
                <td>预付款比列 (%)</td>
                <td colspan="3">
                    <el-input v-model="formModel.clPrepaymentRatio" placeholder="请输入" :controls="false" :min="0" type="number" />
                </td>
                <td>预扣农民工工资保证金(元)</td>
                <td>
                    <el-input v-model="formModel.nmPayDepositWithheld" placeholder="请输入" :controls="false" :min="0" type="number" />
                </td>
            </tr>
            <tr>
                <td>扣回比列 (%)</td>
                <td colspan="5"><el-input v-model="formModel.clDeductRatio" placeholder="请输入" :controls="false" :min="0" type="number" /></td>
            </tr>
        </tbody>
    </table>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { getObjValue } from 'js-fast-way'

//双向绑定
const modelData = defineModel('modelValue', {
    default: {},
})

//监听数据
const formModel = ref({})
watch(() => modelData.value, (data) => {
    formModel.value = getObjValue(data)
}, { immediate: true, deep: true })

//渲染完成
onMounted(() => {

})
</script>

<style scoped lang="scss">
.table-form {
    border-collapse: collapse;
    border-spacing: 0;
    outline: none;
    box-sizing: border-box;
    border: 1px solid #DCDFE6;
    .bg {
        background: rgb(239, 239, 239);
    }
    .bor td {
        padding: 10px;
    }
    tr {
        text-align: center;
        box-sizing: border-box;
    }
    td {
        padding: 10px 4px;
    }
}
</style>
