<!DOCTYPE html>
<html>
<head>
    {{template "template/css.html"}}

</head>
<body>
<div class="page">
    <!-- Main Navbar-->
    {{template "template/header.html"}}
    <div class="page-content d-flex align-items-stretch">
        <!-- Side Navbar -->
        <nav class="side-navbar">
            <!-- Sidebar Header-->
            <div class="sidebar-header d-flex align-items-center">
                <a href="/index/ui/">
                    <div class="avatar">
                        <img src="../../static/img/avatar-1.jpg" alt="..."
                             class="img-fluid rounded-circle">
                    </div>
                </a>
                <a href="/index/ui/">
                    <div class="title">
                        <h1 class="h4">{{.userName}}</h1>
                        <p>欢迎您！</p>
                    </div>
                </a>
            </div>

            <!-- Sidebar Navidation Menus--><span class="heading">主菜单</span>
            <ul class="list-unstyled">
                <li class="active"><a href="/index/ui/" style="color: black;"> <i class="icon-home"></i>首页 </a></li>
                <li><a href="#exampledropdownDropdown" aria-expanded="false" data-toggle="collapse"
                       style="color: black;"> <i
                        class="icon icon-user"></i>账户管理 </a>
                    <ul id="exampledropdownDropdown" class="collapse list-unstyled ">
                        <li><a href="/user_info/show_modify_ui">修改密码</a></li>
                        <li><a href="/user_info/show_totp_ui">二步验证</a></li>
                        <li><a href="/user_info/show_ui">账户资料</a></li>
                        <li><a href="/index/show_pay_way_ui">通道配置</a></li>
                    </ul>
                </li>
                <li><a href="#exampledropdownDropdown1" aria-expanded="false" data-toggle="collapse"> <i
                        class="icon icon-presentation" style="color: black;"></i>订单管理 </a>
                    <ul id="exampledropdownDropdown1" class="collapse list-unstyled ">
                        <li><a href="/trade/show_ui">订单记录</a></li>
                        <li><a href="/trade/show_complaint_ui">投诉列表</a></li>
                    </ul>
                </li>
                <li><a href="#exampledropdownDropdown2" aria-expanded="false" data-toggle="collapse"> <i
                        class="icon icon-bill" style="color: black;"></i>财务管理 </a>
                    <ul id="exampledropdownDropdown2" class="collapse list-unstyled ">
                        <li><a href="/withdraw/show_ui">申请提现</a></li>
                        <li><a href="/multi_withdraw/show_multi_ui">批量申请提现</a></li>
                        <li><a href="/withdraw/show_list_ui">提现记录</a></li>
                        {{/*
                        <li><a href="/recharge/show_recharge_list_ui">自定义记录</a></li>
                        */}}
                        <li><a href="/history/show_history_list_ui">资产变动明细</a></li>
                    </ul>
                </li>
                <li>
                <li><a href="/gen_link/gen_link">测试链接</a></li>
            </ul>
        </nav>
        <div class="content-inner">
            <!-- Page Header-->
            <header class="page-header">
                <div class="container-fluid">
                    <h2 class="no-margin-bottom">生成链接</h2>
                </div>
            </header>
            <section class="dashboard-counts" style="margin-bottom: 2rem">
                <div class="container-fluid">
                    <div class="row bg-white has-shadow">
                        <div class="col-5 mm-select-label">
                            <label>
                                通道选择：
                                <select name="mm-select-road" id="mm-select-road">
                                </select>
                            </label>
                        </div>
                        <div class="col-1 mm-select-label">
                            <button type="button" class="btn btn-default" onclick="queryAllowedMM()">获取面额</button>
                        </div>
                    </div>
                </div>
            </section>
            <section class="dashboard-counts ">
                <div class="container-fluid">
                    <div class="row bg-white has-shadow">
                        <div class="col-3 mm-select-label">
                            <label>
                                面值选择：
                                <select name="mm-select" id="mm-select">
                                </select>
                            </label>
                        </div>
                        <div class="col-1 gen-link">
                            <button type="button" class="btn btn-default" onclick="genLink()">生成链接</button>
                        </div>
                        <div class="col-1 gen-link">
                            <button type="button" class="btn btn-default" onclick="createOnNewTab()">在新页面打开
                            </button>
                        </div>
                    </div>
                    <div class="iframe-link row" style="text-align: center">
                        <input hidden value="{{.payLink}}" id="payLink">
                        <iframe src="" frameborder="0" class="mm-iframe"
                                style="width: 60vw; height: 80vh; text-align: center; margin: auto"></iframe>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>
{{template "template/js.html"}}
</body>
<style>
    .mm-select-label {
        display: flex;
        align-items: self-end;
    }

    .iframe-link {

    }
</style>

<script>
    let globalSelectedValue = [];

    function genLink() {
        const mm = $("#mm-select").val();
        const result = globalSelectedValue.filter((item) => item.showLabel === Number(mm));
        if (result.length !== 0) {
            const src = `/gen_link/shop?productCode=${$("#mm-select-road").val()}&showMMValue=${result[0].showLabel}`
            $(".mm-iframe").attr("src", src);
        }
    }

    function createOnNewTab() {
        const mm = $("#mm-select").val();
        const result = globalSelectedValue.filter((item) => item.showLabel === Number(mm));
        if (result.length !== 0) {
            const src = `/gen_link/shop?productCode=${$("#mm-select-road").val()}&showMMValue=${result[0].showLabel}`
            window.open(src, "_blank");
        }
    }

    // 获取可允许面值
    function queryAllowedMM() {
        $.ajax({
            url: "/userInfo/queryAllowedMM",
            dataType: "json",
            data: {
                "roadCode": $("#mm-select-road").val(),
            },
            method: "GET",
            success: (res) => {
                if (res.code !== 0) {
                    alert(res.msg)
                } else {
                    globalSelectedValue = res.data;
                    $("#mm-select").empty();
                    for (let i = 0; i < res.data.length; i++) {
                        $("#mm-select").append(`<option value="${res.data[i].showLabel}">${res.data[i].factLabel}</option>`)
                    }
                }
            },
        })
    }

    function queryAllowedRoad() {
        $.ajax({
            url: "/userInfo/queryAllowedRoad",
            method: "GET",
            success: (res) => {
                if (res.code !== 0) {
                    alert(res.msg)
                } else {
                    globalSelectedValue = res.data;
                    for (let i = 0; i < res.data.length; i++) {
                        console.log(res.data[i])
                        $("#mm-select-road").append(`<option value="${res.data[i].productCode}">${res.data[i].roadName}</option>`)
                    }
                }
            },
        })
    }

    queryAllowedRoad()
</script>
</html>