@using Home.Models
@using Hncore.Pass.BaseInfo.Response
@using Hncore.Pass.Vpn.Model 
@using Hncore.Infrastructure.Extension
@model List<OriginAccountOnlineModel>
@{
    Layout = "_Layout";
    var productId = this.Context.Request.GetInt("productId");
}
<style type="text/css">

    body {
        background: #f5f5f5;
    }

    .checkbox {
        margin-left: 1rem;      
        margin-top: 2rem;   
        height: calc(85vh); 
        overflow: auto;  
    }
    .form-control  {
        height: 50px;
        font-size: 25px;
        width: 90%;
    }

    .citylabel {
        font-weight: normal;
        width: 300px;
        height: 50px;
        padding-left: 5px;
        padding-top: 5px;
        text-align: left;
        border: solid 1px #ccc;
    }  
    .citylabel>span{
        padding-left: 50px;
        display: block;
        float: left;
    }
    .radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] {
        position:none;
        margin-left: 10px;
        width: 25px;
        height: 25px;
    }
    .btn {
        height: 50px;
        width: 90%;
        font-size: 25px;
    } 
    .province{
        margin-bottom: 10px;
    }
</style>
<vc:redirecct-login></vc:redirecct-login>
<div  id="app" >
    <div class="checkbox">
        <div id="jike">
            <label style="width: 90%;margin-left: 0.3rem;"  v-for="(item,index) in assign_add_list">
                <input type="checkbox" style="height: 0.3rem;width: 0.3rem;" v-model="assign_list" :value="item.name+'-'+item.id"/>&nbsp;&nbsp;<span v-if="item.status ==2">{{item.name}}</span><span v-if="item.status ==1" style="color: red;">{{item.name}}</span>
            </label>
            <br>
            <br>
            <br>
        </div>
        <div id="huohu">
            加载中，请稍后...
        </div>
    </div>
    <div style="text-align: center;height:calc(5vh);margin-top:0.2rem;">
        <button type="button" class="btnTui btn-refund" v-on:click="selectAddAssign()">确定选择</button>
    </div>
</div>
<script>
    $(function(){
        let product_id = getQueryVariable('productId'),
            account = getQueryVariable('account'),
            pass = getQueryVariable('password');

        if(product_id != 13&&product_id != 19) {
            alert('目前仅支持极客、火狐产品！');
            window.location.href = "/User/MyAccounts";
        }

        var app = new Vue({
        el: '#app',
        data: {
            assign_add_list:[],
            assign_list:[],
            assign_account:'',
            assign_pass:'',
        },
        mounted: function () {
              this.assign_address();
         },
        methods: {
            assign_address () {
                var that = this;      
                this.assign_account = account;     
                this.assign_pass = pass;     
                if(product_id == 13){  
                    $("#jike").show(); 
                    $("#huohu").hide();    
                    $.ajax({
                        type: 'GET',
                        url: 'http://php-api.juip.com/product/AccountAddress/index?user='+account+'&password='+pass,
                        dataType: "json",
                        contentType: "application/json",
                        success: function (res) {
                            that.assign_add_list = res;
                            //if (res.Code == 10000) {
                            //    that.onLineData = res.Data;
                            //    for (var i = 0; i < that.onLineData.length; i++) {
                            //        that.onLineData[i].ProductId = productId;
                            //    }
                            //}
                        }
                    });
                }
                if(product_id == 19){  
                    $("#huohu").show(); 
                    $("#jike").hide(); 
                    $.ajax({
                        type: 'GET',
                        url: 'http://php-api.juip.com/product/AccountAddress/getList?user='+account+'&password='+pass,
                        dataType: "json",
                        contentType: "application/json",
                        success: function (res) {
                            $("#huohu").html('<p style="font-size:30px;">统一服务器地址：1.hhip.vip</p>');
                            $("#huohu").append(res.ipmodel);
                            $("#huohu").append("<hr>");
                            $("#huohu").append(res.city);
                            
                        }
                    });
                }
            },
            selectAddAssign() {
                if(product_id == 13){  
                    if(this.assign_list.length>20||this.assign_list.length==0){
                        alert('最多选择20个，至少选择一个！');
                        return;
                    }
                    let data = {
                        list:this.assign_list,
                        account:this.assign_account,
                        password:this.assign_pass,
                    }
                    $.ajax({
                        type: 'POST',
                        url: 'http://php-api.juip.com/product/AccountAddress/select',
                        dataType: "json",
                        data:JSON.stringify(data),
                        contentType: "application/json",
                        success: function (res) {
                            if(res.code == 1){
                                alert('选择成功');
                            } else {
                                alert('选择失败');
                            }
                            //if (res.Code == 10000) {
                            //    that.onLineData = res.Data;
                            //    for (var i = 0; i < that.onLineData.length; i++) {
                            //        that.onLineData[i].ProductId = productId;
                            //    }
                            //}
                        }
                    });
                }
                if(product_id == 19){ 
                    let address_checked = [];
                    $("input[name='citys[]']:checked").each(function(i){
                        address_checked.push($(this).val());
                    });
                    let ipmode = $("select[name='ipmode']").val();
                    console.log(address_checked)
                    console.log(ipmode)

                    let data = {
                        list:address_checked,
                        account:this.assign_account,
                        password:this.assign_pass,
                        ipmode:ipmode,
                    }
                    $.ajax({
                        type: 'POST',
                        url: 'http://php-api.juip.com/product/AccountAddress/setAddress',
                        dataType: "json",
                        data:JSON.stringify(data),
                        contentType: "application/json",
                        success: function (res) {
                            if(res.code == 1){
                                alert('选择成功');
                            } else {
                                alert('选择失败');
                            }
                            //if (res.Code == 10000) {
                            //    that.onLineData = res.Data;
                            //    for (var i = 0; i < that.onLineData.length; i++) {
                            //        that.onLineData[i].ProductId = productId;
                            //    }
                            //}
                        }
                    });
                }
            },
        }
        })
    });
    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);
    }
</script>