<template>
    <popup class="mr-2 flex" :clickModalClose="false" :title="title" :center="true" width="450px" confirmButtonText="" cancelButtonText="关闭">
        <template #trigger>
            <div>
                <el-button type="primary" link>{{ btnText }}</el-button>
            </div>
        </template>
        <el-form :model="dataForm" ref="formRef" :inline="true" label-width="auto" :disabled="true">
            <el-form-item label="已提现金额">
                <el-input v-model="dataForm.alreadyWithdraw">
                    <template #append>元</template>
                </el-input>
            </el-form-item>
            <el-form-item label="可提现金额">
                <el-input v-model="dataForm.canWithdrawCommission">
                    <template #append>元</template>
                </el-input>
            </el-form-item>
            <el-form-item label="待结算金额">
                <el-input v-model="dataForm.toBeSettledMoney">
                    <template #append>元</template>
                </el-input>
            </el-form-item>
        </el-form>
    </popup>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, onMounted } from 'vue'
const title = ref('查看金额详情')
const dataForm = reactive({
    alreadyWithdraw: '',
    canWithdrawCommission: '',
    toBeSettledMoney: ''
})
const props = withDefaults(
    defineProps<{
        rowData: any
        btnText: string
    }>(),
    {
        rowData: {},
        btnText: ''
    }
)
const showDetail = (row: any) => {
    const keys = Object.keys(dataForm)
    keys.map(key => {
        dataForm[key] = row[key] || '0'
    })
    title.value = `${row.name}-金额详情`
}

showDetail(props.rowData)
</script>
