<template>
    <div>
        <div class="drawerHeader">
            申请详情
        </div>
        <div class="drawerContainer">
            <el-descriptions :column="3" border>
                <el-descriptions-item label="备用金名称" span="3">{{ checkedRow.pettyName || '暂未通过' }}</el-descriptions-item>
                <el-descriptions-item label="借款缘由" span="3">{{ checkedRow.pettyReason }}</el-descriptions-item>
                <el-descriptions-item label="借款详情" span="3">{{ checkedRow.pettyDetails }}</el-descriptions-item>
                <el-descriptions-item label="借款金额">{{ checkedRow.pettyMoney }}</el-descriptions-item>
                <el-descriptions-item label="审批人">{{ checkedRow.financeName || '无' }}</el-descriptions-item>
                <el-descriptions-item label="审批状态">
                    <el-tag size="mini"
                        :type="approveResult[checkedRow.pettyApproval] && approveResult[checkedRow.pettyApproval].type">
                        {{ approveResult[checkedRow.pettyApproval] &&
                                approveResult[checkedRow.pettyApproval].text
                        }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="审批时间">{{ checkedRow.pettyApprovalTime || '无' }}</el-descriptions-item>
                <el-descriptions-item label="待还金额">{{ checkedRow.pettySurplus }}</el-descriptions-item>
                <el-descriptions-item label="还款状态">
                    <el-tag size="mini"
                        :type="pettyStates[checkedRow.pettyState] && pettyStates[checkedRow.pettyState].type">
                        {{ pettyStates[checkedRow.pettyState] && pettyStates[checkedRow.pettyState].text }}
                    </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="驳回原因" span="3" v-if="checkedRow.pettyApproval === 2">{{
                        checkedRow.pettyReject
                }}</el-descriptions-item>
                <el-descriptions-item label="借款日期" span="3">{{ checkedRow.pettyTime }}</el-descriptions-item>
                <el-descriptions-item label="合同附件" span="3" v-if="checkedRow.pettyEnclosure">
                    <div class="file-list">
                        <div class="avator"><i class="el-icon-document"></i></div>
                        <div class="file-content" :title="filename">{{ filename }}</div>
                        <div class="file-operate">
                            <span class="" @click="handleDownload()">
                                <i class="el-icon-download"></i>
                            </span>
                        </div>
                    </div>
                </el-descriptions-item>
            </el-descriptions>
        </div>
        <div v-if="checkedRow.pettyApproval === 1">
            <div class="drawerHeader">
                还款记录
            </div>
            <!-- "repaymentId":1,"pettyId":1,"operationId":53,"repaymentTime":"2022-08-13 01:30:18","repaymentMoney":1.0,"repaymentRemarks":null,"repaymentDetails":null,"repaymentReason":"","repaymentEnclosure":null,"repaymentApproval":0,"repaymentReject":null,"operationName":"chenxin"} -->
            <div class="drawerContainer ">
                <div class="repay-timeline">
                    <el-timeline>
                        <el-timeline-item v-for="item in repayDetailList" :key="item.repaymentId"
                            :type="approveResult[item.repaymentApproval].type" :timestamp="item.repaymentTime">
                            <div>
                                <el-descriptions size="mini">
                                    <el-descriptions-item label="审批结果"><el-tag size="mini"
                                        :type="approveResult[item.repaymentApproval] && approveResult[item.repaymentApproval].type">
                                        {{ approveResult[item.repaymentApproval] &&
                                                approveResult[item.repaymentApproval].text
                                        }}</el-tag></el-descriptions-item>
                                    <el-descriptions-item label="驳回原因" v-if="item.repaymentApproval === 2 && item.repaymentReject">{{ item.repaymentReject }}</el-descriptions-item>
                                    <el-descriptions-item label="还款金额">{{ item.repaymentMoney }}</el-descriptions-item>
                                    <el-descriptions-item label="还款金额">{{ item.repaymentMoney }}</el-descriptions-item>
                                    <el-descriptions-item label="审批人">{{ item.operationName }}</el-descriptions-item>
                                    <el-descriptions-item label="还款方式">{{ item.repaymentMode }}</el-descriptions-item>
                                    <el-descriptions-item label="还款详情">{{ item.repaymentDetails || '无' }}</el-descriptions-item>
                                </el-descriptions>
                            </div>
                        </el-timeline-item>
                    </el-timeline>
                    <el-empty :image-size="200" v-if="!Boolean(repayDetailList.length)"></el-empty>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { previewPDF } from '@/utils/download'
import { approveResult, pettyStates } from '../pettyMoneyStaticData'
export default {
    props: {
        checkedRow: {
            reuqired: true,
            type: Object
        },
        repayDetailList: {
            reuqired: true,
            type: Array
        },
    },
    computed: {
        filename: function () {
            const { pettyEnclosure } = this.checkedRow
            return pettyEnclosure.slice(pettyEnclosure.lastIndexOf('/') + 1, pettyEnclosure.length)
        }
    },
    data() {
        return {
            approveResult,
            pettyStates,
        }
    },
    methods: {
        handleDownload() {
            let { pettyEnclosure: filePath } = this.checkedRow
            // let url = process.env.VUE_APP_BASE_API + filePath;
            previewPDF(filePath)
        },
    }
}
</script>
<style scoped lang="scss" scoped>
.drawerHeader,
.drawerContainer {
    padding: 15px 15px 0;

    .repay-timeline {
        max-height: 400px;
        padding-top: 5px;
        overflow-y: auto;

        span {
            margin-right: 10px;
            color: #616161;
        }
    }
}

.file-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 250px;
    padding: 0 5px;
    border: 1px solid #e6ebf5;
    border-radius: 5px;

    .avator {
        width: 10%;
        font-size: 32px;
        color: #d75b5b;
    }

    .file-content {
        width: 80%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-left: 10px;
    }

    .file-operate {
        width: 15%;
        font-size: 16px;
        display: flex;
        justify-content: space-around;
        align-items: center;

        span {
            cursor: pointer;
        }

    }

}
</style>