<template>
    <div>
        <el-form :inline="true" :model="examineQuery">
            <el-form-item>
                <el-input v-model="examineQuery.pettyName" 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-button size="medium" type="primary" icon="el-icon-search" @click="getexamineRepayList(true)">
                    查询
                </el-button>
                <el-button size="medium" type="primary" icon="el-icon-refresh-right" @click="examineQuery = {}; getexamineRepayList(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" type="index" /> -->
            <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">
                <template slot-scope="scope">
                    {{ Boolean(scope.row.pettyApproval) ? scope.row.pettyName : '暂未通过' }}
                </template>
            </el-table-column>
            <el-table-column prop="pettyReason" label="借款缘由" />
            <el-table-column prop="pettyMoney" label="借款金额" width="120px"/>
            <el-table-column prop="repaymentMoney" label="还款金额" width="120px">
                <template slot-scope="scope">
                    <el-tag type="danger">{{ scope.row.repaymentMoney }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="pettySurplus" label="待还金额" width="120px"/>
            <el-table-column prop="userName" label="借款人" width="120px" />
            <el-table-column prop="pettyTime" label="借款日期"   width="180px"/>
            <!-- <el-table-column prop="pettyApproval" label="申请状态"  width="100px">
                <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">
                <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="200px">
                <template slot-scope="scope">
                    <el-button-group>
                        <el-button type="success" size="mini" @click="agree(scope.row)">同意</el-button>
                        <el-button type="warning" size="mini" @click="disagree(scope.row)">驳回</el-button>
                        <!-- <el-button type="primary" size="mini">详情</el-button> -->
                    </el-button-group>
                    <!-- <el-button type="text"
                        @click="$router.push({ path: '/editPetty', query: { pettyId: String(scope.row.pettyId) } })">
                        同意
                    </el-button>
                    <el-button type="text"
                        @click="$router.push({ path: '/editPetty', query: { pettyId: String(scope.row.pettyId) } })">
                        驳回
                    </el-button>
                    <el-button type="text"
                        @click="$router.push({ path: '/editPetty', query: { pettyId: String(scope.row.pettyId) } })">
                        
                    </el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <div class="footer">
            <el-pagination @current-change="getexamineRepayList()" :current-page.sync="examinePageQuery.pageNum"
                :page-size="examinePageQuery.pageSize" layout="total, prev, pager, next"
                :total="examinePageQuery.total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { selectUnrepay, agreeRepay, rejectRepay } from '@/api/pettyMoney'
import { approveResult, pettyStates } from '../pettyMoneyStaticData'
export default {
    props:['pettyApproval'],
    computed: {
        ...mapGetters([
            'companyId',
            'urId'
        ]),
    },
    data(){
        return {
            examineQuery: {
                pettyName: '',
                pettyApproval: '',
            },
            isConditionSelect: false,
            examinePageQuery: {
                pageNum: 1,
                pageSize: 10,
                total: 0
            },
            approveResult,
            pettyStates,
            examineList: [],
            checkedPettyMoney: {},
        }
    },
    mounted() {
        this.getexamineRepayList(false)
    },
    methods: {
        getexamineRepayList(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)
            }
            selectUnrepay(params).then(res => {
                if (res.success) {
                    const {list, total} = res.data
                    this.examinePageQuery.total = total
                    this.examineList = list
                    this.$emit("setTagNumbers",{repaymentCount: total})
                } else {
                    this.$message.error("获取数据失败")
                }
            })
        },
        // distinguishState({ pettyApproval, pettyState }){
        //     // pettyState: '', //状态0待还款1已还清2无需偿还
        //     // pettyApproval: '', //0待审批1通过2驳回

        //     pettyState = parseInt(pettyState)
        //     pettyApproval = parseInt(pettyApproval)
        //     //申请金审批未通过
        //     if(pettyState === 0 || pettyState === 2){
        //         return 
        //     }
        //     return
        // }
        agree(data){
            const {repaymentId, pettyId} = data
            const params = {
                operationId: this.urId,
                repaymentId,
                repaymentApproval: 1,
                pettyId,
            }
            agreeRepay(params).then(res => {
                if (res.success) {
                    this.getexamineRepayList()
                } else {
                    this.$message.error("操作失败")
                }
            })

        },
        disagree(data){
            const {repaymentId, pettyId} = data
            const params = {
                operationId: this.urId,
                repaymentId,
                repaymentApproval: 2,
                pettyId,
            }
            rejectRepay(params).then(res => {
                if (res.success) {
                    this.getexamineRepayList()
                } else {
                    this.$message.error("操作失败")
                }
            })
        }
    }
}
</script>
<style>
.footer {
        text-align: right;
    }
</style>