<template>
    <div class="background-color-fff padding-20 border-radius-8px margin-bottom-20">
        <el-table
            v-loading="loading"
            :data="repaymentPlanList"
            @selection-change="handleSelectionChange"
        >
            <!-- <el-table-column label="贷款申请id" align="center" prop="loanId" /> -->
            <el-table-column label="还款编号" align="center" prop="planNo" />
            <el-table-column label="期数" align="center" prop="periodNum" />
            <el-table-column label="应还款日期" align="center" prop="repaymentDate" width="180">
                <template #default="scope">
                    <span>{{ parseTime(scope.row.repaymentDate, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="本金金额" align="center" prop="principalAmount" />
            <el-table-column label="利息金额" align="center" prop="interestAmount" />
            <el-table-column label="应还总额" align="center" prop="totalAmount" />
            <el-table-column label="剩余本金" align="center" prop="remainingPrincipal" />
            <el-table-column label="状态" align="center" prop="status">
                <template #default="{ row }">
                    {{
                        row.status == 0
                            ? '未还'
                            : row.status == 1
                            ? '已还'
                            : row.status == 2
                            ? '部分还款'
                            : '逾期'
                    }}
                </template>
            </el-table-column>
            <el-table-column
                label="实际还款日期"
                align="center"
                prop="actualRepaymentDate"
                width="180"
            >
                <template #default="scope">
                    <span>{{ parseTime(scope.row.actualRepaymentDate, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="实际还款金额" align="center" prop="actualRepaymentAmount" />
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="getList"
            style="position: relative !important"
        />
    </div>
</template>

<script setup name="RepaymentPlan">
import {
    listRepaymentPlan,
    getRepaymentPlan,
    delRepaymentPlan,
    addRepaymentPlan,
    updateRepaymentPlan,
} from '@/api/service/repaymentPlan';

const { proxy } = getCurrentInstance();

const props = defineProps({
    loanId: Number,
});

const repaymentPlanList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref('');

const data = reactive({
    form: {},
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        loanId: null,
        planNo: null,
        periodNum: null,
        repaymentDate: null,
        principalAmount: null,
        interestAmount: null,
        totalAmount: null,
        remainingPrincipal: null,
        status: null,
        actualRepaymentDate: null,
        actualRepaymentAmount: null,
    },
    rules: {
        loanId: [{ required: true, message: '贷款主表主键ID不能为空', trigger: 'blur' }],
        planNo: [{ required: true, message: '还款计划编号不能为空', trigger: 'blur' }],
        periodNum: [{ required: true, message: '期数不能为空', trigger: 'blur' }],
        repaymentDate: [{ required: true, message: '应还款日期不能为空', trigger: 'blur' }],
        principalAmount: [{ required: true, message: '本金金额不能为空', trigger: 'blur' }],
        interestAmount: [{ required: true, message: '利息金额不能为空', trigger: 'blur' }],
        totalAmount: [{ required: true, message: '应还总额不能为空', trigger: 'blur' }],
        remainingPrincipal: [{ required: true, message: '剩余本金不能为空', trigger: 'blur' }],
        status: [
            {
                required: true,
                message: '状态(0:未还,1:已还,2:部分还款,3:逾期)不能为空',
                trigger: 'change',
            },
        ],
    },
});

const { queryParams, form, rules } = toRefs(data);

/** 查询还款计划列表 */
function getList() {
    loading.value = true;
    listRepaymentPlan(queryParams.value).then(response => {
        repaymentPlanList.value = response.rows;
        total.value = response.total;
        loading.value = false;
    });
}

// 取消按钮
function cancel() {
    open.value = false;
    reset();
}

// 表单重置
function reset() {
    form.value = {
        id: null,
        loanId: null,
        planNo: null,
        periodNum: null,
        repaymentDate: null,
        principalAmount: null,
        interestAmount: null,
        totalAmount: null,
        remainingPrincipal: null,
        status: null,
        actualRepaymentDate: null,
        actualRepaymentAmount: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
    };
    proxy.resetForm('repaymentPlanRef');
}

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
}

/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm('queryRef');
    handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
    ids.value = selection.map(item => item.id);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd() {
    reset();
    open.value = true;
    title.value = '添加还款计划';
}

/** 修改按钮操作 */
function handleUpdate(row) {
    reset();
    const _id = row.id || ids.value;
    getRepaymentPlan(_id).then(response => {
        form.value = response.data;
        open.value = true;
        title.value = '修改还款计划';
    });
}

/** 提交按钮 */
function submitForm() {
    proxy.$refs['repaymentPlanRef'].validate(valid => {
        if (valid) {
            if (form.value.id != null) {
                updateRepaymentPlan(form.value).then(response => {
                    proxy.$modal.msgSuccess('修改成功');
                    open.value = false;
                    getList();
                });
            } else {
                addRepaymentPlan(form.value).then(response => {
                    proxy.$modal.msgSuccess('新增成功');
                    open.value = false;
                    getList();
                });
            }
        }
    });
}

/** 删除按钮操作 */
function handleDelete(row) {
    const _ids = row.id || ids.value;
    proxy.$modal
        .confirm('是否确认删除还款计划编号为"' + _ids + '"的数据项？')
        .then(function () {
            return delRepaymentPlan(_ids);
        })
        .then(() => {
            getList();
            proxy.$modal.msgSuccess('删除成功');
        })
        .catch(() => {});
}

/** 导出按钮操作 */
function handleExport() {
    proxy.download(
        'service/repaymentPlan/export',
        {
            ...queryParams.value,
        },
        `repaymentPlan_${new Date().getTime()}.xlsx`
    );
}

onMounted(() => {
    queryParams.value.loanId = props.loanId;
    getList(); // 调用方法
});
</script>
