<template>
    <div>
        <!-- table -->
        <div class="pt-8">
            <div class="height-56 flex-row align-items-center justify-content-between">
                <div class="f18 color-text-primary">还款凭证列表</div>
                <div class="flex-row">
                    
                </div>
            </div>
            
            <div class="case-table">
                <el-table :data="tableData" height="390" >
                    <el-table-column prop="amount" label="凭证金额" show-overflow-tooltip >
                        <template slot-scope="scope">
                            <span >{{ scope.row.amount }}（元）</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="paybackTime" label="还款日期" show-overflow-tooltip ></el-table-column>
                    <el-table-column prop="remark" label="备注说明" show-overflow-tooltip ></el-table-column>
                    <el-table-column prop="uploaderName" label="上传者" show-overflow-tooltip ></el-table-column>
                    <el-table-column prop="createAt" label="操作时间" show-overflow-tooltip >
                        <template slot-scope="scope">
                            <span >{{ scope.row.createAt | formaDate("yyyy-MM-dd hh:mm:ss") }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  label="操作" width="170">
                        <template slot-scope="scope">
                            <div class="flex-row align-items-center">
                                <el-button size="mini" @click="handleCaseShow(scope)">查看凭证</el-button>
                                <el-button size="mini" @click="handleBackCase(scope)">效验</el-button>
                            </div>
                        </template>
                    </el-table-column>
                    
                </el-table>
            </div>
        </div>
        <!-- 文件预览 -->
        <showFile v-if="fileDialog" :fileDialog.sync="fileDialog" />
    </div>
</template>
<script>
import api from "@/services/caseManagement";
    export default {
        components: {
            showFile: () => import('../../../components/showFile.vue'),//事项追踪
        },
        props: {
            eventTraDialog: {
                type: Object,
                default: () => {
                    return {}
                },
            },
        },
        data() {
            return {
                fileDialog:null,
                queryParam:{},
                tableData:[],
                total:0,

            };
        },
        mounted () {
            console.log(this.eventTraDialog,'this.eventTraDialog')
            this.getProofList()
        },
        methods: {
            getProofList(){
                api.gettraceProof_list({caseId:this.eventTraDialog.caseId}).then(res => {
                     if(!res.code){
                        this.tableData = res
                     }
                })
            },
            handleCaseShow(scope){
                this.fileDialog = {showfile:{url:scope.row.proofUrl},filelist:[]}
            },
            handleClose() {
                this.$emit('update:eventTraDialog', null)
            },
        }
    };
</script>
<style scoped lang="scss">
.dialog-trace{
    padding: 16px 20px;
    max-height:500px
}

</style>