
<template>
    <main class="wrap">
        <section>
            <div class="layout-box">
                <div class="accont-title clearfix">
                    <h3>下载回执单</h3>
                    <a href="javascript:;" class="back-btn" @click="goBack">返回</a>
                </div>
                <div class="refundinput-content">
                    <div class="down">
                        <div class="down-time">
                            <span class="demonstration">时间：</span>
                            <el-date-picker
                                v-model="time"
                                type="daterange"
                                align="right"
                                unlink-panels
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :picker-options="pickerOptions"
                                @change="changeTime"
                                :clearable="false"
                            ></el-date-picker>
                        </div>
                        <div class="down-input">
                            <el-button type="text" class="downway" @click="applyOperation">确定申请下载</el-button>
                        </div>
                    </div>
                    <div class="down-text">
                        <p>下载提示：</p>
                        <p>1、账单生成需要一个工作日左右，请后续到该页面下载查看</p>
                        <p>2、选择时间内容的账单最大可下载量为5000条，超过则建议缩短时间分批下载</p>
                        <p>3、最近5天的账单不支持下载</p>
                        <p>4、请妥善保管账户信息，避免信息泄露</p>
                        <p>5、1天内申请下载不超过50次，申请下载成功后3个月内可下载，单个文件总共下载不超过50次</p>
                    </div>
                    <el-divider></el-divider>
                    <div class="reimbursement-list">
                        <div class="reimbursement-list-box">
                            <div class="list-down">
                                <span>可下载对帐单</span>
                                <span class="list-text">*仅支持下载近3个月内申请的对账单</span>
                                <a class="back-btn" href="javascript:;" @click="refresh">刷新</a>
                            </div>
                            <el-table :data="tableData" v-loading="loading" >
                                <el-table-column label="对账时间段">
                                    <template
                                        slot-scope="scope"
                                    >{{ scope.row.billStartDate }}～{{scope.row.billEndDate}}</template>
                                </el-table-column>
                                <el-table-column label="账单类型">
                                    <template slot-scope="scope">
                                        <p v-if="scope.row.billType == '010'">贷款账单</p>
                                    </template>
                                </el-table-column>

                                <el-table-column label="申请时间">
                                    <template slot-scope="scope">{{ scope.row.applyDate }}</template>
                                </el-table-column>

                                <el-table-column label="申请状态">
                                    <template slot-scope="scope">
                                        <p v-if="scope.row.applyStatus == '010'">待审核</p>
                                        <p v-else-if="scope.row.applyStatus == '020'">申请成功</p>
                                        <p v-else-if="scope.row.applyStatus == '030'">申请失败</p>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="props">
                                        <el-button
                                            type="primary"
                                            class="doprimary"
                                            @click="onDownoad(props.row)"
                                        >下载</el-button>
                                    </template>
                                </el-table-column>
                                <div slot="empty" class="no-data">
                                    <img src="~assets/images/icon-status-no-record.png" alt />
                                    <h3>很遗憾您还没有记录！</h3>
                                    <p>快去交易吧！</p>
                                </div>
                            </el-table>
                            <div class="contentpage">
                                <el-pagination
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="currentPage"
                                    :page-sizes="[10, 20, 30, 40]"
                                    :page-size="size"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="total"
                                ></el-pagination>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
