<template>
    <div class="main">
        <el-form :inline="true" :model="examineQuery" v-if="tag === 'overview'">
            <el-form-item>
                <el-input v-model="examineQuery.pettyName" placeholder="请输入备用金名称" />
            </el-form-item>
            <el-form-item>
                <el-input v-model="examineQuery.username" placeholder="请输入借款人" />
            </el-form-item>
            <el-form-item>
                <el-select v-model="examineQuery.pettyApproval" placeholder="请选择审批状态">
                    <el-option v-for="(item, index) in approveResult" :key="index" :value="index" :label="item.text">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select v-model="examineQuery.pettyState" placeholder="请选择还款状态">
                    <el-option v-for="(item, index) in pettyStates" :key="index" :value="index" :label="item.text">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button size="medium" type="primary" icon="el-icon-search" @click="getexamineList(true)">
                    查询
                </el-button>
                <el-button size="medium" type="primary" icon="el-icon-refresh-right" @click="examineQuery = {};getexamineList(false)">重置
                </el-button>
                <!-- <el-button size="medium" type="success" icon="el-icon-circle-plus-outline" @click="dialogTableVisible = true">添加合同</el-button> -->
            </el-form-item>
        </el-form>
        <el-table :data="examineList" style="width: 100%;text-align: center;" border>
            <el-table-column label="编号" width="50px">
                <template slot-scope="scope">
                    {{ (examinePageQuery.pageNum - 1) * examinePageQuery.pageSize + scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column prop="pettyName" label="备用金名称" width="120px" v-if="tag === 'overview'">
                <template slot-scope="scope">
                    {{ parseInt(scope.row.pettyApproval) === 1 ? scope.row.pettyName : '暂未通过' }}
                </template>
            </el-table-column>
            <el-table-column prop="pettyReason" label="借款缘由" />
            <el-table-column prop="userName" label="借款人" width="120px" />
            <el-table-column prop="pettyMoney" label="借款金额" width="120px" />
            <el-table-column prop="pettySurplus" label="待还金额" width="120px" />
            <el-table-column prop="pettyTime" label="借款日期" width="180px" />
            <el-table-column prop="pettyApproval" label="申请状态" width="100px" v-if="tag === 'overview'">
                <template slot-scope="scope">
                    <el-tag size="small" :type="approveResult[scope.row.pettyApproval].type">
                        {{ approveResult[scope.row.pettyApproval].text }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="pettyState" label="还款状态" width="100px" v-if="tag === 'overview'">
                <template slot-scope="scope">
                    <el-tag size="mini" :type="pettyStates[scope.row.pettyState].type">
                        {{ pettyStates[scope.row.pettyState].text }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="操作" :width="tag === 'overview' ? '120px' : '200px'">
                <template slot-scope="scope">
                    <el-button-group>
                        <el-button v-if="tag === 'unapprove'" type="success" size="mini"
                            @click="controlDialogVisible('agree', scope.row)">同意
                        </el-button>
                        <el-button v-if="tag === 'unapprove'" type="warning" size="mini"
                            @click="controlDialogVisible('reject', scope.row)">驳回
                        </el-button>
                        <el-button size="mini" v-if="tag === 'overview'"
                            :style="{ background: '#5782df', color: '#fff', border: '1px solid #5782df' }"
                            @click="controlDialogDrawerVisible('drawerVisible', scope.row)">
                            详情</el-button>
                    </el-button-group>
                </template>
            </el-table-column>
        </el-table>
        <div class="footer">
            <el-pagination @current-change="getexamineList()" :current-page.sync="examinePageQuery.pageNum"
                :page-size="examinePageQuery.pageSize" layout="total, prev, pager, next"
                :total="examinePageQuery.total">
            </el-pagination>
        </div>

        <el-dialog :title="dialogVisible === 'agree' ? '同意审批' : '拒绝审批'" :visible="Boolean(dialogVisible)" width="40%"
            :show-close="false">
            <el-form label-position="left" :model="checkedRow" label-width="100px" ref="dialogForm">
                <el-form-item v-if="dialogVisible === 'agree'" label="备用金名称"
                    :rules="{ required: true, message: '请输入备用金名称' }" prop="pettyName">
                    <el-input v-model="checkedRow.pettyName" placeholder="请选择备用金名称" />
                </el-form-item>
                <el-form-item v-else label="驳回理由" :rules="{ required: true, message: '请输入驳回理由' }" prop="pettyReject">
                    <el-input v-model="checkedRow.pettyReject" placeholder="请选择驳回理由" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="controlDialogVisible('')">取 消</el-button>
                <el-button type="primary" @click="operateConfirm">确 定</el-button>
            </span>
        </el-dialog>

        <el-drawer :visible.sync="drawerVisible" size="50%" :with-header="false" @closed="">
            <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, index) in repayDetailList" :key="item.repaymentId"
                                :type="approveResult[item.repaymentApproval].type" :timestamp="item.repaymentTime">

                                <el-tag
                                    :type="approveResult[item.repaymentApproval] && approveResult[item.repaymentApproval].type">
                                    {{ approveResult[item.repaymentApproval] &&
                                            approveResult[item.repaymentApproval].text
                                    }}</el-tag>
                                <span>还款金额：{{ item.repaymentMoney }}</span>
                                <span>审批人：{{ item.operationName }}</span>
                            </el-timeline-item>
                        </el-timeline>
                        <el-empty :image-size="200" v-if="!Boolean(repayDetailList.length)"></el-empty>
                    </div>
                </div>
            </div>
        </el-drawer>

    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { selectCompanyPettyRecord, agreePetty, rejectPetty, repayRecordsByPettyId } from '@/api/pettyMoney'
import { approveResult, pettyStates } from '../pettyMoneyStaticData'
import { parseTime } from '@/utils'
export default {
    props: ['tag'],
    computed: {
        ...mapGetters([
            'companyId',
            'urId'
        ]),
    },
    data() {
        return {
            examineQuery: {
                pettyName: '',
                pettyApproval: '',
            },
            examinePageQuery: {
                pageNum: 1,
                pageSize: 10,
                total: 0
            },
            isConditionSelect: false,
            approveResult,
            pettyStates,
            examineList: [],
            checkedPettyMoney: {},
            dialogVisible: false,
            checkedRow: {},
            drawerVisible: false,
            repayDetailList: []
        }
    },
    mounted() {
        this.getexamineList(false)
    },
    methods: {
        getexamineList(isConditionSelect) {
            const params = {
                ...this.examinePageQuery,
                companyId: this.companyId
            }
            //不能确定是不是条件查询，则根据上一个查询方式进行条件查询或者一般查询
            if(isConditionSelect === undefined || isConditionSelect === ''){
                this.isConditionSelect && Object.assign(params, this.examineQuery)
            //确定是某种查询方式，则更新标记，作为下一次查询的标准
            }else{
                this.isConditionSelect = isConditionSelect
                isConditionSelect && Object.assign(params, this.examineQuery)
            }
            //组件重用，利用tag来区分查询条件
            this.tag === 'unapprove' && (params.pettyApproval = 0)
            selectCompanyPettyRecord(params).then(res => {
                if (res.success) {
                    const { list, total, repaymentCount, approvalPending } = res.data
                    this.examinePageQuery.total = total
                    this.examineList = list
                    this.$emit("setTagNumbers", { repaymentCount, approvalPending })
                } else {
                    this.$message.error("获取数据失败")
                }
            })
        },
        controlDialogDrawerVisible(dialogVisible, data) {
            if (dialogVisible) {
                this.checkedRow = { ...data }
            } else {
                this.checkedRow = {}
            }
            if (dialogVisible === 'drawerVisible') {
                this.drawerVisible = true
                this.getRepayDetailList()
                return
            }
            this.dialogVisible = dialogVisible
        },
        getRepayDetailList() {
            const params = {
                pettyId: this.checkedRow.pettyId
            }
            repayRecordsByPettyId(params).then(res => {
                if (res.success) {
                    this.repayDetailList = res.data
                } else {
                    this.$message.error("获取还款记录失败")
                }
            })
        },
        operateConfirm() {
            this.dialogVisible === 'agree' ? this.agreeExaminePetty() : this.rejectExaminePetty()
        },
        agreeExaminePetty() {
            this.$refs.dialogForm.validate((valida) => {
                if (valida) {
                    const params = { ...this.checkedRow, financeId: this.urId, pettyApproval: 1, pettyState: 0, pettyApprovalTime: parseTime(new Date()) }
                    agreePetty(params).then(res => {
                        if (res.success) {
                            this.$message.success("操作成功")
                            this.getexamineList()
                            this.dialogVisible = false
                        } else {
                            this.$message.error("操作失败")
                        }
                    })
                }
            })
        },
        rejectExaminePetty() {
            this.$refs.dialogForm.validate((valida) => {
                if (valida) {
                    const params = { ...this.checkedRow, financeId: this.urId, pettyApproval: 2, pettyApprovalTime: parseTime(new Date()) }
                    rejectPetty(params).then(res => {
                        if (res.success) {
                            this.$message.success("操作成功")
                            this.getexamineList()
                            this.controlDialogVisible('')
                        } else {
                            this.$message.error("操作失败")
                        }
                    })
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.main {

    .drawerHeader,
    .drawerContainer {
        padding: 15px 15px 0;

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

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

}

.footer {
    text-align: right;
}
</style>