<template>
    <main>
        <!-- 借款首页 -->
        <section class="borrowmoney">
            <!-- 头部 -->
            <div class="borrowmoneytop">
                <div class="borrowmoney-information">
                    <!-- 左部 -->
                    <div class="borrowmoney-left">
                        <!-- 上部 -->
                        <div class="borrowmoney-number">
                            <span>￥</span>
                            {{formatNum(information.plannedTotal)}}
                        </div>
                        <!-- 分隔线 -->
                        <div class="borrowmoneyline"></div>
                        <!-- 下部样式 -->
                        <div class="shouldreturn">
                            应还本金
                            <el-popover
                                ref="popover"
                                effect="dark"
                                class="popoverone"
                                popper-class="tool-tip-whitea"
                                content="应还本金及息费"
                                trigger="hover"
                                placement="right"
                            ></el-popover>
                            <el-link v-popover:popover :underline="false">
                                <img src="~assets/images/icon-yiwen.png" alt />
                            </el-link>
                        </div>
                        <div class="time">截止{{datatime}}</div>
                    </div>
                    <!-- 中部 -->
                    <div class="borrowmoney-center">
                        <div class="center-top">
                            <h1>{{formatNum(information.estimateLoanQuota)}}</h1>
                            <div class="center-top-text">
                                预计可借额度（元）
                                <el-popover
                                    ref="popovert"
                                    class="popovertwo"
                                    effect="dark"
                                    popper-class="tool-tip-white"
                                    width="248px"
                                    content="非实际可用额度，具体额度以最终审批为准"
                                    trigger="hover"
                                    placement="right"
                                ></el-popover>
                                <el-link v-popover:popovert :underline="false">
                                    <img src="~assets/images/icon-yiwen.png" alt />
                                </el-link>
                            </div>
                        </div>
                        <div class="center-bottom">
                            <!-- statesdictionaries对象+.所需要的数据 注：不需要if else -->
                            <a class="center-menu" :href="this.statesobj.link">{{this.statesobj.txt}}</a>
                            <div class="center-text">*提示：授权店铺入账成功，才有实际可用额度哦~</div>
                        </div>
                    </div>
                    <!-- 分隔线 -->
                    <div class="borrowmoney-centerbold">
                        <img src="~assets/images/icon-bold.png" alt />
                    </div>
                    <!-- 右部 -->
                    <div class="borrowmoney-right">
                        <!-- 试算标题 -->
                        <div class="right-text">额度试算</div>
                        <!-- 试算输入框 -->
                        <el-input
                            placeholder="请输入全部店铺加总笔均入账金额"
                            type="text"
                            v-model="num"
                            maxlength="6"
                            @input="inputnum"
                            oninput="value=value.replace(/[^\d]/gi,'')">
                            <span slot="suffix">万元</span>
                        </el-input>
                        <!-- 试算按钮 -->
                        <div class="menu-bottom">
                            <div class="menu-bottomleft" @click="trygold">试试我能借多少</div>
                            <router-link to="/account/apply"><div class="menu-bottomright">申请提额</div></router-link>
                        </div>
                        <!-- 试算金额 -->
                        <div class="money">
                            <span>{{money}}</span>万元
                        </div>
                    </div>
                </div>
            </div>
            <!-- 尾部 -->
            <div class="borrowmoneybottom">
                <!-- 操作容器 -->
                <div class="borrowmoneybottom-top">
                    <!-- 左侧线 -->
                    <div class="top-left"></div>
                    <div class="top-title">全部店铺</div>
                    <!-- 状态切换容器 -->
                    <div class="top-content">
                        <div
                            v-for="(item, index) in navlist" :key="index"
                            class="contentname"
                            :class="switchpages == item.status ? 'contentnamet' : ''"
                            @click="whole(item.status, $event)"
                            v-html="item.title"
                        >
                        </div>
                        <div class="content-bold" id="content-bold"></div>
                    </div>
                    <!-- 搜索框 -->
                    <div class="search">
                        <img src="~assets/images/icon-search.png" alt />
                        <input placeholder="搜索店铺名称" v-model="seach" width="70%" />
                        <div class="search-menu" @click="searchinform">搜索</div>
                    </div>
                </div>
                <!-- 显示表部分 -->
                <div class="borrowmoneybottom-bottom">
                    <el-table
                        v-loading="loading"
                        :data="storelist.list"
                        empty-text="很遗憾，暂无数据！"
                        :border="false"
                    >
                        <el-table-column
                            style="border-bottom:none;"
                            prop="storeName"
                            label="店铺名称"
                            :show-overflow-tooltip="true"
                        ></el-table-column>
                        <el-table-column
                            prop="storePlateformName"
                            :show-overflow-tooltip="true"
                            label="平台名称"
                        ></el-table-column>
                        <el-table-column
                            prop="averageIncome"
                            :show-overflow-tooltip="true"
                            label="笔均入账金额（元）"
                        ></el-table-column>
                        <!-- 操作部分 -->
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button type="primary" @click="at(scope.row)">
                                    <div class="one" v-if="scope.row.authStatus === 0">店铺授权</div>
                                    <div
                                        class="two"
                                        v-if="scope.row.authStatus === 2 ||scope.row.authStatus === 3"
                                    >已授权</div>
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 页码部分 -->
                    <div class="list-page">
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="100"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="storelist.total"
                        ></el-pagination>
                    </div>
                </div>
            </div>
        </section>
    </main>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import {
    api_loan_condition,
    api_loan_appstore,
} from "api/loan.js";
let host = process.env.NODE_ENV == "development" ? "/api" : "";
export default {
    data() {
        return {
            // 默认金额
            money: "0.00",
            // 店铺状态默认值
            switchpages: 1,
            // 金额默认值
            value: "",
            // 定义首页信息对象
            information: [],
            // 输入试算金额默认值
            num: "",
            // 默认十条数据
            pages:10,
            // 定义列表对象
            storelist: [],
            // 当前页码
            currentPage:1,
            seach:'',
            // 授权状态默认值
            authStatstatus: '1',
            // 加载默认值
            loading: true,
            authStatus:'',
            datatime:'',
            states:'',
            statesobj:{
                link:"",
                txt:""
            },
            navlist:[{
                    "title":"全部店铺",
                    "status":"1"
                },
                {
                    "title":"已授权店铺",
                    "status":"2"
                },
                {
                    "title":"待授权店铺",
                    "status":"3"
            }],
            statesdictionaries:{
                "1":{link:"/loan/borrowMoneyempower",txt:"店铺授权"},
                "2":{link:"/loan/borrowMoneyFilling",txt:"贷款申请"},
                "3":{link:"/loan/borrowMoneyAudit",txt:"等待贷款申请审核"},
                "4":{link:"/loan/borrowMoneyFilling",txt:"贷款申请修改"},
                "44":{link:"/loan/borrowMoneyFilling",txt:"贷款审核不通过"},
                "5":{link:"/loan/borrowMoneyprocess",txt:"立即用钱"},
                "6":{link:"/loan/borrowMoneyapplyaudit",txt:"等待借款审核"},
                "66":{link:"/loan/borrowMoneyapplyfail",txt:"借款审核不通过"},
                "7":{link:"/loan/borrowMoneywrite",txt:"借款审核通过"},
                "8":{link:"/loan/borrowMoneymake",txt:"等待放款"},
                "9":{link:"/loan/borrowMoneysuccess",txt:"放款完成"},
                "10":{link:"/loan/repayment",txt:"还款"}
            }
        };
    },
    name: "borrowMoney",

    methods: {
        inputnum(val){
            if(val == 0){
                this.num ='';
            }else{

            }
        },
        // 点击跳转授权未授权
        at(val){
            console.log(val);
            let toDetail = this.$router.resolve({
                path: "/account/store/detail",
                query: {
                    id: val.storeId
                }
            })
            window.open(toDetail.href, "_blank");
        },
        // 获取全部店铺数据
        whole(status,e) {
            this.loading = true;
            this.switchpages = 1;
            this.seach = "";
            let appstoredata = {
                data: {
                    pageNum: 1,
                    pageSize: this.pages,
                    storeName: this.seach,
                    authStatus: ""
                }
            };

            var _p = $(e.target).position();
            console.log($(e.target).outerWidth());
            //当前选项样式变化
            $(".contentnamet").removeClass("contentnamet");
            $(e.target).addClass("contentnamet");

            //位置变化
            $("#content-bold").css({
                "transform":"translate3d("+(_p.left+15)+"px,0,0)",
                "width":$(e.target).width()+"px"
            });
            this.authStatstatus = status;
            switch(status){
                case "1":
                //全部的
                appstoredata.data.authStatus = '';
                break;
                case "2":
                //已授权店铺
                appstoredata.data.authStatus = [2,3];
                break;
                case "3":
                //待授权店铺
                appstoredata.data.authStatus = 0;
                break;
                default:
                break;
            }

            console.log(appstoredata);
            

            api_loan_appstore(appstoredata).then(res => {
                if (res.success) {
                    this.storelist = res.data;
                    this.loading = false;
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        // 变换size条数
        handleSizeChange(val){
            console.log(this.authStatstatus);
            this.loading = true;
            this.pages = val;
            let appstoredata = {
                data: {
                    pageNum: 1,
                    pageSize: val,
                    storeName: this.seach,
                    authStatus: this.authStatstatus === '1' ? '' : (this.authStatstatus === '2' ? [2,3] : 0)
                }
            };
            api_loan_appstore(appstoredata).then(res => {
                if (res.success) {
                    this.storelist = res.data;
                    this.loading = false;
                } else {
                    this.$message.error(res.msg);
                }
                this.loading = false;
            });
        },
        // 跳转页码请求接口
        handleCurrentChange(val) {
            console.log(this.authStatstatus);
            this.loading = true;
            let _this = this;
            _this.currentPage = val;
            let appstoredata = {
                data: {
                    pageNum: val,
                    pageSize: this.pages,
                    storeName: this.seach,
                    authStatus: this.authStatstatus === '1' ? '' : (this.authStatstatus === '2' ? [2,3] : 0)
                }
            };
            api_loan_appstore(appstoredata).then(res => {
                if (res.success) {
                    this.storelist = res.data;
                    this.loading = false;
                } else {
                    this.$message.error(res.msg);
                }
                this.loading = false;
            });
        },
        // 搜索事件
        searchinform() {
            this.loading = true;
            let appstoredata = {
                data: {
                    pageNum: 1,
                    pageSize: 10,
                    storeName: this.seach,
                    authStatus: this.authStatstatus === '1' ? '' : (this.authStatstatus === '2' ? [2,3] : 0)
                }
            };
            api_loan_appstore(appstoredata).then(res => {
                if (res.success) {
                    this.storelist = res.data;
                    this.loading = false;
                } else {
                    this.$message.error(res.msg);
                }
                this.loading = false;
            });
        },
        // 试算金额按钮事件
        trygold() {
            if (this.num=='') {
                this.money = "0.00";
                this.$message.error("请输入全部店铺加总笔均入账金额")
            } else {
                this.money = (this.num * 0.7).toFixed(2);
            }
        },
        // 格式化金额
        formatNum(strNum) {
            var outputmoney = function(number) {
                number = number.replace(/\,/g, ""); //把所有的逗号，清除
                if (isNaN(number) || number == "") return "";
                number = Math.round(number * 100) / 100;
                if (number < 0)
                    return (
                        "-" +
                        outputdollars(Math.floor(Math.abs(number) - 0) + "") +
                        outputcents(Math.abs(number) - 0)
                    );
                else
                    return (
                        outputdollars(Math.floor(number - 0) + "") +
                        outputcents(number - 0)
                    );
            };
            //格式化金额
            var outputdollars = function(number) {
                if (number.length <= 3) {
                    return number == "" ? "0" : number;
                } else {
                    var mod = number.length % 3;
                    var output = mod == 0 ? "" : number.substring(0, mod);
                    for (let i = 0; i < Math.floor(number.length / 3); i++) {
                        if (mod == 0 && i == 0) {
                            output += number.substring(
                                mod + 3 * i,
                                mod + 3 * i + 3
                            );
                        } else {
                            output +=
                                "," +
                                number.substring(mod + 3 * i, mod + 3 * i + 3);
                        }
                    }
                    return output;
                }
            };
            var outputcents = function(amount) {
                amount = Math.round((amount - Math.floor(amount)) * 100);
                return amount < 10 ? ".0" + amount : "." + amount;
            };
            return outputmoney(strNum + "");
        }
    },
    created() {
        // 覆盖该页面背景
        document.getElementsByTagName("html")[0].style.background = "#f7f7f7";
        // 获取首页数据
        let applicationparams = {
            params: {}
        };
        api_loan_condition(applicationparams).then(res => {
            this.information = res.data;
            this.states = res.data.reverseStatus;
            this.statesobj = this.statesdictionaries[this.states];
            this.datatime = res.data.endPlannedDate;
            console.log(res.data.endPlannedDate);
        });
        // 获取店铺列表
        let appstoreData = {
            data: {
                pageNum: "1",
                pageSize: "10",
                storeName: "",
                authStatus: ""
            }
        };
        api_loan_appstore(appstoreData).then(res => {
            if (res.success) {
                this.storelist = res.data;
                this.loading = false;
            } else {
                this.$message.error(res.msg);
            }
            this.loading = false;
        });
    }
};
</script>

<style lang="less" scoped>
main {
    display: block;
    margin: 40px 0 49px 0;
    .borrowmoney {
        width: 100%;
        height: 100%;
        // 头部样式
        .borrowmoneytop {
            width: 100%;
            height: 418px;
            background: url("~assets/images/loan-background.png") no-repeat;
            background-size: 100% 100%;
            .borrowmoney-information {
                height: 332px;
                margin: auto;
                width: 1105px;
                margin: auto;
                padding-top: 56px;
                // 左侧样式
                .borrowmoney-left {
                    width: 228px;
                    height: 281px;
                    background: url("~assets/images/money-background.png")
                        no-repeat;
                    text-align: center;
                    float: left;
                    overflow: hidden;
                    margin-top: 23px;
                    background-size: 100% 100%;
                    // 上部样式
                    .borrowmoney-number {
                        font-size: 16px;
                        font-weight: 400;
                        color: rgba(51, 51, 51, 1);
                        width: 184px;
                        margin: auto;
                        padding: 74px 0 24px 0;
                        border-bottom: 1px solid #e6e6e6;
                        font-family: "Microsoft YaHei";
                        span {
                            font-size: 16px;
                        }
                    }
                    // 分隔线
                    .borrowmoneyline {
                        width: 123px;
                        height: 1px;
                        background: #3d86e9;
                        margin: -1px auto;
                    }
                    // 下部样式
                    .shouldreturn {
                        font-size: 14px;
                        margin: 6px 0 0 42px;
                        height: 59px;
                        line-height: 59px;
                        text-align: center;
                        .el-link {
                            padding: 0;
                            border: none;
                            transform: translateY(7.5px);
                            display: inline-block;
                            margin-left: 13px;
                            border-radius: 50%;
                            background: #ffffff;
                            cursor: pointer;
                        }
                    }
                    .time {
                        font-size: 14px;
                        font-size: 14px;
                        color: rgba(153, 153, 153, 1);
                        text-align: center;
                    }
                }
                // 中部样式
                .borrowmoney-center {
                    width: 520px;
                    height: 300px;
                    overflow: hidden;
                    float: left;
                    padding-top: 20px;
                    .center-top {
                        text-align: center;
                        h1 {
                            font-size: 48px;
                            color: rgba(249, 246, 255, 1);
                            font-weight: 400;
                            font-family: "Microsoft YaHei";
                            margin-top: 4px;
                        }
                        .center-top-text {
                            font-size: 24px;
                            color: rgba(255, 255, 255, 1);
                            margin: 27px 0 0 39px;
                            .el-link {
                                border: none;
                                height: 25px;
                                width: 25px;
                                display: inline-block;
                                border-radius: 50%;
                                padding: 0;
                                background: #ffffff;
                                cursor: pointer;
                            }
                        }
                    }
                    .center-bottom {
                        height: 90px;
                        width: 100%;
                        .center-menu {
                            width: 221px;
                            height: 46px;
                            display: block;
                            line-height: 46px;
                            text-align: center;
                            background: rgba(255, 255, 255, 1);
                            border-radius: 4px;
                            margin: 42px auto 0;
                            color: rgba(61, 134, 233, 1);
                            cursor: pointer;
                        }
                        .center-text {
                            font-size: 14px;
                            color: #C8E4FF;
                            margin-top: 29px;
                            text-align: center;
                        }
                    }
                }
                // 分隔线
                .borrowmoney-centerbold {
                    width: 1px;
                    height: 332px;
                    display: inline-block;
                }
                .borrowmoney-right {
                    float: right;
                    padding-top: 30px;
                    width: 338px;
                    // 试算标题
                    .right-text {
                        text-align: center;
                        font-size: 24px;
                        color: rgba(249, 246, 255, 1);
                        width: 265px;
                        float: right;
                    }
                    // 输入框
                    /deep/.el-input {
                        width: 265px;
                        height: 45px;
                        background: rgba(255, 255, 255, 0.15);
                        border-radius: 4px;
                        margin-top: 40px;
                        font-size: 24px;
                        color: #ffffff;
                        float: right;
                        .el-input__inner {
                            font-size: 24px;
                            background: none;
                            border: none;
                            color: #ffffff;
                            margin-top: 2px;
                        }
                        span {
                            font-size: 12px;
                            color: #ffffff;
                            line-height: 51px;
                        }
                        ::-webkit-input-placeholder {
                            color: #a0ccf9;
                            font-size: 14px;
                        }
                        input::-webkit-outer-spin-button,
                        input::-webkit-inner-spin-button {
                            -webkit-appearance: none !important;
                            margin: 0;
                        }
                    }
                    // 试算按钮样式
                    .menu-bottom {
                        width: 265px;
                        height: 46px;
                        margin-top: 35px;
                        float: right;
                        .menu-bottomleft{
                            width: 156px;
                            height: 46px;
                            line-height: 46px;
                            font-size:18px;
                            background: #FFFFFF;
                            float: left;
                            border-radius:4px;
                            color: #3D86E9;
                            cursor: pointer;
                        }
                        .menu-bottomright{
                            width: 98px;
                            height: 46px;
                            line-height: 46px;
                            font-size:18px;
                            border: 1px solid #ffffff;
                            float: right;
                            color: #FFFFFF;
                            border-radius:4px;
                            cursor: pointer;
                        }
                        .menu-bottomright:hover{
                            background: #ffffff;
                            color: #3D86E9;
                        }
                    }
                    // 试算金额
                    .money {
                        text-align: right;
                        font-size: 14px;
                        color: rgba(249, 246, 255, 1);
                        height: 80px;
                        line-height: 80px;
                        padding-right: 12px;
                        margin-right: 95px;
                        font-family: "Microsoft YaHei";
                        float: right;
                        span {
                            text-align: center;
                            font-size: 24px;
                            color: rgba(249, 246, 255, 1);
                            margin-right: 18px;
                        }
                    }
                }
            }
        }
        // 尾部样式
        .borrowmoneybottom {
            width: 100%;
            background: #ffffff;
            // 操作容器样式
            .borrowmoneybottom-top {
                height: 77px;
                line-height: 77px;
                width: 1080px;
                margin: auto;
                border-bottom: 1px solid #f7f7f7;
                position: relative;
                // 左侧线
                .top-left {
                    width: 4px;
                    height: 20px;
                    background: rgba(61, 134, 233, 1);
                    float: left;
                    margin-top: 28px;
                }
                .top-title {
                    font-size: 18px;
                    font-weight: bold;
                    color: rgba(51, 51, 51, 1);
                    margin-left: 16px;
                    float: left;
                }
                // 状态切换容器样式
                .top-content {
                    height: 77px;
                    line-height: 77px;
                    margin-left: 11px;
                    float: left;
                    text-align: center;
                    position:relative;
                    .contentname {
                        padding: 0 15px 0 15px;
                        float: left;
                        font-size: 14px;
                        cursor: pointer;
                        transition:color .5s ease-out;
                    }
                    .contentnamet {
                        float: left;
                        font-size: 14px;
                        color: #3d86e9;
                    }
                }
                .content-bold {
                    width: 56px;
                    height: 2px;
                    background: #3d86e9;
                    position: absolute;
                    bottom: -1px;
                    transform:translate3d(15px,0,0);
                    transition:all .5s ease-out;
                }
                // 搜索框样式
                .search {
                    width: 432px;
                    height: 46px;
                    line-height: 46px;
                    background: rgba(252, 252, 252, 1);
                    border: 1px solid rgba(230, 230, 230, 1);
                    border-radius: 4px;
                    float: right;
                    margin-top: 15px;
                    img {
                        width: 17px;
                        height: 22px;
                        padding: 12px 0 12px 8px;
                        size: auto;
                        float: left;
                        object-fit: contain;
                    }
                    input {
                        font-size: 18px;
                        color: #333333;
                        float: left;
                        padding: 13px 0 14px 9px;
                        background: none;
                    }
                    ::-webkit-input-placeholder {
                        font-size: 14px;
                        color: rgba(204, 204, 204, 1);
                    }
                    .search-menu {
                        width: 101px;
                        height: 46px;
                        background: rgba(61, 134, 233, 1);
                        border-radius: 0 4px 4px 0;
                        float: right;
                        text-align: center;
                        font-size: 18px;
                        font-weight: 400;
                        color: #ffffff;
                        cursor: pointer;
                    }
                }
            }
            // 显示表样式
            .borrowmoneybottom-bottom {
                width: 1080px;
                height: auto;
                margin: 30px auto 0;
                .el-table {
                    width: 100%;
                    height: auto;
                    line-height: 36px;
                    background: #f5f5f5;
                    border: none;
                    font-size: 14px;
                    color: rgba(51, 51, 51, 1);
                    margin-bottom: 30px;
                    .has-gutter {
                        text-align: center;
                        font-weight: 200;
                    }
                    // 操作部分样式
                    .el-button{background: none; border: none;
                        .one {
                            color: #cc6666;
                            cursor: pointer;
                        }
                       :hover{
                            color: #3d86e9;
                       }
                        .two {
                            color: #53a849;
                            cursor: pointer;
                        }
                       :hover{
                            color: #3d86e9;
                       }
                    }
                }
                .el-pagination {
                    padding: 8px 0 51px 0;
                }
                .el-pagination {
                    padding: 8px 0 51px 0;
                }
                .el-table::before {
                    content: "";
                    height: 0;
                }
                & /deep/ th {
                    padding: 0;
                    height: 36px;
                    text-align: center;
                    border-bottom: 1px solid transparent;
                    background: #f5f5f5;
                }
                & /deep/ td {
                    text-align: center;
                    border-bottom: 1px solid transparent;
                }
                & /deep/ .el-table__empty-text {
                    width: initial;
                    &::before {
                        content: "";
                        display: block;
                        width: 191px;
                        height: 131px;
                        margin: 40px 0 0;
                        background: url(~assets/images/icon-status-no-data.png) no-repeat;
                        background-size: 191px 131px;
                    }
                }
            }
        }
    }
    /deep/.fontWeightNormal {
        font-weight: normal !important;
    }
    /deep/.el-table th > .cell {
        text-align: center;
        font-weight: normal;
        font-size: 14px;
    }
    /deep/.el-table td,
    .el-table th.is-leaf {
        border-bottom: none;
        text-align: center;
    }
    /deep/.el-table .cell {
        text-align: center;
        font-size: 14px;
    }
    /deep/.el-table__body-wrapper {   
        background: #ffffff;
    }
    /deep/.el-table__row {
        height: 55px;
    }
    /deep/.el-popover--plain {
        padding: 0 0 0 0;
        
    }
    /deep/.el-table--border::after,
    .el-table--group::after,
    .el-table::before {
        background-color: #ffffff;
    }
}
</style>
<style lang="less">
.tool-tip-white {
    height: 30px !important;
    line-height: 30px !important;
    padding: 0 10px 0 10px !important;
    font-size: 14px !important;
    transform: translateY(1px) !important;
}
.tool-tip-whitea{
    height: 30px !important;
    line-height: 30px !important;
    min-width:100px !important;
    width: 100px !important;
    padding: 0 10px 0 10px !important;
    font-size: 14px !important;
    transform: translateY(-5px) !important;
    }
</style>
