<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="借款日期">{{ checkedRow.pettyTime}}</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>
                                <span>
                                    <el-tag
                                        :type="approveResult[item.repaymentApproval] && approveResult[item.repaymentApproval].type">
                                        {{ approveResult[item.repaymentApproval] &&
                                                approveResult[item.repaymentApproval].text
                                        }}</el-tag>
                                    {{ (item.repaymentApproval === 2 && item.repaymentReject) &&
                                            `驳回原因：${item.repaymentReject}`
                                    }}
                                </span>
                                <span>还款金额：{{ item.repaymentMoney }}</span>
                                <span>审批人：{{ item.operationName }}</span>
                            </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 { approveResult, pettyStates } from '../pettyMoneyStaticData'
export default {
    props: {
        checkedRow: {
            reuqired: true,
            type: Object
        },
        repayDetailList: {
            reuqired: true,
            type: Array
        },
    },
    data() {
        return {
            approveResult,
            pettyStates,
        }
    }
}
</script>
<style scoped lang="scss">
.drawerHeader,
.drawerContainer {
    padding: 15px 15px 0;

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

        span {
            margin-right: 10px;
            color: #616161;
        }
    }
}
</style>