<!DOCTYPE html>
<html lang="en" style="font-size: 16px;" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta data-n-head="true" name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta data-n-head="true" data-hid="description" name="description" content="商户公众号">
    <meta data-n-head="true" http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta data-n-head="true" http-equiv="Pragma" content="no-cache">
    <meta data-n-head="true" http-equiv="Expires" content="0">
    <title data-n-head="true">账号绑定</title>
    <title>账号绑定</title>
    <link rel="stylesheet" href="/wap/resources/css/weui.css">
    <script src="/wap/resources/js/jquery.min.js"></script>
    <style >
        html {
            font-family: Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
            word-spacing: .03125rem;
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
        body{
            background-color: #f3f3f3;
            padding: 2rem 0 0 0;
        }
        .account-con{
            width: 100%;

        }
        .account-logo img{
            width: 100px;
            height: 100px;
            border-radius: 10px;
        }
        .account-title{
            width: 100%;
            margin-top: 30px;
            text-align: center;
        }
        .account-con-list{
            width: calc(100% - 3rem);
            margin: 2rem auto 0 auto;
        }
        .account-list{
            width: calc(100% - 40px);
            display: flex;
            flex-wrap: wrap;
            border-bottom: 1px solid #f1f1f1;
            padding: 10px 20px;
            background-color: #fff;

        }
        .account-operation{
            flex: 1;
            text-align: right;
        }
        .account-button{
            width: calc(100% - 60px);
            background-color: #FD7663;
            padding: 10px;
            text-align: center;
            border-radius: 10px;
            margin: 4.5rem auto 0 auto;
            color: #fff;
        }
        .account-logo{
            height: 4.375rem;
            margin-bottom: 1.46875rem;
            text-align: center;
        }
        .account-logo img{
            height: 100%;
            width: auto;
            border-radius: 5px;
        }
        .weui-switch:checked, .weui-switch-cp__input:checked ~ .weui-switch-cp__box {
            border-color: #FD7663;
            background-color: #FD7663;
        }
        .weui-switch, .weui-switch-cp__box{
            width: 41px;
            height: 22px;
        }
        .weui-switch:before, .weui-switch-cp__box:before {
            width: 40px;
            height: 20px;
        }
        .weui-switch:after, .weui-switch-cp__box:after {
            width: 20px;
            height: 20px;
        }
        .f-toast{
            z-index: 99;
            position: fixed;
            top: 48%;
            left: 50%;
            max-width: 80%;
            min-width: 10.375rem;
            padding: .78125rem .625rem .625rem;
            border-radius: .3125rem;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            text-align: center;
            background: rgba(51,51,51,.7);
            color: #fff;
            -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
        }
        .f-toast .f-toast-icon{
            height: .96875rem;
            margin-bottom: .71875rem;
        }
        .f-toast .f-toast-icon img{
            width: auto;
            height: 100%;
        }
        .f-popup{
            z-index: 0;
            position: fixed;
            top: 0;
            left: 0;
            overflow: hidden;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,.7);
        }
        .f-loading{
            position: fixed;
            z-index: 1;
            top: 40%;
            left: 37%;
            padding: 1rem 1rem;
            display: none;
            border-radius: 5px;
            background-color: #fff;
        }
        .loading-icon{
            margin: 0 0 0 .8rem;
        }
        .loading-txt{
            margin-top: .5rem;
        }
    </style>
</head>
<body>
    <div class="container">
<!--        <div class="nuxt-progress"></div>-->
        <input type="hidden" name="userAppId" id="userAppId" th:value="${userAppId}">
        <div class="content">
            <div class="account-con">
                <div class="account-logo">
                    <img src="https://www.shouyinbei.net/resources/images/logo.png" alt="">
                </div>
                <div class="account-title">收款就用快银</div>
                <div class="account-con-list">
                    <div class="account-list" th:each="user:${list}">
                        <div class="account-name" th:text="${user.alias}"></div>
                        <div class="account-operation">
                            <input class="weui-switch" onchange="setIsPushStatus(this)" th:value="${user.isPushWxMessage}" th:attr="data-mcode=${user.merchantCode},checked=${user.isPushWxMessage == '1' ? 'true' : 'false'}" type="checkbox"/>
                        </div>
                    </div>
                </div>
                <div class="account-button">
                    解绑
                </div>
            </div>
        </div>
        <div class="f-toast ellipsis" style="display: none">
            <div class="f-toast-text"></div>
        </div>
        <div class="f-popup jsPop" style="display: none"></div>
        <div class="f-loading">
            <img src="/wap/resources/images/loading-2.gif" class="loading-icon" />
            <div class="loading-txt">加载中...</div>
        </div>
    </div>
    <script>
        $(".account-button").click(function (event){
            let $userAppId = $("#userAppId").val();
            $(".jsPop").show();
            $(".f-loading").show();
            let $url = `/wap/merchant/account/unBind/${$userAppId}`;
            $.post($url,function (res){
                $(".jsPop").hide();
                $(".f-loading").hide();
                $(".f-toast").show().html(res.message);
                if(res.code == 200){
                    let openid = res.data;
                    setTimeout(function (){
                        if(openid == "null" || !openid){
                            window.location.href = `/wap/merchant/account/auth`;
                        }else{
                            window.location.href = `/wap/merchant/account/bind?openId=${openid}`;
                        }
                    },500);
                }
            })
        })
        // function toLocation(openid){
        //     if(openid == "null" || !openid){
        //         window.location.href = `/wap/merchant/account/auth`;
        //     }else{
        //         window.location.href = `/wap/merchant/account/bind?openId=${openid}`;
        //     }
        // }
        function setIsPushStatus(obj){
            $(".jsPop").show();
            $(".f-loading").show();
            let $val = obj.value == 1 ? 0 : 1;
            let $userAppId = $("#userAppId").val();
            let $merchantCode = $(obj).data("mcode");
            $(obj).val($val);
            let $url = `/wap/merchant/account/unBindSend`;
            $.post($url,{"userAppId":$userAppId,"merchantCode":$merchantCode,"isPushWxMessage":$val},function (res){
                $(".jsPop").hide();
                $(".f-loading").hide();
                $(".f-toast").show().html(res.message);
                hideMsg();
            })
        }
        function hideMsg(){
            setTimeout(function (){
                $(".f-toast").hide();
            },1000);
        }
    </script>
</body>
</html>