@using Hncore.Infrastructure.Data
@using Hncore.Pass.Vpn.Domain
@using Hncore.Infrastructure.Extension
@using ViewComponents
@model List<ProductAccountEntity>
@{
    Layout = "_UserLayout";
}

<script type="text/javascript">
    $(function () {
         let realverify = {
            cookie:document.cookie,
        }
        $.ajax({
            type: 'POST',
            async:false,
            url: 'https://php-api.juip.com/api/Realname/index',
            dataType: "json",
            contentType: "application/json",
            data: JSON.stringify(realverify),
            beforeSend: function(xhr) {
                xhr.withCredentials = true;
            },
            crossDomain: true,
            success: function (res) {
                if (res.Code == -10000) {
                    alert('接主管部门要求，会员需要实名认证方可使用该产品，点击确定前往 用户主页、个人信息 实名认证。。');
                    window.location.href="/User/IndexInfo"; 
                }
            }
        });
    })
</script>
<style> 

    .bg_blue {
        background-color: #2955b3;
        color:white;
    }
</style>
</script>
    <div id="app">
        @*<div class="qq">
            <img src="~/m/img/smile.png"> 为给您带来更好的服务体验，请完善QQ号和微信号
        </div>*@

        
        
        <div class="chaxun2">
            <p style="text-align:center;color:white;">筛选功能已优化完成，可正常使用，更加便捷。</p>
            <div class="row shaixuan">
                
            <div class="col-sm-4 col-xs-4">
                <select v-model="searchModel.ExpiredDay" @@change="search">
                    <option disabled :value="0">选择过期时间</option>
                    <option :value="-100">全部</option>
                    <option :value="1">1天内到期</option>
                    <option :value="3">3天内到期</option>
                    <option :value="7">一周内到期</option>
                    <option :value="10">10天内到期</option>
                    <option :value="-1">已经到期1天内</option>
                    <option :value="-3">已经到期3天内</option>
                    <option :value="-4">已经到期3天以上</option>
                    <option :value="-5">全部未过期</option>
                    <option :value="-6">全部已过期</option>
                </select>
            </div>
            <div class="col-sm-4 col-xs-4">
                <select @@change="search" v-model="searchModel.ProductId">
                    <option value="0">全部产品</option>
                    <option v-for="item in productWithPackage" :value="item.Product.Id">{{item.Product.Name}}</option>
                </select>
            </div>
            <div class="col-sm-4 col-xs-4">
                <select @@change="search" v-model="searchModel.PackageId">
                   <option value="0">全部套餐</option>
                    <option value="测试卡">测试卡</option>
                    <option value="天卡">天卡</option>
                    <option value="周卡">周卡</option>
                    <option value="月卡">月卡</option>
                    <option value="月卡(活动)">月卡(活动)</option>
                    <option value="双月卡(活动)">双月卡(活动)</option>
                    <option value="季卡">季卡</option>
                    <option value="季卡(活动)">季卡(活动)</option>
                    <option value="年卡">年卡</option>
                </select>
            </div>
        </div>
            
        </div>
        

        <div class="chaxun2" style="background-color: white;margin-top:0;">
            <input type="text" v-model="searchModel.Keyword" placeholder="账号" /><button type="button" class="btnOrange" v-on:click="search">查询</button>
        </div>

        

        <table border="0" cellspacing="0" cellpadding="0" class="orderTable">
            <tr>
                <th><input type="checkbox" name="" id="checkAll" value="" style="width: 0.4rem;height: 0.4rem;" /></th>
                <th>套餐</th>
                <th>账号密码</th>
                <th>操作</th>
            </tr>
            @foreach (var item in Model)
            {
            @if (@item.RestTime == "已过期") {
                <tr style="color:red">
                    <td><input type="checkbox" class="selectAccount" value="@item.Account"  a-package="@(item.PackageName)" a-status="@(item.Status)" a-pid="@(item.ProductId)" a-connectCount="@item.ConnectCount" a-aType="@item.AccountType" style="width: 0.4rem;height: 0.4rem;" /></td>
                    <td>@item.ProductName/@item.PackageName</td>
                    <td>@item.Account <a style="cursor:pointer;" v-on:click="copyText('@item.Account')">复制</a><br>@item.Pwd <a style="cursor:pointer;" v-on:click="copyText('@item.Pwd')">复制</a></td>
                    <td>
                        <button type="button" class="btnXq toDetail"
                                a-Id="@item.Id"
                                a-UserCode="@item.UserCode"
                                a-ProductName="@item.ProductName"
                                a-PackageName="@item.PackageName"
                                a-Account="@item.Account"
                                a-Pwd="@item.Pwd"
                                a-ConnectCount="@item.ConnectCount"
                                a-StartTime='@item.StartTime.Value.ToString("yyyy.M.dd H:m")'
                                a-EndTime='@item.EndTime.Value.ToString("yyyy.M.dd H:m")'
                                a-RestTime="@item.RestTime"
                                a-Remark="@item.Remark"
                                a-Raw="@item.Raw">
                            详情
                        </button>
                        <a class="btnXq" asp-action="OnLine" asp-controller="User" asp-route-productId="@item.ProductId" asp-route-account="@item.Account">
                            <button type="button" class="btnXq" style="margin-top:3px">查看在线</button> 
                        </a>
                        <a class="btnXq" v-if="@item.ProductId==19||@item.ProductId==13||@item.ProductId==1||@item.ProductId==17" href="/User/AssignAddress?productId=@item.ProductId&account=@item.Account&password=@item.Pwd">
                            <button type="button" class="btnXq" style="margin-top:3px">选择地区</button> 
                        </a>
                    
                    </td>
                </tr>
            } else {
                <tr>
                    <td><input type="checkbox" class="selectAccount" value="@item.Account" a-status="@(item.Status)" a-pid="@(item.ProductId)" a-connectCount="@item.ConnectCount" a-aType="@item.AccountType" style="width: 0.4rem;height: 0.4rem;" /></td>
                    <td>@item.ProductName/@item.PackageName</td>
                    <td> <a style="cursor:pointer;" v-on:click="copyText('@item.Account')">复制</a><br>@item.Pwd <a style="cursor:pointer;" v-on:click="copyText('@item.Pwd')">复制</a></td>
                    <td>
                        <button type="button" class="btnXq toDetail"
                                a-Id="@item.Id"
                                a-UserCode="@item.UserCode"
                                a-ProductName="@item.ProductName"
                                a-PackageName="@item.PackageName"
                                a-Account="@item.Account"
                                a-Pwd="@item.Pwd"
                                a-ConnectCount="@item.ConnectCount"
                                a-StartTime='@item.StartTime.Value.ToString("yyyy.M.dd H:m")'
                                a-EndTime='@item.EndTime.Value.ToString("yyyy.M.dd H:m")'
                                a-RestTime="@item.RestTime"
                                a-Remark="@item.Remark"
                                a-Raw="@item.Raw">
                            详情
                        </button>
                        <a class="btnXq" asp-action="OnLine" asp-controller="User" asp-route-productId="@item.ProductId" asp-route-account="@item.Account">
                            <button type="button" class="btnXq" style="margin-top:3px">查看在线</button> 
                        </a>
                        <a class="btnXq" v-if="@item.ProductId==19||@item.ProductId==13||@item.ProductId==1||@item.ProductId==17" href="/User/AssignAddress?productId=@item.ProductId&account=@item.Account&password=@item.Pwd">
                            <button type="button" class="btnXq" style="margin-top:3px">选择地区</button> 
                        </a>
                    
                    </td>
                </tr>
            }
            } 
        </table>
        @*<div  class="fenye" style="margin-top: -210px;margin-bottom: 200px;">
            @await Component.InvokeAsync("Pager", new PagerModel() { Total = Model.RowCount, PageIndex = this.Context.Request.GetInt("PageIndex") })
        </div>*@

        <div class="bottomBar">
            <button type="button" class="btnXu btn-rebuy"><img src="~/m/img/xufei.png">续费</button><button type="button" class="btnTui btn-refund"><img src="~/m/img/tui.png">退货</button>
        </div>

        <!-- 认证弹窗 -->
        <div class="renzhengMask">
            <div class="renzhenKuang">
                <img src="~/m/img/close.png" class="renzhengClose">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs renzhengTab" role="tablist">
                    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">单个认证</a></li>
                    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">批量认证</a></li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="home">
                        <div class="renzhengModel">
                            <div class="item">
                                选择产品
                            </div>
                            <div class="item chooseCp">
                                <select v-model="oneAuthModel.ProductId">
                                    <option v-for="item in productWithPackage" :value="item.Product.Id">{{item.Product.Name}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="renzhengModel">
                            <div class="item">
                                输入账号
                            </div>
                            <div class="item renzhengInput">
                                <input type="text" v-model="oneAuthModel.Account" />
                            </div>
                        </div>
                        <div class="renzhengModel">
                            <div class="item">
                                验证密码
                            </div>
                            <div class="item renzhengInput">
                                <input type="text" v-model="oneAuthModel.Pwd" />
                            </div>
                        </div>
                        <p class="btnRz" v-on:click="accountOneAuth">认证账号</p>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="profile">

                        <div class="renzhengModel">
                            <div class="item">
                                选择产品
                            </div>
                            <div class="item chooseCp">
                                <select v-model="mutilAuthModel.ProductId">
                                    <option v-for="item in productWithPackage" :value="item.Product.Id">{{item.Product.Name}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="renzhengModel">
                            <div class="item">
                                账号前缀
                            </div>
                            <div class="item renzhengInput">
                                <input type="text" v-model="mutilAuthModel.Account" />
                            </div>
                        </div>
                        <div class="renzhengModel">
                            <div class="item">
                                开始数
                            </div>
                            <div class="item renzhengInput">
                                <input type="number" v-model="mutilAuthModel.StartNum" />
                            </div>
                        </div>
                        <div class="renzhengModel">
                            <div class="item">
                                认证个数
                            </div>
                            <div class="item renzhengInput">
                                <input type="number" v-model="mutilAuthModel.Count" />
                            </div>
                        </div>
                        <div class="renzhengModel">
                            <div class="item">
                                验证密码
                            </div>
                            <div class="item renzhengInput">
                                <input type="text" v-model="mutilAuthModel.Pwd" />
                            </div>
                        </div>
                        <p v-if="mutilAuthLoading" style="margin:8px;color:red;text-align:center">认证中,请耐心等待...</p>
                        <p class="btnRz" v-on:click="accountMutilAuth">认证账号</p>
                    </div>

                </div>
            </div>
        </div>

        <!-- 弹窗详情 -->
        <div class="layerTable">
            <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td>用户：</td>
                    <td>{{currentAccount.UserCode}}</td>
                </tr>
                <tr>
                    <td>产品：</td>
                    <td>{{currentAccount.ProductName}}</td>
                </tr>
                <tr>
                    <td>套餐：</td>
                    <td>{{currentAccount.PackageName}}</td>
                </tr>
                <tr>
                    <td>账号：</td>
                    <td>{{currentAccount.Account}}</td>
                </tr>
                <tr>
                    <td>密码：</td>
                    <td>{{currentAccount.Pwd}}</td>
                </tr>
                <tr>
                    <td>ip地址:</td>
                    <td>{{currentAccount.Remark}}<a v-on:click="change_ip(currentAccount.Id,currentAccount.PackageName,currentAccount.Account,currentAccount.Remark)" data-toggle="modal" data-target="#change_ip_city">切换</a></td>
                </tr>
                <tr>
                    <td>服务器：</td>
                    <td>{{currentAccount.Raw}}</td>
                </tr>
                <tr>
                    <td>连接数：</td>
                    <td>{{currentAccount.ConnectCount}}</td>
                </tr>
                <tr>
                    <td>开通时间：</td>
                    <td>{{currentAccount.StartTime}}</td>
                </tr>
                <tr>
                    <td>到期时间：</td>
                    <td>{{currentAccount.EndTime}}</td>
                </tr>
                <tr>
                    <td>剩余时间：</td>
                    <td>{{currentAccount.RestTime}}</td>
                </tr>
            </table>
            <div class="back">
                <img src="~/m/img/arrowback.png"> 返回列表
            </div>
        </div>

         <!-- /切换地区 -->
    <div class="modal fade" id="change_ip_city" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document" style="width:80%">
            <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">水滴切换地区和ip</h4>
            </div>
            <div class="modal-body">

                <ul id="myTab" class="nav nav-tabs">
                    <li class="active">
                        <a href="#city" data-toggle="tab">
                            切换地区
                        </a>
                    </li>
                    <li><a href="#ip" v-on:click="selsect_ip()" data-toggle="tab">切换IP</a></li>
                </ul>

                <div id="myTabContent" class="tab-content" style="padding-top:30px;">
                    <div class="tab-pane fade in active" id="city">
                        <div class="row ">
                            <div class="col-sm-3 text-center" style="height:470px;overflow:auto;overflow-x: hidden;">
                                <label style="border:1px solid #00a63f;padding:3px;width:100%;margin:2px;"><input name="allprovince" @@change="select_all_province()" type="checkbox"> 全部</label>
                                <label v-for="(item,index) in province_city.province_surplus_outs" :key="index" style="border:1px solid #00a63f;padding:3px;width:100%;margin:2px"><input v-model="province" name="province" :value="index" type="checkbox"  @@change="select_province()">{{item.en_name}}({{item.total}})</label>
                            </div>
                            <div class="col-sm-9" style="font-size:13px;height:453px;overflow:auto;">
                                <div class="col-sm-4 diqu" v-for="(item,index) in citys" :key="index" :class="'select_addr'+index" v-on:click="selsect_adddr_num(item.province+'-'+item.rid+'-100',index)" style="padding:5px;">
                                    <div style="border:1px solid #ddd;padding:5px;">
                                        <p v-if="item.isp_class == 0" style="padding:0;margin:0;white-space: nowrap;overflow:hidden;"><span class="glyphicon glyphicon-asterisk " style="color:#00a63f;overflow:hidden;"></span>[多线]{{item.name}}</p>
                                        <p v-else-if="item.isp_class == 1" style="padding:0;margin:0;white-space: nowrap;overflow:hidden;"><span class="glyphicon glyphicon-asterisk " style="color:#00a63f;overflow:hidden;"></span>[电信]{{item.name}}</p>
                                        <p v-else-if="item.isp_class == 2" style="padding:0;margin:0;white-space: nowrap;overflow:hidden;"><span class="glyphicon glyphicon-asterisk " style="color:#00a63f;overflow:hidden;"></span>[联通]{{item.name}}</p>
                                        <p v-else-if="item.isp_class == 3" style="padding:0;margin:0;white-space: nowrap;overflow:hidden;"><span class="glyphicon glyphicon-asterisk " style="color:#00a63f;overflow:hidden;"></span>[移动]{{item.name}}</p>
                                        <p v-else style="padding:0;margin:0;white-space: nowrap;overflow:hidden;"><span class="glyphicon glyphicon-asterisk " style="color:#00a63f;overflow:hidden;"></span>[未知]{{item.name}}</p>
                                        <hr style="margin:0;">
                                        <p style="padding:0;margin:0;">余量:{{item.total}} 延迟:{{item.ping}}ms</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="ip" >
                        <p style="font-weight:bold;">当前IP：{{old_ip}}</p>
                        <p style="font-weight:bold;">
                            <select class="form-control " v-model="change_info.chinge_ip.ip_id" style="height:50px;font-size:15px;width:30%;">
                                <option value="0">-请选择-</option>
                                <option v-for="item in ip_list" :value="item.id">{{item.address}}</option>
                            </select>
                        </p>
                    </div>
                </div>

                
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button"  v-on:click="change_submit()" class="btn btn-primary">确定</button>
            </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->


        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="width: 100%;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">温馨提示:请选择退款原因</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 text-center">
                            <button type="button" style="width:200px;" v-on:click="refund_reason('连接不上')" class="btn btn-info btn-lg">连接不上</button>
                        </div>
                        <br>
                        <div class="col-md-6 text-center">
                            <button type="button" style="width:200px;" v-on:click="refund_reason('网速慢')" class="btn btn-info btn-lg">网速慢</button>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-md-6 text-center">
                            <button type="button" style="width:200px;" v-on:click="refund_reason('稳定性差')" class="btn btn-info btn-lg">稳定性差</button>
                        </div>
                        <br>
                        <div class="col-md-6 text-center">
                            <button type="button" style="width:200px;" v-on:click="refund_reason('IP太少')" class="btn btn-info btn-lg">IP太少</button>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-md-6 text-center">
                            <button type="button" style="width:200px;" v-on:click="refund_reason('想换用其他产品')" class="btn btn-info btn-lg">想换用其他产品</button>
                        </div>
                        <br>
                        <div class="col-md-6 text-center">
                            <button type="button" style="width:200px;" v-on:click="refund_reason(false)" class="btn btn-info btn-lg">暂时用不到了</button>
                        </div>
                    </div>
                    <br>
                    <div>
                        <p style="color: red;display:none;" class="refund-info"> * 此类问题可联系专业售后客服帮助解决，解决率为95%，点击联系售后客服。</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary confirm-refund"  disabled="disabled">确定退款</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>  


    </div>



<script type="text/javascript">

    function getQueryVariable(variable)
    {
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
    }
    var reason = '';
    var app = new Vue({
        el: '#app',
        data: {
            mutilAuthLoading: false,
            productWithPackage: [],
            packages: [],
            searchModel: {
                ExpiredDay:@this.Context.Request.GetInt("ExpiredDay"),
                ProductId:@this.Context.Request.GetInt("ProductId"),
                PackageId:'0', 
                Keyword:'@this.Context.Request.Get("Keyword")',
            },
              oneAuthModel: {
                ProductId: 0,
                Account: "",
                Pwd:""
            },
            mutilAuthModel: {
                ProductId: 0,
                Account: "",
                Pwd: "",
                StartNum: 0,
                Count:0
            },
            currentAccount: {
                Id: "",
                UserCode: "",
                ProductName: "",
                PackageName: "",
                Account: "",
                Pwd: "",
                ConnectCount: "",
                StartTime: "",
                EndTime: "",
                RestTime: "",
                Remark: "",
                Raw: "",
            },
             citys:[],
            shuidi:{
                'is_unshar':0, // 0 游戏独享 1 线路独享
                'game_id':0,
                'product_id':1,//1静态 2固态 
            },
            province_city:[],
            province:[],
            change_info:{
                chinge_addr:{
                    type:0,
                    province_id:0,
                    rid:0,
                    account:'',
                },
                chinge_ip:{
                    type:0,
                    ip_id:0,
                    account:'',
                },
            },
            old_ip:'',
            ip_list:[]
        },
        computed: {

        },
        watch: {
            
        },
        mounted: function () {
            this.getProducts();
        },
        methods: {
            copyText(text) {
              // 检查浏览器是否支持 Clipboard API
              if (!navigator.clipboard) {
                // 如果不支持，则使用传统的 document.execCommand("copy") 方式
                const textArea = document.createElement("textarea");
                textArea.value = text;
                textArea.style.position = "fixed";
                document.body.appendChild(textArea);
                textArea.focus();
                textArea.select();
                document.execCommand("copy");
                document.body.removeChild(textArea);
                return;
              }
             
              // 使用 Clipboard API 复制内容到剪切板
              navigator.clipboard.writeText(text).then(
                function() {
                  console.log("复制成功");
                },
                function() {
                  console.log("复制失败");
                }
              );
            },
            change_ip(account_id,package,account,old_ip){
                this.province_city = [];
                let data = {
                    cookie:document.cookie,
                    data: account_id
                }

                this.old_ip = old_ip
                
                var pack = package.split('-');
                if (pack[0] == '静态') {
                    this.shuidi.product_id = 0;
                } else {
                    this.shuidi.product_id = 1;
                }

                this.change_info.chinge_addr.account = account;
                this.change_info.chinge_ip.account = account;
                this.change_info.chinge_addr.type = this.shuidi.product_id;
                this.change_info.chinge_addr.province_id = 0;
                this.change_info.chinge_addr.rid = 0;
                this.change_info.chinge_ip.type = this.shuidi.product_id;
                this.change_info.chinge_ip.ip_id = 0;

                var that = this
               
                $.ajax({
                    type: 'POST',
                    url: 'https://php-api.juip.com/jinyou/jinyoujt/address_margin',
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    beforeSend: function(xhr) {
                        xhr.withCredentials = true;
                    },
                    crossDomain: true,
                    success: function (res) {
                        that.province_city = res.data.region
                    }
                });
                

                for (var i in this.province_city.province_surplus_outs) {
                    this.province.push(i);
                    this.citys = this.citys.concat(this.province_city.province_surplus_outs[i].citys);
                }
            },
            selsect_ip(){
                let data = {
                    cookie:document.cookie,
                    data: this.change_info.chinge_ip
                }

                var that = this
               
                $.ajax({
                    type: 'POST',
                    url: 'https://php-api.juip.com/jinyou/jinyoujt/change_ip_list',
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    beforeSend: function(xhr) {
                        xhr.withCredentials = true;
                    },
                    crossDomain: true,
                    success: function (res) {
                        that.ip_list = res.data
                    }
                });

            },
            select_province() {
                this.citys = [];
                for (var i in this.province_city.province_surplus_outs) {
                    if (this.province.includes(i)) {
                        this.citys = this.citys.concat(this.province_city.province_surplus_outs[i].citys);
                    }
                }
            },
            select_all_province() {
                var checkboxes = document.querySelector('input[name="allprovince"]');

                if (checkboxes.checked) {
                    for (var i in this.province_city.province_surplus_outs) {
                        this.province.push(i);
                        this.citys = this.citys.concat(this.province_city.province_surplus_outs[i].citys);
                    }
                } else {
                    this.province = [];
                    this.citys = [];
                }
            },
            
            selsect_adddr_num(addr_id,index) {
                
                for(it in this.citys) {
                    $(".select_addr"+it).removeClass("bg_blue");
                }
                var addr = addr_id.split('-');
                
                this.change_info.chinge_addr.province_id = addr[0];
                this.change_info.chinge_addr.rid = addr[1];
                $(".select_addr"+index).addClass("bg_blue");
            },
            change_submit() {
                let data = {
                    cookie:document.cookie,
                    data: this.change_info
                }

               
                $.ajax({
                    type: 'POST',
                    url: 'https://php-api.juip.com/jinyou/jinyoujt/change_ip',
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    beforeSend: function(xhr) {
                        xhr.withCredentials = true;
                    },
                    crossDomain: true,
                    success: function (res) {
                        alert('切换成功');
                        $('#change_ip_city').modal('hide')
                    }
                });
            },
            initPackages: function () {
                var productId = this.searchModel.ProductId;
                if (productId == 0) return;
                for (var i = 0; i < this.productWithPackage.length; i++) {
                    var item = this.productWithPackage[i];
                    if (item.Product.Id == productId) {
                        this.packages = item.Packages
                        return;
                    }
                }
            },
            getProducts() {
                if(decodeURIComponent(getQueryVariable('PackageId'))!='false'){
                    this.searchModel.PackageId = decodeURIComponent(getQueryVariable('PackageId'))
                } else {
                    this.searchModel.PackageId = '0'
                }
                var that = this;
                $.ajax({
                    type: 'GET',
                    url: '/api/course/v1/product/ProductWithPackage',
                    success: function (res) {
                        if (res.Code == 10000) {
                            that.productWithPackage = res.Data;
                            that.initPackages();
                        }
                    }
                });
            },

            search() {
                var ps = [];
                for (var item in this.searchModel) {
                    if (this.searchModel[item]!=0 && this.searchModel[item] != 'false' && this.searchModel[item]!=null){
                        var p = item + "=" + this.searchModel[item];
                        ps.push(p);
                    }
                }
                window.location.href = "?" + ps.join("&");
            },
            accountOneAuth() {
                if (this.oneAuthModel.ProductId ==0) {
                    alert('请选择产品')
                    return;
                }
                if (this.oneAuthModel.Account == '' || this.oneAuthModel.Pwd == '') {
                    alert('账号和密码不能为空')
                    return;
                }
                $.ajax({
                    type: 'POST',
                    url: '/user/OrginAccountAuth',
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(this.oneAuthModel),
                    success: function (res) {
                        console.log(res);
                        if (res.Code == 10000) {
                            alert('认证成功')
                            window.location.reload();
                        } else {
                            alert(res.Message)
                        }
                    }
                });
            },
            accountMutilAuth() {
                if (this.mutilAuthModel.ProductId == 0) {
                    alert('请选择产品')
                    return;
                }
                if (this.mutilAuthModel.Account == '' || this.mutilAuthModel.Pwd == '') {
                    alert('账号和密码不能为空')
                    return;
                }
                if (this.mutilAuthLoading) return;
                this.mutilAuthLoading = true;
                var that = this;
                $.ajax({
                    type: 'POST',
                    url: '/user/OrginAccountAuth',
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(this.mutilAuthModel),
                    success: function (res) {
                    that.mutilAuthLoading = false;
                        console.log(res);
                        if (res.Code == 10000) {
                             alert('认证成功')
                            window.location.reload();
                        } else {
                            alert(res.Message)
                        }
                    }
                });
            },
            setAccountInfo(info) {
                this.currentAccount = info;
            },
            refund_reason(reason_info){
                if(reason_info){
                    $(".refund-info").show();
                    reason = reason_info;
                } else {
                    $(".refund-info").hide();
                    reason = '暂时用不到了';
                }
                $(".confirm-refund").removeAttr('disabled');
            }
        }
    })
    function showDetail(_self) {
        var currentOrder = {
            Id: $(_self).attr('a-Id'),
            UserCode: $(_self).attr('a-UserCode'),
            ProductName: $(_self).attr('a-ProductName'),
            PackageName: $(_self).attr('a-PackageName'),
            Account: $(_self).attr('a-Account'),
            Pwd: $(_self).attr('a-Pwd'),
            ConnectCount: $(_self).attr('a-ConnectCount'),
            StartTime: $(_self).attr('a-StartTime'),
            EndTime: $(_self).attr('a-EndTime'),
            RestTime: $(_self).attr('a-RestTime'),
            Remark: $(_self).attr('a-Remark'),
            Raw: $(_self).attr('a-Raw'),
        }
        app.setAccountInfo(currentOrder);
        $(_self).show();
    }
    $(function () {
         //退款
        function caclRefund(account,refundFun) {
            $.ajax({
                type: 'GET',
                url: '/api/course/v1/order/CaclRefund?account=' + account,
                success: function (res) {
                    console.log(res);
                    if (res.Code == 10000) {
                        var msg =res.Data.info +",确定要退款吗？"
                        if (!confirm(msg)) { return; }
                        refundFun(account);
                    } else {
                        alert(res.Message)
                    }
                }
            });
        }
       function refund(account) {
          $.ajax({
                type: 'GET',
                url: '/api/course/v1/order/Refund?account=' +account + "-" + reason,
                success: function (res) {
                    if (res.Code == 10000) {
                        alert('退款成功')
                        window.location.reload()
                    } else {
                        alert(res.Message)
                    }
                }
            });
        }
        $(".confirm-refund").on('click', function () {
            var accounts = [];
            $.each($('input:checkbox:checked'), function () {
                accounts.push($(this).val())
            });
            
            $('#myModal').modal('hide'); 
            caclRefund(accounts[0],refund)
        })

        $(".btn-refund").on('click', function () {
            var accounts = [];
            $.each($('input:checkbox:checked'), function () {
                accounts.push($(this).val())
            });
            if (accounts.length >1) { alert('一次只能退款一个账号'); return; }
            if (accounts.length == 0) { alert('请选择账号'); return; }
            $('#myModal').modal('show');
        })

        function isSame(data, property) {
            if (data.length == 0) return true;
            var first = data[0];
            for (var i = 1; i < data.length; i++) {
                var item = data[i];
                if (first[property] != item[property])
                    return false;
            }
            return true;
        }

        //续费
        $(".btn-rebuy").on('click', function () {
            var accounts = [];
            var accountModels = [];
            var isTest = false
            var isrefund = false;
            var product_type_shuidi = '';//0:静态 1：固态
            var flag = 0;
            $.each($('input:checkbox:checked'), function () {
                var ppip = $(this).attr('a-pid');
                if (ppip == '28') {
                    var type = $(this).attr('a-package').split('-')[0];
                    if (product_type_shuidi != '') {
                        if (product_type_shuidi != type) {
                            flag = 1;
                        }
                    } else {
                        product_type_shuidi = type;
                    }
                }
                var account = $(this).val();
                if (account) {
                    var accountItem = {
                        account: account,
                        pid: $(this).attr('a-pid'),
                        connectCount: $(this).attr('a-connectCount'),
                        isTest: $(this).attr('a-aType') == 200
                    }
                    accountModels.push(accountItem)
                    accounts.push(account)
                    if (accountItem.isTest) isTest = true;
                    var status = $(this).attr('a-status');
                    if (status == 'Refund') {
                        isrefund = true;
                        return;
                    }
                }

            });
            if (flag)  {
                alert('静态、固态不同类型无法续费！');
                return;
            }
            if (accountModels.length == 0) { alert('请选择账号'); return; }
            if (!isSame(accountModels, 'pid')) { alert('必须选择相同的产品'); return; }
            if (!isSame(accountModels, 'connectCount')) { alert('必须选择相同的连接数'); return; }
            if (isTest) { alert('测试账号暂不支持续费，请新开正式账号'); return; }
            if (isrefund) { alert('退款账号暂不支持续费，请新开正式账号'); return; }
            window.location.href = "/product/rebuyindex?productId=" + accountModels[0].pid + "&accounts=" + accounts.join(",");
        })


        $(".toDetail").click(function () {
            showDetail($(this))
            $(".layerTable").show();
        });
        $(".back").click(function () {
            $(".layerTable").hide();
        })
        $(".btnRenzheng").click(function () {
            $(".renzhengMask").show();
        });
        $(".renzhengClose").click(function () {
            $(".renzhengMask").hide();
        });
        $("#checkAll").on('click', function () {
            console.log($(this).prop("checked"), "check")
            $("td > input:checkbox").prop("checked", $(this).prop("checked"))
        })
    });
</script>