<template>
    <div>
        <div v-show="logStatus == 1">
            <div class="mgt20 left-border fz-16"><p class="c-black mgl10">催收管理</p></div>
            <div class="mgt20 pdb20">
                <div class="flex-between mgtb20">
                    <div class="flex-center">
                        <p class="fz-16 mgr10 font-blue mgl20">状态</p>
                        <el-select v-model="paymentStatus" placeholder="请选择" clearable @change="search">
                            <el-option v-for="item in logTypeList" :key="item.id" :label="item.label" :value="item.id"></el-option>
                        </el-select>
                    </div>

                    <div class="flex-center">
                        <el-input
                            placeholder="搜索业务编号/客户名称"
                            class="mgr20"
                            v-model="keyword"
                            clearable
                        ></el-input>
                        <el-button type="primary" size="small" round @click="search">查询</el-button>
                        <el-button type="primary" plain size="small" round icon="el-icon-upload2" @click="insExport">导出</el-button>
                    </div>
                </div>
                <div class="shadow radius10 pdt20">
                    <div class="flex-between mab20 mgl10">
                        <div class="flex-center">
                            <p class="hr_tag"></p>
                            <span class="hr_text">催收管理列表</span>
                        </div>
                    </div>

                    <el-table v-loading='systemDataLoading' :data="systemData" stripe header-align="center" class="mat20" @selection-change="insSelectionChange" :row-key="getRowKeys" :key="1">
                        <el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column>
                        <el-table-column type="index" width="100" label="序号" align="center"></el-table-column>
                        <el-table-column prop="code" label="业务编号" align="center"></el-table-column>
                        <el-table-column prop="name" label="客户名称" align="center"></el-table-column>
                        <el-table-column prop="phone" label="联系电话" align="center"></el-table-column>
                        <el-table-column prop="type" label="业务类型" align="center"></el-table-column>
                        <el-table-column prop="amount" label="担保额度(元)" align="center"></el-table-column>
                        <el-table-column prop="overduePeriods" label="逾期期数" align="center"></el-table-column>
                        <el-table-column prop="overdueAmount" label="逾期额度(元)" align="center"></el-table-column>
                        <el-table-column prop="overdueInterest" label="逾期利息(元)" align="center"></el-table-column>
                        <!-- <el-table-column prop="department" label="所属部门" align="center"></el-table-column> -->
                        <el-table-column prop="numberOfCollection" label="催收次数" align="center"></el-table-column>
                        <el-table-column prop="status" label="还款状态" align="center"></el-table-column>
                        <el-table-column label="操作" width="200" align="center">
                            <template slot-scope="scope">
                                <el-button v-if="$router.currentRoute.meta.btn.includes('催收还款记录')" type="text" @click="history(scope.row)">还款记录</el-button>
                                <el-button v-if="$router.currentRoute.meta.btn.includes('催收')" type="text" @click="collection(scope.row)">催收</el-button>
                                <el-button v-if="$router.currentRoute.meta.btn.includes('催收记录')" type="text" @click="collectionHis(scope.row)">催收记录</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div class="pagination">
                        <el-pagination background @current-change="currentChange" layout="total, prev, pager, next" :current-page="pageNo" :total="totals">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>

        <div v-show="logStatus == 2">
            <el-row :gutter="10">
                <el-col :span="24">
                    <el-card shadow="hover" class="mgb20 mat20">
                        <div>
                            <div class="mgb20 left-border fz-16"><p class="c-black mgl10">担保信息</p></div>
                            <div>
                                <el-form label-width="100px" class="flex-start-around">
                                    <el-col :span="12" style="margin-right: 120px;">
                                        <el-form-item label="业务编号:">
                                            <span>{{guaranteeForm.businessCode}}</span>
                                        </el-form-item>

                                        <el-form-item label="业务类别:">
                                            <span>{{guaranteeForm.businessType}}</span>
                                        </el-form-item>

                                        <el-form-item label="担保额度(元):">
                                            <span>{{guaranteeForm.guaranteeAmount}}</span>
                                        </el-form-item>

                                        <el-form-item label="贷款银行:">
                                            <span>{{guaranteeForm.businessCode}}</span>
                                        </el-form-item>
                                    </el-col>

                                    <el-col :span="12" style="margin-left: 120px;">
                                        <el-form-item label="客户名称:">
                                            <span>{{guaranteeForm.customerName}}</span>
                                        </el-form-item>

                                        <el-form-item label="担保期限:">
                                            <span>{{guaranteeForm.guaranteeTime}}</span>
                                        </el-form-item>

                                        <el-form-item label="贷款用途:">
                                            <span>{{guaranteeForm.businessCode}}</span>
                                        </el-form-item>                                  
                                    </el-col>
                                </el-form>
                            </div>
                        </div>
                    </el-card>
                </el-col>

                <el-col :span="24">
                    <el-card shadow="hover" class="mgb20 mat20">
                        <div>
                            <div class="mgb20 left-border fz-16"><p class="c-black mgl10">还款信息</p></div>
                            <div>
                                <el-form :model="repaymentForm" :rules="rules" ref="repaymentForm" label-width="100px" class="flex-start-around" disabled>
                                    <el-col :span="12" style="margin-right: 120px;">
                                        <el-form-item label="应还款日" prop="repaymentDate" class="date">
                                            <el-date-picker v-model="repaymentForm.repaymentDate" placeholder="请选择应还款日" type="date" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
                                        </el-form-item>

                                        <el-form-item label="逾期天数">
                                            <el-input v-model="repaymentForm.overdueDays" type="number" placeholder="请输入逾期天数"></el-input>
                                        </el-form-item>

                                        <el-form-item label="本次还款(元)" prop="currentRepayment">
                                            <el-input  v-model="repaymentForm.currentRepayment" placeholder="请输入本次还款金额"></el-input>
                                        </el-form-item>

                                        <el-form-item label="其他费用(元)">
                                            <el-input v-model="repaymentForm.otherExpenses" placeholder="请输入其他费用"></el-input>
                                        </el-form-item>

                                        <el-form-item label="还款备注">
                                            <el-input v-model="repaymentForm.repaymentNotes" type="textarea" :autosize="{ minRows: 4 }" placeholder="请输入还款备注"></el-input>
                                        </el-form-item> 
                                    </el-col>

                                    <el-col :span="12" style="margin-left: 120px;">
                                        <el-form-item label="实际还款日" class="date">
                                            <el-date-picker v-model="repaymentForm.actualRepaymentDate" placeholder="请选择实际还款日" type="date" style="width: 100%;" value-format="yyyy-MM-dd"></el-date-picker>
                                        </el-form-item>

                                        <el-form-item label="还款总额(元)">
                                            <el-input v-model="repaymentForm.totalRepayment" placeholder="请输入还款总额" maxlength="10"></el-input>
                                        </el-form-item>

                                        <el-form-item label="利息(元)" prop="interest">
                                            <el-input v-model="repaymentForm.interest" placeholder="请输入利息"></el-input>
                                        </el-form-item>

                                        <el-form-item label="减免金额(元)">
                                            <el-input v-model="repaymentForm.deductionAmount" placeholder="请输入减免金额"></el-input>
                                        </el-form-item>                                    
                                    </el-col>                               
                                </el-form>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <div v-show="logStatus == 3">
            <el-row :gutter="10">
                <el-col :span="24">
                    <el-card shadow="hover" class="mgb20 mat20">
                        <div>
                            <div class="mgb20 left-border fz-16"><p class="c-black mgl10">还款信息</p></div>
                            <div>
                                <el-form label-width="100px" class="flex-start-around">
                                    <el-col :span="8">
                                        <el-form-item label="还款期数:">
                                            <span>{{StatisticsData.repaymentSum}}</span>
                                        </el-form-item>

                                        <el-form-item label="逾期额度(元):">
                                            <span>{{StatisticsData.currentSum}}</span>
                                        </el-form-item>
                                    </el-col>

                                    <el-col :span="8">
                                        <el-form-item label="逾期期数:">
                                            <span>{{StatisticsData.overdueSum}}</span>
                                        </el-form-item>

                                        <el-form-item label="还款额度(元):">
                                            <span>{{StatisticsData.alreadyPaymentSum}}</span>
                                        </el-form-item>
                                    </el-col>

                                    <el-col :span="8">
                                        <el-form-item label="逾期利息(元):">
                                            <span>{{StatisticsData.overdueInterest}}</span>
                                        </el-form-item>

                                        <el-form-item label="剩余额度(元):">
                                            <span>{{StatisticsData.remainSum}}</span>
                                        </el-form-item>                               
                                    </el-col>
                                </el-form>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>

            <div class="mgt20 pdb20">
                <div class="flex-between search-box">
                    <div class="flex-center">
                        <div class="df-ac">
                            <p class="fz-16 mgr10 font-blue mgl20">应还款日</p>
                            <div class="date">
                                <el-date-picker v-model="hisSearchForm.actualRepaymentDate"
                                placeholder="请选择日期"
                                unlink-panels align="right" type="date" value-format="yyyy-MM-dd" clearable></el-date-picker>
                            </div>
                        </div>
                        <div class="flex-center">
                            <p class="fz-16 mgr10 font-blue mgl20">状态</p>
                            <el-select v-model="hisSearchForm.hisType" placeholder="请选择" clearable>
                                <el-option v-for="item in TypeList" :key="item.id" :label="item.label" :value="item.id"></el-option>
                            </el-select>
                        </div>
                        <el-button class="ht40 btn-pdt mgl10" type="primary" round @click="statisticsSearch">查询</el-button>
                    </div>
                </div>

                <div class="shadow radius10 pdt20">
                    <div class="flex-between mab20 mgl10">
                        <div class="flex-center">
                            <p class="hr_tag"></p>
                            <span class="hr_text">还款记录列表</span>
                        </div>
                    </div>

                    <el-table :data="repaymentData" stripe header-align="center" class="mat20" @selection-change="hisSelectionChange" :row-key="getRowKeys" :key="1">
                        <el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column>
                        <el-table-column type="index" width="100" label="序号" align="center"></el-table-column>
                        <el-table-column prop="repaymentDate" label="应还款日" align="center"></el-table-column>
                        <el-table-column prop="actualRepaymentDate" label="实际还款日" align="center"></el-table-column>
                        <el-table-column prop="guaranteeAmount" label="担保额度(元)" align="center"></el-table-column>
                        <el-table-column prop="currentRepayment" label="本次还款(元)" align="center"></el-table-column>
                        <el-table-column prop="interest" label="本次利息(元)" align="center"></el-table-column>
                        <el-table-column prop="otherExpenses" label="其他费用(元)" align="center"></el-table-column>
                        <el-table-column prop="totalRepayment" label="还款总额(元)" align="center"></el-table-column>
                        <el-table-column prop="deductionAmount" label="减免金额(元)" align="center"></el-table-column>
                        <el-table-column prop="overdueDays" label="逾期天数" align="center"></el-table-column>
                        <el-table-column prop="repaymentStatus" label="状态" align="center"></el-table-column>
                        <el-table-column prop="submitterName" label="提交人" align="center"></el-table-column>
                        <el-table-column prop="createTime" label="提交时间" align="center"></el-table-column>
                        <el-table-column prop="repaymentNotes" label="还款备注" align="center"></el-table-column>
                        <el-table-column label="操作" width="200" align="center">
                            <template slot-scope="scope">
                                <el-button v-if="$router.currentRoute.meta.btn.includes('催收查看')" type="text" @click="goRepaymentDetail(scope.row)">查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div class="pagination">
                        <el-pagination background @current-change="hiscurrentChange" layout="total, prev, pager, next" :current-page="hisPage" :total="histotals">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
        <!-- 催收记录查看 -->
        <div v-show="logStatus == 4">
            <el-row :gutter="10">
                <el-col :span="24">
                    <el-card shadow="hover" class="mgb20 mat20">
                        <div>
                            <div class="mgb20 left-border fz-16"><p class="c-black mgl10">催收信息</p></div>
                            <div>
                                <el-form label-width="100px" class="flex-start-around">
                                    <el-col :span="12">
                                        <el-form-item label="客户名称:">
                                            <span>{{collectionForm.name}}</span>
                                        </el-form-item>

                                        <el-form-item label="业务编号">
                                            <span>{{collectionForm.code}}</span>
                                        </el-form-item>

                                        <el-form-item label="逾期本金(元):">
                                            <span>{{collectionForm.overdueAmount}}</span>
                                        </el-form-item>

                                        <el-form-item label="逾期费用(元):">
                                            <span>{{collectionForm.otherExpenses}}</span>
                                        </el-form-item>
                                    </el-col>

                                    <el-col :span="12">
                                        <el-form-item label="业务类别:">
                                            <span>{{collectionForm.type}}</span>
                                        </el-form-item>

                                        <el-form-item label="已逾期期数:">
                                            <span>{{collectionForm.overduePeriods}}</span>
                                        </el-form-item>

                                        <el-form-item label="逾期利息(元):">
                                            <span>{{collectionForm.overdueInterest}}</span>
                                        </el-form-item>

                                        <el-form-item label="催收次数:">
                                            <span>{{collectionForm.numberOfCollection}}</span>
                                        </el-form-item>
                                    </el-col>
                                </el-form>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>

            <div class="mgt20 pdb20">
                <div class="shadow radius10 pdt20">
                    <div class="flex-between mab20 mgl10">
                        <div class="flex-center">
                            <p class="hr_tag"></p>
                            <span class="hr_text">还款记录列表</span>
                        </div>
                    </div>

                    <el-table :data="collectionData" stripe header-align="center" class="mat20" :key="4">
                        <el-table-column type="index" width="100" label="序号" align="center"></el-table-column>
                        <el-table-column prop="repaymentDate" label="应还款日" align="center"></el-table-column>
                        <el-table-column prop="actualRepaymentDate" label="实际还款日" align="center"></el-table-column>
                        <el-table-column prop="guaranteeAmount" label="担保额度(元)" align="center"></el-table-column>
                        <el-table-column prop="guaranteeAmount" label="剩余额度(元)" align="center"></el-table-column>
                        <el-table-column prop="currentRepayment" label="本次还款(元)" align="center"></el-table-column>
                        <el-table-column prop="interest" label="利息(元)" align="center"></el-table-column>
                        <el-table-column prop="otherExpenses" label="其他费用(元)" align="center"></el-table-column>
                        <el-table-column prop="totalRepayment" label="还款总额(元)" align="center"></el-table-column>
                        <el-table-column prop="deductionAmount" label="减免金额(元)" align="center"></el-table-column>
                        <el-table-column prop="overdueDays" label="逾期天数" align="center"></el-table-column>
                        <el-table-column prop="repaymentStatus" label="状态" align="center"></el-table-column>
                        <el-table-column prop="submitterName" label="提交人" align="center"></el-table-column>
                        <el-table-column prop="createTime" label="提交时间" align="center"></el-table-column>
                        <el-table-column prop="repaymentNotes" label="还款备注" align="center"></el-table-column>
                    </el-table>
                </div>
            </div>

            <div class="mgt20 pdb20">
                <div class="shadow radius10 pdt20">
                    <div class="flex-between mab20 mgl10">
                        <div class="flex-center">
                            <p class="hr_tag"></p>
                            <span class="hr_text">催收办理</span>
                        </div>
                    </div>
                    <el-form :model="collectionHandle" :rules="handleRules" ref="collectionHandle" label-width="140px" :disabled="logbackStatus == '查看'">
                        <el-form-item label="催收方式" prop="collectionMethod">
                           <el-radio v-model="collectionHandle.collectionMethod" label="1" border>电话催收</el-radio>
                           <el-radio v-model="collectionHandle.collectionMethod" label="2" border>上门/外访</el-radio>
                           <el-radio v-model="collectionHandle.collectionMethod" label="3" border>其他</el-radio>
                           <el-input :disabled="collectionHandle.collectionMethod!=='3'" v-model="collectionHandle.other" class="radioInput" placeholder="请输入"></el-input>
                        </el-form-item>

                        <el-form-item label="催收时间" prop="collectionTime" class="date">
                            <el-date-picker v-model="collectionHandle.collectionTime" :picker-options="endTimeOptions" @focus="clickEndTime" placeholder="请选择催收时间日期" type="date" value-format="yyyy-MM-dd"></el-date-picker>
                        </el-form-item>

                        <el-form-item label="拜访人" prop="visitor" class="date">
                            <el-input v-model="collectionHandle.visitor" placeholder="拜访人名称" maxlength="10" style="width:220px"></el-input>
                        </el-form-item>

                        <el-form-item label="催收状况说明" prop="situationDescription" style="width:50%">
                            <el-input v-model="collectionHandle.situationDescription" type="textarea" :autosize="{ minRows: 4 }" placeholder="请输入2000字以内"></el-input>
                        </el-form-item>

                        <el-form-item label="催收反馈" prop="collectionFeedback" style="width:50%">
                            <el-input v-model="collectionHandle.collectionFeedback" type="textarea" :autosize="{ minRows: 4 }" placeholder="请填写借款人的应答信息，真实反馈不得违背客观事实"></el-input>
                        </el-form-item>
                        <el-form-item required label="上传附件">
                            <el-upload
                                :on-remove="handleRemove"
                                :on-error="uploadError"
                                :on-preview="handlePreview"
                                :on-success="uploadSuccess"
                                :before-remove="beforeRemove"
                                :on-exceed="handleExceed"
                                :action="uploadUrl"
                                :file-list="uploadList"
                                ref="file"
                                accept=".jpg,.jpeg,.png,.pdf,.svg,.bmp,.BMP,.SVG,.JPG,.JPEG,.PBG,.PDF,.docx,.DOCX,.ppt,.PPT,.doc,.DOC,.mp4,.MP4"
                                :headers="uploadHeaders"
                            > 
                                <el-button size="medium" type="plain">上传附件</el-button>
                            </el-upload>  
                        </el-form-item>                      
                    </el-form>

                    <div class="mab20 flex-start-around" v-if="logbackStatus == '提交'">
                        <el-button type="primary" round class="mag" @click="collectionSave('collectionHandle')">提交</el-button>
                        <el-button type="primary" plain round class="mag" @click="collectionCancel">取消</el-button>
                    </div>
                </div>
            </div>

            <el-dialog :visible.sync="showPreviewImg"  style="margin-top:-7vh">
                <div class="tx-center">
                    <img :src="previewImg" class="el-image-viewer__img" style="transform: scale(1) rotate(0deg);margin-top: -1px; max-height: 100%; max-width: 100%;">
                </div>
            </el-dialog>
        </div>
        <!-- 催收记录 -->
        <div v-show="logStatus == 5">
            <div class="mgt20 pdb20">
                <div class="flex-between search-box">
                    <div class="flex-center">
                        <div class="df-ac">
                            <p class="fz-16 mgr10 font-blue mgl20">催收日期</p>
                            <div class="date">
                                <el-date-picker
                                    class="wd100"
                                    v-model="collectionDate"
                                    align="right"
                                    unlink-panels
                                    type="daterange"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    @change="selectTime"
                                    clearable
                                ></el-date-picker>
                            </div>
                        </div>
                        <el-button class="ht40 btn-pdt mgl10" type="primary" round @click="collectionHisSearch">查询</el-button>
                    </div>
                    <el-button type="primary" plain size="small" round icon="el-icon-upload2" @click="CollectionHisExport">导出</el-button>
                </div>

                <div class="shadow radius10 pdt20">
                    <div class="flex-between mab20 mgl10">
                        <div class="flex-center">
                            <p class="hr_tag"></p>
                            <span class="hr_text">催收记录列表</span>
                        </div>
                    </div>

                    <el-table :data="collectionHisData" stripe header-align="center" class="mat20" @selection-change="collectionHisSelection" :row-key="getRowKeys" :key="5">
                        <el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column>
                        <el-table-column type="index" width="100" label="序号" align="center"></el-table-column>
                        <el-table-column prop="code" label="业务编号" align="center"></el-table-column>
                        <el-table-column prop="name" label="客户名称" align="center"></el-table-column>
                        <el-table-column prop="overdueAmount" label="逾期本金(元)" align="center"></el-table-column>
                        <el-table-column prop="overdueInterest" label="逾期利息(元)" align="center"></el-table-column>
                        <el-table-column prop="otherExpenses" label="逾期费用(元)" align="center"></el-table-column>
                        <el-table-column prop="overduePeriods" label="逾期期次" align="center"></el-table-column>
                        <el-table-column prop="collectionTime" label="催收日期" align="center"></el-table-column>
                        <el-table-column prop="collectionUserName" label="催收人" align="center"></el-table-column>
                        <el-table-column prop="collectionMethod" label="催收方式" align="center"></el-table-column>
                        <el-table-column prop="collectionFeedback" label="催收反馈" align="center"></el-table-column>
                        <el-table-column label="操作" width="200" align="center">
                            <template slot-scope="scope">
                                <el-button type="text" v-if="$router.currentRoute.meta.btn.includes('催收记录查看')" @click="collectionHisSee(scope.row)">查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div class="pagination">
                        <el-pagination background @current-change="collectionHisPageChange" layout="total, prev, pager, next" :current-page="collectionHisPage" :total="collectionHisTotals">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { collectionList, collectionListDetail, collectionHisList, excelCollectionHis, collection, collectionHisListDetail, insuranceDetail, repaymentEntry, repaymentList, repaymentStatistics, repaymentDetail, excelCollection, updateInsurance } from '../../../utils/api';
    import axios from 'axios';

    export default {
        data() {
            return {
                systemDataLoading:false,// 催收管理加载
                keyword: '',
                paymentStatus: '',
                pageNo: 1,
                pageNumber: 10,
                totals: 1,
                systemData: [],
                insMultipleSelection: [],
                logStatus: 1,
                id: '',
                guaranteeForm: {},
                repaymentForm: {},
                rules: {
                    repaymentDate: [
                        { required: true, message: '请选择应还款日', trigger: 'change' }
                    ],
                    currentRepayment: [
                        { required: true, message: '请输入本次还款金额', trigger: 'blur' },
                        { pattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/, message: '请输入正确金额格式,可保留两位小数' }

                    ],
                    interest: [
                        { required: true, message: '请输入利息', trigger: 'blur' }
                    ]
                },
                logTypeList: [{
                    label: '还款中',
                    id: 1
                },
                {
                    label: '已逾期',
                    id: 2
                },
                {
                    label: '已还清',
                    id: 3
                },
                {
                    label: '已结项',
                    id: 4
                }],
                //还款记录数据
                hisidId: '',
                guaranteeAmount: '',
                hisPage: 1,
                histotals: 1,
                repaymentData: [],
                StatisticsData: {},
                TypeList: [{
                    label: '待还款',
                    id: 1
                },
                {
                    label: '已还款',
                    id: 2
                },
                {
                    label: '已逾期',
                    id: 3
                },
                {
                    label: '未到期',
                    id: 4
                }],
                hisSearchForm: {
                    actualRepaymentDate: '',
                    hisType: ''
                },
                hisMultipleSelection: [],
                repaymentDetailForm: {},
                //催收
                logId: '',
                collectionForm: {},
                collectionData: [],
                collectionHandle: {
                    collectionMethod: '1',
                    collectionTime: '',
                    collectionFeedback: '',
                    enclosureFiles: []
                },
                handleRules: {
                    collectionTime: [
                        { required: true, message: '请选择催收时间日期', trigger: 'change' }
                    ],
                    visitor: [
                        { required: true, message: '请输入拜访人姓名', trigger: 'blur' }
                    ],
                    situationDescription: [
                        { required: true, message: '请输入催收状况说明', trigger: 'blur' }
                    ],
                    collectionMethod:[
                        { required: true, message: '请选择催收方式', trigger: 'change' }
                    ],
                    collectionFeedback: [
                        { required: true, message: '请输入催收反馈', trigger: 'blur' }
                    ]
                },
                uploadUrl:axios.defaults.baseURL + '/api-guarantee/dg-apply-amount-info/uploadFile',
                uploadList: [],
                uploadHeaders:{token:sessionStorage.getItem('token')||localStorage.getItem('token')},//上传带token
                showPreviewImg: false,
                previewImg: '',
                //催收记录
                collectionHisData: [],
                collectionDate: '',
                collectionHisPage: 1,
                collectionHisSize: 10,
                collectionHisStartTime: '',
                collectionHisEndTime: '',
                collectionHisMultiple: [],
                collectionHisTotals: 1,

                logbackStatus: '',
                logbackId: '',
                logRepaymentId: '',
                endTimeOptions: {}
            };
        },
        watch: {
            "$store.state.loan.logStatus":function(val) {
                this.logStatus = val
                if(val == 1){
                    this.systemData = []
                    this.getData()
                }
                if(val == 2){
                    this.id = this.$store.state.loan.insuranceId
                    this.logRepaymentId = this.$store.state.loan.logRepaymentId
                    this.guaranteeForm = {}
                    this.repaymentForm = {}
                    this.getDetail()
                    this.getRepaymentDetail()
                }
                if(val == 3){
                    this.hisidId = this.$store.state.loan.hisidId
                    this.guaranteeAmount = this.$store.state.loan.guaranteeAmount
                    this.statistics()
                    this.repaymentList()
                }
                if(val == 4){
                    this.logbackStatus = this.$store.state.loan.logbackStatus
                    this.collectionHandle = {
                        collectionMethod: '1',
                        collectionTime: '',
                        collectionFeedback: '',
                        enclosureFiles: []
                    }
                    this.uploadList = []
                    if(this.logbackStatus == '提交'){
                        this.logId = this.$store.state.loan.logId
                        this.collectionListDetail()
                    }else{
                        this.logbackId = this.$store.state.loan.logbackId
                        this.collectionHisListDetail()
                    }
                }
                if(val == 5){
                    this.logId = this.$store.state.loan.logId
                    this.collectionHisList()
                }
                this.$store.commit("logStatusData", { logStatus: this.logStatus });
            }
        },
        created(){
            this.logStatus = this.$store.state.loan.logStatus
            // console.log(this.logStatus,'this.logStatus')
            if(this.logStatus == 1){
                this.getData()
            }
            if(this.logStatus == 2){
                this.id = this.$store.state.loan.insuranceId
                this.logRepaymentId = this.$store.state.loan.logRepaymentId
                this.guaranteeForm = {}
                this.repaymentForm = {}
                this.getDetail()
                this.getRepaymentDetail()
            }
            if(this.logStatus == 3){
                this.hisidId = this.$store.state.loan.hisidId
                this.guaranteeAmount = this.$store.state.loan.guaranteeAmount
                this.statistics()
                this.repaymentList()
            }
            if(this.logStatus == 4){
                this.logbackStatus = this.$store.state.loan.logbackStatus
                this.collectionHandle = {
                    collectionMethod: '1',
                    collectionTime: '',
                    collectionFeedback: '',
                    enclosureFiles: []
                }
                this.uploadList = []
                if(this.logbackStatus == '提交'){
                    this.logId = this.$store.state.loan.logId
                    this.collectionListDetail()
                }else{
                    this.logbackId = this.$store.state.loan.logbackId
                    this.collectionHisListDetail()
                }
            }
            if(this.logStatus == 5){
                this.logId = this.$store.state.loan.logId
                this.collectionHisList()
            }
        },
        methods:{
            // 查询催收列表
            async getData() {
                this.systemDataLoading = true
                try {
                    let res = await collectionList({
                        page: this.pageNo,
                        size: this.pageNumber,
                        codeOrName: this.keyword,
                        status: this.paymentStatus
                    });
                    this.systemDataLoading = false
                    res.data.list.map(e =>{
                        e.status = this.core.paymentStatus(e.status)
                    })
                    this.systemData = res.data.list;
                    this.totals = res.data.totalCount;
                } catch (error) {
                    this.systemDataLoading = false
                }
            },
            search() {
                this.pageNo = 1;
                this.getData();
            },
            currentChange(val) {
                this.pageNo = val;
                this.getData();
            },
            getSize(val){
                this.pageNo = 1
                this.pageNumber = val
                this.getData()
            },
            insSelectionChange(val){
                this.insMultipleSelection = val;
            },
            // 导出催收管理列表
            insExport(){
                // if(this.insMultipleSelection.length != ''){
                    let exportIds = this.insMultipleSelection.map(e => e.id).join()
                    let url = `${excelCollection}?insuranceIds=${exportIds}`
                    window.location.href = url
                // }else{ 
                    // this.$message.error('请先选择催收列表数据 ！');
                // }
            },
            //记录
            history(row){
                this.logStatus = 3
                this.$store.commit("logStatusData", { logStatus: 3 });
                this.hisId = row.id
                this.$store.commit("hisidIdData", { hisidId: row.id, guaranteeAmount: row.amount });
            },
            //催收
            collection(row){
                this.logStatus = 4
                this.$store.commit("logStatusData", { logStatus: 4 });
                this.logbackStatus = '提交'
                this.$store.commit("logbackStatusData", { logbackStatus: '提交' });
                this.logId = row.id
                this.$store.commit("logIdData", { logId: row.id });
            },
            //催收记录
            collectionHis(row){
                this.logStatus = 5    
                this.$store.commit("logStatusData", { logStatus: 5 });
                this.logId = row.id
                this.$store.commit("logIdData", { logId: row.id });
            },
            //办理结项
            conclusion(row){
                let delIds = this.hisMultipleSelection.map(e => e.id).join()
                this.$confirm('此还款确定要办理结项吗？', '提示', {
                    type: 'warning'
                })
                .then(() => {
                    updateInsurance(delIds).then(res=>{
                        this.$message.success('结项成功');
                        this.statisticsSearch()
                    }).catch(err=>{
                    })
                }).catch(() => {});
            },

            //录入部分*******
            //查询详情
            async getDetail(){
                let res = await insuranceDetail({
                    id: this.id
                });
                // console.log(res,'res')
                this.guaranteeForm = res.data.insuranceList
            },
            //还款记录部分*******
            // 记录详情统计
            async statistics(){
                let res = await repaymentStatistics({
                    insuranceId: this.hisidId,
                    // guaranteeAmount: this.guaranteeAmount
                });
                this.StatisticsData = res.data
            },
            // 还款记录列表
            async repaymentList(){
                let res = await repaymentList({
                    page: this.hisPage,
                    size: this.pageNumber,
                    insuranceId: this.hisidId,
                    CustomerNumberOrName: this.hisSearchForm.actualRepaymentDate,
                    status: this.hisSearchForm.hisType
                });
                res.data.list.map(e =>{
                    e.repaymentStatus = this.core.stcStatus(e.repaymentStatus)
                })
                this.repaymentData = res.data.list
                this.histotals = res.data.totalCount
            },
            // 还款记录列表搜索
            statisticsSearch(){
                this.hisPage = 1;
                this.repaymentList()
            },
            hiscurrentChange(val){
                this.hisPage = val;
                this.repaymentList()
            },
            getRowKeys(row) {
                return row.id;
            },
            hisSelectionChange(val) {
                this.hisMultipleSelection = val;
            },
            //查询还款记录列表详情
            goRepaymentDetail(row){
                this.logStatus = 2
                this.$store.commit("logStatusData", { logStatus: 2 });
                this.logRepaymentId = row.id
                this.$store.commit("logRepaymentIdData", { logRepaymentId: row.id });
                this.id = row.insuranceId
                this.$store.commit("loginsuranceIdData", { insuranceId: row.insuranceId });
            },
            async getRepaymentDetail(){
                let res = await repaymentDetail({
                    id: this.logRepaymentId
                });
                this.repaymentForm = res.data
            },
            //催收列表部分*****
            //点击催收时的列表
            async collectionListDetail(){
                let res = await collectionListDetail({
                    insuranceId: this.logId
                });
                this.collectionForm = res.data
                res.data.alRepaymentEntryList.map(e =>{
                    e.repaymentStatus = this.core.stcStatus(e.repaymentStatus)
                })
                this.collectionData = res.data.alRepaymentEntryList
            },
            //选择催收日期
            clickEndTime(){
                this.endTimeOptions.disabledDate = time => {
                    if (new Date()) {
                        if (time.getTime() > new Date().getTime()) {
                            return true
                        }
                    } else {
                        if (time.getTime() < Date.now() - 8.64e7) {
                            return true
                        }
                    }
                }
            },
            // 上传文件
            handleExceed(files, fileList) {
                this.$message.warning(
                    `当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！` 
                );
            },
            uploadSuccess(response, file, fileList) {
                if(response.code==99999){
                    fileList.splice(0,1)
                    return this.$message.error(`上传失败，请重新上传！错误码${response.code}`)  
                }  
                this.uploadList.push({ name: file.name, url: response.data[0] });
                // this.collectionHandle.enclosureFiles = response.data[0]
            },
            uploadError(err, file, fileList) {
                this.$message({
                    message: "上传出错，请重试！",
                    type: "error",
                    center: true
                });
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${file.name}？`);
            },
            handleRemove(file, fileList) {
                 this.uploadList = fileList
                // this.uploadList = []
                // this.collectionHandle.enclosureFiles = ''
            },
            // 上传后点击预览文件钩子
            handlePreview(file) {
                let index= file.url.lastIndexOf(".");
                //获取后缀
                let ext = file.url.substr(index+1);               
                if(['jpg','jpeg','png','gif','svg','psd'].includes(ext)){
                    this.showPreviewImg = true
                    this.previewImg = file.url 
                    // pdf调用插件
                }else if(ext == "pdf"){
                    window.open(file.url)
                }else if(ext == 'mp4'){
                    this.core.downMp4(file.url,this.URLsubstring(file.url))
                }
                else{
                    window.open('https://view.officeapps.live.com/op/view.aspx?src='+file.url)
                }
            },
            URLsubstring(url){// 剪切img-url的名称
                if(url){
                    return url.substring(59,url.length)
                }
            },
            // 催收提交
            collectionSave(collectionHandle){
                if(this.collectionHandle.collectionMethod!=='3') this.$set(this.collectionHandle,"other",'')
                this.$refs[collectionHandle].validate((valid) => {
                    if (valid) {
                        if(this.collectionHandle.collectionMethod=='3'&&!this.collectionHandle.other) return  this.$message.error("请输入其他催收方式说明！");
                        if(this.uploadList.length == 0) return this.$message.error("请先上传附件文件！");
                        this.collectionHandle.enclosureFiles = this.uploadList.map(e => e.url)
                        this.collectionHandle.insuranceId = this.logId
                        collection(this.collectionHandle).then(res=>{
                            this.$message.success("提交成功！");
                            this.logStatus = 1
                            this.$store.commit("logStatusData", { logStatus: 1 });
                        }).catch(err=>{
                        })
                    }
                })
            },
            //取消
            collectionCancel(){
                this.logStatus = 1
                this.$store.commit("logStatusData", { logStatus: 1 });
            },
            //催收记录列表部分*****
            async collectionHisList(){
                let res = await collectionHisList({
                    page: this.collectionHisPage,
                    size: this.collectionHisSize,
                    insuranceId: this.logId,
                    startTime: this.collectionHisStartTime,
                    endTime: this.collectionHisEndTime
                });
                res.data.list.map(e =>{
                    let obj ={
                        "1":'电话催收',
                        "2":'上门/外访',
                        "3":"其他"
                    }
                    e.collectionMethod = obj[e.collectionMethod]||'未知状态'
                })
                this.collectionHisData = res.data.list
                this.collectionHisTotals = res.data.totalCount
                
            },
            collectionHisSearch(){
                
                this.collectionHisPage = 1
                this.collectionHisList()
            },
            collectionHisPageChange(val){
                this.collectionHisPage = val
                this.collectionHisList()
            },
            // 选择时间
            selectTime(val) {
                if (val) {
                    this.collectionHisStartTime = val[0];
                    this.collectionHisEndTime = val[1];
                } else {
                    this.collectionHisStartTime = '';
                    this.collectionHisEndTime = '';
                }
            },
            collectionHisSelection(val){
                this.collectionHisMultiple = val;
            },
            // 导出催收记录列表
            CollectionHisExport(){
                // if(this.collectionHisMultiple.length != ''){
                    let exportIds = this.collectionHisMultiple.map(e => e.id).join()
                    let url = `${excelCollectionHis}?ids=${exportIds}&insuranceId=`+this.logId
                    window.location.href = url
                // }else{
                //     this.$message.error('请先选择催收记录列表数据 ！');
                // }
            },
            collectionHisSee(row){
                this.logStatus = 4
                this.$store.commit("logStatusData", { logStatus: 4 });
                this.logbackStatus = '查看'
                this.$store.commit("logbackStatusData", { logbackStatus: '查看' });
                this.logbackId = row.id
                this.$store.commit("logbackIdData", { logbackId: row.id });
            },
            // 催收记录列表点击查看
            async collectionHisListDetail(){
                let res = await collectionHisListDetail({
                    id: this.logbackId
                });
                let data = res.data
                this.collectionHandle = {
                    collectionMethod: String(res.data.collectionMethod),
                    collectionTime: res.data.collectionTime,
                    visitor:data.visitor,
                    situationDescription:data.situationDescription,
                    collectionFeedback: res.data.collectionFeedback,
                    enclosureFiles: res.data.enclosureFiles,
                    other:res.data.other
                }
                this.uploadList = []
                if(res.data.enclosureFiles.length>0&&res.data.enclosureFiles[0]){
                    const newArr = res.data.enclosureFiles.map(item => ({name: item,url:item}))
                    newArr.map(item => {
                        let str = item.name.split('/')
                        let len = str.length
                        item.name = str[len-1]
                    })
                    this.uploadList = newArr
                }
                this.collectionForm = res.data
                res.data.alRepaymentEntryList.map(e =>{
                    e.repaymentStatus = this.core.stcStatus(e.repaymentStatus)
                })
                this.collectionData = res.data.alRepaymentEntryList
            }

        }
    }
</script>
<style lang="scss" scoped>
/deep/ .el-radio__inner{
    width: 16px;
    height: 16px;
}
/deep/ .el-radio.is-bordered{
    padding-top: 0.58rem;
}
.radioInput{
    display: inline-block;
    border:0;
    outline: none;
    width: 20rem;
}
</style>