</template>
<script>
import utils from "utils/utils.js";
import { api_applyQuery, api_applyOperation, api_download } from "api/loan.js";
export default {
    name: "recordDown",    
    data() {
        return {
            pickerOptions: {
                shortcuts: [
                    {
                        text: "今日",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 30
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 90
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近1年",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 365
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    }
                ],
                disabledDate: time => {
                    return time.getTime() > new Date().getTime();
                },
                onPick: time => {
                    if (time.maxDate !== null) {
                        if (
                            time.maxDate.getTime() - 3600 * 1000 * 24 * 90 >
                            time.minDate.getTime()
                        ) {
                            let newDate = time.minDate;
                            setTimeout(() => {
                                this.time = [
                                    time.minDate,
                                    new Date().setTime(
                                        newDate.getTime() +
                                            3600 * 1000 * 24 * 90
                                    )
                                ];
                            }, 30);
                            this.$message.error("时间选择区间不可大于90天！");
                        }
                    }
                }
            },
            time: "",
            tableData: [],
            billTime: "",
            loading: false,
            shortcuts: "",
            total: 0,
            size: 10,
            currentPage:1,
            loanNo: "",
        };
    },
    methods: {
        goBack() {
            this.$router.go(-1);
        },
        closeDialog() {
            this.$emit("close");
        },
        refresh() {
            this.selectSort(() => {
                this.$message.success("刷新成功！");                 
            });
        },       
        handleSizeChange(val) {
            this.size = val;
            this.selectSort(); 
            console.log(this.size);
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.selectSort();  
          
        },
        defaultTime() {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            this.time = [start, end];
            this.changeTime(this.time);
        },
        changeTime(val) {
            this.time[0] = utils.formatDate(val[0], "yyyy-MM-dd");
            this.time[1] = utils.formatDate(val[1], "yyyy-MM-dd");
        },
        selectSort(callbackFn) {
            this.loading = true;
            let bankListData = {
                data: {
                    pageNum: this.currentPage,
                    pageSize: this.size,
                }
            };
            api_applyQuery(bankListData).then(res => {
                //对账文件申请查询                 
                if (res.success) {
                    if (res.data.list.length === 0) {
                        this.nodataplay = true;
                        this.nodatalistplay = false;
                        if(callbackFn){
                            callbackFn();
                        }                          
                    } else {                       
                        this.nodatalistplay = true;
                        this.nodataplay = false;
                        this.tableData = res.data.list;

                        this.total = res.data.total;
                        for (var i = 0; i < res.data.list.length; i++) {
                            if (res.data.list[i].billStartDate != null) {
                                var start = res.data.list[
                                    i
                                ].billStartDate.toString();
                                var ent = res.data.list[
                                    i
                                ].billEndDate.toString();
                                var applyDate = res.data.list[
                                    i
                                ].applyDate.toString();
                                this.tableData[
                                    i
                                ].billStartDate = start.substring(0, 10);
                                this.tableData[i].billEndDate = ent.substring(
                                    0,
                                    10
                                );
                                this.tableData[
                                    i
                                ].applyDate = applyDate.substring(0, 10);
                            }
                        }
                   
                        if(callbackFn){
                            callbackFn();
                        }
                    }
                } else {
                    this.$message.error(res.msg);                     
                }
                this.loading = false; 
            });
        },
        applyOperation: function() {
            this.loading = true;
            let bankListData = {
                data: {
                    billStartDate: this.time[0], //开始时间
                    billEndDate: this.time[1]
                }
            };
            api_applyOperation(bankListData).then(res => {
                //对账文件申请
                this.selectSort();           
                if (!res.success) {
                    this.$message.error(res.msg);
                } else {
                    this.$message.success(res.msg);                    
                }
                this.loading = false;
            });
        },
        onDownoad: function(loanNo) {
            this.loading = true;         
            this.loanNo = loanNo.loanBillNo;
            let bankListdownload = {
                params: {
                    loanBillNo: this.loanNo, //对账文件编号
                    id: loanNo.id
                }
            };
            api_download(bankListdownload).then(res => {   
                //对账文件下载
                const blob = new Blob([res]);
                console.log(blob);

                const fileName = "贷款对账单" + new Date().getTime() + ".xls";
                let status;
                var reader = new FileReader();
                reader.onload = e => {
                 
                    let str = e.target.result.substring(
                        e.target.result.indexOf("success") + 9
                    );
                    status = str.substring(0, 4);

                    let msg = e.target.result.substring(
                        e.target.result.indexOf("msg") + 6
                    );
                    let messg = msg.substring(0, 16)
                    //console.log(msg.substring(0, 16));
                    if (status == "true") {
                        if ("download" in document.createElement("a")) {
                            // 非IE下载
                            const elink = document.createElement("a");
                            console.log(elink);
                            elink.download = fileName;
                            elink.style.display = "none";
                            elink.href = URL.createObjectURL(blob);
                            document.body.appendChild(elink);
                            elink.click();
                            URL.revokeObjectURL(elink.href); // 释放URL 对象
                            document.body.removeChild(elink);
                        } else {
                            this.$message.error(
                                "仅支持下载交易成功的回执账单，请您耐心等待交易结果"
                            );
                        }
                        return;
                    } else{
                        this.$message.error(messg);                        
                        this.selectSort();
                        return;
                    }
                };                
                reader.readAsText(blob);
            });
        },      
    },
    created() {
        this.selectSort();
        this.defaultTime();
    }
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/common.css";
.way-cost /deep/ .el-input {
    width: 331px;
}
.way-cost /deep/ .el-radio {
    font-size: 14px;
}

.wrap {
    min-height: calc(100vh - 224px);
    section {
        width: 1080px;
        margin: 60px auto 0;
        background: #fff;

        .accont-title {
            h3 {
                margin-bottom: 8px;
            }
            /deep/ .back-btn {
                top: 20px;
                right: 20px;
                padding-left: 22px;
                font-size: 14px;
                background: url(~assets/images/icon-center-top.png) left center
                    no-repeat;
                color: #3d86e9;
                margin-bottom: -1px;
                text-align: right;
                float: right;
            }
        }
        .refundinput-content {
            padding: 30px 22px;
            .down {
                .down-time {
                    text-align: left;
                    font-size: 12px;
                    a {
                        padding: 3px 7px;
                        margin: 0 13.1px;
                    }
                    a:hover {
                        border: 1px solid #ffffff;
                        border-radius: 6px;
                        -moz-border-radius: 6px; /* Old Firefox */
                        color: #ffffff;
                        background: #3d86e9;
                        padding: 3px 6px;
                        margin: 0 13.1px;
                    }
                }

                .down-input {
                    width: 100%;
                    text-align: left;
                    padding-left: 41px;
                    .downway {
                        width: 330px;
                        height: 46px;
                        line-height: 46px;
                        margin: 24px 0;
                        background: #3d86e9;
                        color: #fff;
                        font-size: 18px;
                        font-weight: 200px;
                        display: block;
                        text-align: center;
                        padding: initial;
                        border:0px solid transparent;
                    }

                    /deep/ .downway:focus,
                    /deep/ .downway:hover,
                    /deep/ .downway:active {
                        background-color: #3d86e9 !important;
                        border-color: #fff !important;
                    }
                }
            }
            .down-text {
                text-align: left;
                font-size: 14px;
                background: #f7f7f7;
                color: #666666;
                padding: 32px;
                p {
                    padding: 4px 0;
                }
            }
            /deep/ .reimbursement-list-box {
                width: 100%;
                background: #ffffff;
                margin: 0 auto;
                height: min-content;
                border: 0;
                min-height:calc(100vh - 224px);
                .list-down {
                    text-align: left;
                    margin-bottom: 20px;
                    span {
                        font-size: 16px;
                        font-weight: bold;
                    }
                    .list-text {
                        font-size: 12px;
                        color: #cc3333;
                        margin-left: 12px;
                        font-weight:normal;
                        text-align: left;
                    }
                    .back-btn {
                        top: 20px;
                        padding-left: 22px;
                        font-size: 14px;
                        background: url(~assets/images/icon-center-back.png)
                            left center no-repeat;
                        color: #3d86e9;
                        margin-left: -1px;
                        text-align: right;
                        float: right;
                    }
                }
                
                table {
                    width: 100%;
                    background: #ffffff;
                    border-collapse: collapse;
                    margin: 0 auto;
                    text-align: center;
                    font-size: 14px;
                    position: initial;

                    tr th {
                        background: #f4f4f7;
                        text-align: center;
                        border: 0;
                        color: #999999;
                    }
                    tr td {
                        height: 48px;
                        border: 0;
                        text-align: center;
                        color: #666666;
                    }
                }
                .doprimary .el-button {
                    padding: 14px 59px;
                }
                .doprimary.el-button--primary {
                    background: none;
                    color: #3d86e9;
                    border: 0;
                }
                .doprimary .el-button--primary:active {
                    background: none;
                    color: #3d86e9;
                    border: 1px;
                }
                .no-data {
                    line-height: 1;
                    img {
                        margin-top: 50px;
                        background-size: 100% auto;
                    }
                    h3 {
                        margin-top: 22px;
                        font-size: 24px;
                        font-weight: normal;
                        color: #3f87e9;
                    }
                    p {
                        margin: 22px auto 50px auto;
                        font-size: 14px;
                        color: #999;
                    }
                }
            }
            /deep/ .reimbursement-list-box .el-table::before {
                height: 0px;
            }
            /deep/.contentpage {
                display: inline-block;
                padding: 29px 0;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                vertical-align: text-top;
                font-size: 12px;
                width: 100%;
                margin: 0 auto;
                .el-pagination .el-pagination__total,
                .el-input__inner,
                .el-pagination__jump {
                    color: #9b9b9b;
                }
            }

            .clear {
                clear: both;
            }

            .reimbursement-list {
                width: 100%;
                -webkit-box-sizing: border-box;
                vertical-align: text-top;
                font-size: 9px;
                background: #ffffff;
                margin: 0 auto;
                min-height:calc(100vh - 224px);
                .principalBtext {
                    width: 1080px;
                    height: 41px;
                    margin-left: 391px;

                    background-size: 186px 41px;
                    a {
                        font-size: 17px;
                        font-weight: bold;
                    }
                }

                .advance {
                    width: 100%;
                    background: #ffffff;
                    margin: 0 auto;
                    font-size: 12px;
                    color: #333333;
                    p.submit {
                        width: 100%;
                        padding: 34px 0;
                        margin: 0 auto;
                        span,
                        a {
                            display: block;
                            font-size: 14px;
                            width: 80%;
                            margin: 25px auto;
                            text-align: center;
                            color: #999999;
                        }
                        .submit-img {
                            width: 80%;
                            margin-bottom: 35px;
                            background-size: 100% auto;
                        }
                        .way {
                            color: #3d86e9;
                            font-size: 24px;
                            font-weight: 200px;
                        }
                    }
                }
            }
        }
    }
    /deep/.el-message-box .el-message-box--center {
    width: 400px;
    }
    /deep/.el-message-box--center .el-message-box__content {
        padding: 0 159px;
    }

    .down /deep/ .el-radio {
        position: relative;
        display: inline-block;
        outline: none;
        margin: 0 10px;
        .el-radio__input {
            opacity: 0;
            outline: none;
            position: absolute;
            z-index: -1;
        }
        .el-radio__input.is-checked + .el-radio__label {
            padding: 4px 10px;
            border-radius: 4px;
            background: #3d86e9;
            color: #fff;
        }
        .el-radio__label {
            padding: 10px;
        }
    }
}


</style>
