<template>
    <popup
        class="inline mr-2"
        width="800px"
        :async="true"
        :clickModalClose="false"
        @open="refundlogLists"
        :title="title"
        :confirmButtonText="false"
        :cancelButtonText="false"
    >
        <template #trigger>
            <el-link type="primary" :underline="false">{{ title }}</el-link>
        </template>

        <el-table :data="formData" style="width: 100%">
            <el-table-column label="流水单号" prop="sn" min-width="200" />

            <el-table-column label="退款金额" prop="refundAmount" min-width="100">
                <template #default="{ row }">
                    <span>{{ `￥${row.refundAmount}` }}</span>
                </template>
            </el-table-column>

            <el-table-column label="退款状态" prop="refundStatusName" min-width="100">
                <template #default="{ row }">
                    <el-tag type="warning" v-if="row.refundStatus == 0"> 退款中</el-tag>
                    <el-tag type="success" v-if="row.refundStatus == 1">退款成功</el-tag>
                    <el-tag type="danger" v-if="row.refundStatus == 2">退款失败</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="记录时间" prop="createTime" min-width="200">
                <template #default="{ row }">
                    <span>
                        {{ row.createTime || '-' }}
                    </span>
                </template>
            </el-table-column>

            <el-table-column label="操作人" width="120" fixed="right">
                <template #default="{ row }">
                    <span>
                        {{ row.operatorName || '-' }}
                    </span>
                </template>
            </el-table-column>
        </el-table>
    </popup>
</template>

<script lang="ts" setup>
import { getRefundlogLists } from '@/api/finance/record'
import Popup from '@/components/popup/index.vue'

const formData = ref<any>([])
const props = withDefaults(
    defineProps<{
        id: string | number
        title: string
    }>(),
    {
        id: '',
        title: ''
    }
)

// 获取退款日志详情
const refundlogLists = async (): Promise<void> => {
    const res = await getRefundlogLists({ refundId: props.id })
    formData.value = res
}
</script>

<style lang="scss" scoped>
:deep() .el-table .el-table__cell {
    padding: 15px 0;
}
</style>
