@using Hncore.Pass.Vpn.Response.Product
@using Hncore.Infrastructure.Extension
@using Hncore.Pass.BaseInfo.Response
@using Hncore.Infrastructure.Serializer;
@using Hncore.Pass.BaseInfo.Service
@using Hncore.Infrastructure.Common

@model PackageInfoResponse
@inject UserService m_UserService
@inject Hncore.Pass.Vpn.Service.ProductAccountService m_AccountService
@{
    ViewData["Title"] = "购买产品";
    UserLoginModel user = null;
    Hncore.Pass.BaseInfo.Models.User userEntity = new Hncore.Pass.BaseInfo.Models.User();
    if (this.Context.Request.Cookies.TryGetValue("userInfo", out string userCookie))
    {
        user = userCookie.FromJsonTo<UserLoginModel>();
        userEntity = await m_UserService.GetById(user.Id);
    }

    var randomPwd = ValidateCodeHelper.MakeNumCode(3).ToLower();
    var randomAccount1 = ValidateCodeHelper.MakeCharCode(2).ToLower() + ValidateCodeHelper.MakeNumCode(4).ToLower();

    @* while (m_AccountService.Exist(m => m.Account == randomAccount1)) {
        randomAccount1 = ValidateCodeHelper.MakeCharCode(2).ToLower() + ValidateCodeHelper.MakeNumCode(4).ToLower();
    } *@

    var randomAccountMutil = ValidateCodeHelper.MakeCharCode(3).ToLower();

    var product_id = Model.Product.Id;
    if (product_id == 20 ||product_id == 21||product_id == 26||product_id == 27) {
        randomAccount1 = ValidateCodeHelper.MakeCharCode(2).ToLower() + ValidateCodeHelper.MakeNumCode(5).ToLower();
        randomAccountMutil = ValidateCodeHelper.MakeCharCode(6).ToLower();
        randomPwd = ValidateCodeHelper.MakeNumCode(6).ToLower();
    }

    @* while (m_AccountService.Exist(m =>m.Account.StartsWith(randomAccountMutil)))
    {
        randomAccountMutil = ValidateCodeHelper.MakeCharCode(3).ToLower();
    } *@
}
<script src="~/js/vue.js"></script>
<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/Index"; 
                }
            }
        });

        $('.spinner .btn:first-of-type').on('click', function () {
            $('.spinner input').val(parseInt($('.spinner input').val(), 10) + 1);
            });
        $('.spinner .btn:last-of-type').on('click', function () {
            $('.spinner input').val(parseInt($('.spinner input').val(), 10) - 1);
            });

        $(".dan").addClass("cu");
        $(".dan").click(function () {
            $(this).addClass("cu");
            $(".pi").removeClass("cu");
            $(".t1").show();
            $(".t2").hide();
            });
        $(".pi").click(function () {
            $(this).addClass("cu");
            $(".dan").removeClass("cu");
            $(".t1").hide();
            $(".t2").show();
            })
    })
</script>
<vc:pay-wait></vc:pay-wait>
<vc:pay-ok></vc:pay-ok>
<div class="container-fluid top">
    <div class="container" style="padding-top: 20px;">
        <div class="row">
            <div class="col-lg-3 text-right">
                当前已选产品：
            </div>
            <div class="col-lg-6" >
                <div>
                        <div style="float:left; font-size: 25px; font-weight: bold;    color: #ee7a69;"><span style="color:black;">
                            @Model.Product.Name - @Model.Package.Name </span> &nbsp;

                        @if(Model.Package.Price < 60 && (Model.Package.Id == 64||Model.Package.Id == 1004)){
                            <div style="float:right;">￥60.00</div>
                        } else {
                            @if (Model.Package.IsTest == 0) {
                                <div style="float:right;">￥@Model.Package.Price 元</div>
                            } else {
                                <div style="float:right;">￥1.0元</div>
                            }
                        }
                        </div>
                </div>
                <br><br>
                <p class="tishi tishika" style="text-align:left;padding:0;">*请务必选好所需商品，换货会产生费用</p>
                @if (Model.Package.Name == "天卡")
                {
                    <p class="tishi " style="text-align:left">*天卡不支持退款，请谨慎购买</p>
                }
            </div>
            <div class="col-lg-3 ">
                <a href="javascript:history.go(-1)">返回重新选择》</a>
            </div>
        </div>
    </div>
</div>

<div id="app">
    <!-- con -->
    @if (Model.Package.IsTest == 0) {
    <div class="container zhuce">
        <div class="reg_tab">
            <div class="item dan active_dan">
                单个注册
            </div>
            <div v-if="OnePayAmount != 0.1" class="item pi">
                批量注册
            </div>
        </div>
    </div>
    }
    <div class="container t1" style="font-size: 18px;font-weight: bold;">
        <form action="~/product/CreateOrder" method="post" id="accountForm">
            <input type="hidden" name="PackageId" value="@Model.Package.Id" />
            <input type="hidden" name="OrderType" value="1" />
            <div class="row">
                <div class="col-lg-4 text-right">
                    IP产品账号：
                </div>
                <div class="col-lg-4 regDan">
                    <input type="text" name="Account" value="" v-model="OneBuyModel.Account" v-on:blur="checkOneAccount" />
                    @if (Model.Package.ProductId !=20 && Model.Package.ProductId !=21 && Model.Package.ProductId !=27) {
                        <p class="jinggao" v-if="!OneChecker.AccountOk">4至10位字母或数字或组合</p>
                    } else {
                        <p class="jinggao" v-if="!OneChecker.AccountOk">7至10位字母或数字或组合</p>
                    }
                </div>
                <div class="col-lg-4 text-left warnText">
                    
                    @if (Model.Package.ProductId !=20 && Model.Package.ProductId !=21 && Model.Package.ProductId !=27) {
                        <sapn class="grayText">4至10位字母或数字或组合</sapn>
                    } else {
                        <sapn class="grayText">7至10位字母或数字或组合</sapn>
                    }
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 text-right">
                    IP产品密码：
                </div>
                <div class="col-lg-4 regDan">
                    <input type="text" name="Pwd" v-model="OneBuyModel.Pwd" v-on:blur="checkOnePwd" />
                    @if (Model.Package.ProductId !=27) {
                        <p class="jinggao" v-if="!OneChecker.PwdOk">1至10位字母或数字或组合</p>
                    } else {
                        <p class="jinggao" v-if="!OneChecker.PwdOk">7至10位字母或数字或组合</p>
                    }
                </div>
                <div class="col-lg-4 text-left">
                    @if (Model.Package.ProductId !=27) {
                        <sapn class="grayText">1至10位字母或数字或组合</sapn>
                    } else {
                        <sapn class="grayText">7至10位字母或数字或组合</sapn>
                    }
                </div>
            </div>
            @if (Model.Package.IsTest == 0) {
            <div class="row">
                <div class="col-lg-4 text-right">
                    连接数：
                </div>
                <div  v-if="OnePayAmount != 0.1" class="col-lg-4">
                    <div class="buchang">
                        <input type="hidden" class="form-control ConnectCount" v-model="OneBuyModel.ConnectCount" name="ConnectCount" value="1">
                        <div class="item cursor" v-on:click="OneBuyModel.ConnectCount>1&&OneBuyModel.ConnectCount--">
                            -
                        </div>
                        <div class="item" style="min-width: 80px;">
                            <input type="text" style="width:100%;height:21px;border:0;text-align:center;" v-model="OneBuyModel.ConnectCount" />
                        </div>
                        <div class="item cursor" v-on:click="OneBuyModel.ConnectCount++">
                            +
                        </div>
                    </div>
                </div>
                <div v-if="OnePayAmount == 0.1" class="col-lg-4">
                    1
                </div>
                <div class="col-lg-4 text-left">
                    <span class="grayText">可同时在线的设备数</span>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 text-right">
                    选择优惠券：
                </div>
                <div class="col-lg-4 regDan">
                    <div class="dropdown">
                        <select style="height:40px;" name="" class="btn btn-default dropdown-toggle" v-model="OneBuyModel.CouponId" v-on:change="selectFn">
                            <option value="0">请选择优惠券</option>
                            <option v-for="item in Coupons" :value="item.Id">{{item.Name}}</option>
                        </select>
                    </div>
                </div>
                <div class="col-lg-4 text-left">
                    <span class="grayText">淘宝每次下单获得优惠券</span>
                </div>
            </div>
            }
            <div class="row" v-if="@userEntity.is_agent == 1">
                <div class="col-lg-4 text-right">
                    代理下会员号：
                </div>
                <div class="col-lg-4 regDan">
                    <input type="text" name="phone" v-model="OneBuyModel.phone" v-on:input="checkverify()"/>
                </div>
                <div class="col-lg-4 text-left">
                    <span class="grayText verify_text" style="color:red;">您下边的会员号</span>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 text-right">
                    余额：
                </div>
                <div class="col-lg-4">
                    当前账户余额<span class="blueText">@(userEntity.RestAmount)</span>元
                    <a href="/User/Index">前往充值</a>
                </div>
                <div class="col-lg-4">
                    
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 text-right">
                    支付方式：
                </div>
                <div class="col-lg-4 zhifufangshi">
                    <input id="zhifubaopay_s1" type="radio" name="OPayType" value="100" checked v-model="OneBuyModel.OPayType"> <img src="~/img/zfb.png"><label for="zhifubaopay_s1">支付宝支付</label>
                    <input id="weixinpay_s1" type="radio" name="OPayType" value="70" v-model="OneBuyModel.OPayType"> <img src="~/img/wx.png"><label for="weixinpay_s1">微信支付</label>
                    <input id="UseAccountAmount_s1" type="radio" name="OPayType" value="1" v-model="OneBuyModel.UseAccountAmount"> <label for="UseAccountAmount_s1">余额支付</label>

                </div>
                <div class="col-lg-4 text-left">
                    <span></span>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 text-right">
                    总金额：
                </div>
                <div class="col-lg-4">
                    <span class="blueText">{{OneTotalAmount}}</span>元
                </div>
                <div class="col-lg-4 text-left">
                    <span></span>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 text-right">
                    应付款：
                </div>
                <div class="col-lg-4">
                    <span style="font-size: 30px;font-weight: bold;">{{OnePayAmount}}</span>元
                    <span>{{auto_discount_text}}</span>
                </div>
                <div class="col-lg-4 text-left">
                    <span></span>
                </div>
            </div>
            <p class="tiijiao-tipjiao" style="color:red">{{Tip}}</p>
            <p class="tijiao"><button class="btn btn-primary pay-botton" type="button" v-on:click="onePay">确认支付</button></p>

        </form>
    </div>

    <div class="container t2" id="moreBuy" style="font-size: 18px;font-weight: bold;">
        <form action="~/product/CreateOrder" method="post">
            <p class="shuoming">批量注册的账号会使用【账号前缀】+【开始数】+【个数】顺序进行注册，</p>
            <p class="shuoming">如:注册账号前缀为【user】开始数为【2】个数为【10】，则注册的账号为：user2，user3，user4，....user11</p>
            <div class="row">
                <div class="col-lg-4 text-right">
                    IP账号前缀：
                </div>
                <div class="col-lg-4 regDan">
                    <input type="text" name="Account" value="" v-on:input="changeAccountCount()" v-model="MoreBuyModel.Account" />
                    @if (Model.Package.ProductId !=20 && Model.Package.ProductId !=21&& Model.Package.ProductId !=27) {
                        <p class="jinggao" v-if="!OneChecker.AccountOk">3至8位字母或数字或组合</p>
                    } else {
                        <p class="jinggao" v-if="!OneChecker.AccountOk">6至8位字母或数字或组合</p>
                    }
                </div>
                <div class="col-lg-4 text-left warnText">
                    @if (Model.Package.ProductId !=20 && Model.Package.ProductId !=21&& Model.Package.ProductId !=27) {
                        <sapn class="grayText">3至8位字母或数字或组合</sapn>
                    } else {
                        <sapn class="grayText">6至8位字母或数字或组合</sapn>
                    }
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 text-right">
                    开始号：
                </div>
                <div class="col-lg-4 regDan">
                    <input type="number" name="MinPostfix"  v-on:input="changeAccountCount()" v-model="MoreBuyModel.MinPostfix" />
                </div>
                <div class="col-lg-4 text-left">
                    <span class="grayText">本批次账号的起始账号的尾数</span>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 text-right">
                    注册个数：
                </div>
                <div class="col-lg-4 regDan">
                    <input type="number" name="MaxPostfix" v-on:input="changeAccountCount()" v-model="MoreBuyModel.MaxPostfix" />
                    <p class="jinggao" v-if="MoreBuyModel.MaxPostfix>500">一次最多注册500个</p>
                </div>
                <div class="col-lg-4 text-left">
                    <span class="grayText">本批次的账号个数</span>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 text-right">
                    即将生成的账号：
                </div>
                <div class="col-lg-8 regDan">
                    <p class="jinggao">{{acount_list}}</p>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 text-right">
                    IP产品密码：
                </div>
                <div class="col-lg-4 regDan">
                    <input type="text" name="Pwd" id="" value="" v-model="MoreBuyModel.Pwd" />
                    @if ( Model.Package.ProductId !=27) {
                        <p class="jinggao" v-if="!OneChecker.AccountOk">1至10位字母或数字或组合</p>
                    } else {
                        <p class="jinggao" v-if="!OneChecker.AccountOk">7至10位字母或数字或组合</p>
                    }
                </div>
                <div class="col-lg-4 text-left">
                    @if (Model.Package.ProductId !=27) {
                        <sapn class="grayText">1至10位字母或数字或组合</sapn>
                    } else {
                        <sapn class="grayText">7至10位字母或数字或组合</sapn>
                    }
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 text-right">
                    连接数：
                </div>
                <div class="col-lg-4">
                    <div class="buchang">
                        <input type="hidden" class="form-control" name="ConnectCount" v-model="MoreBuyModel.ConnectCount">
                        <div class="item" @@click="MoreBuyModel.ConnectCount>1&&MoreBuyModel.ConnectCount--">
                            -
                        </div>
                        <div class="item" style="min-width: 80px;">
                            <input type="text" style="width:100%;height:21px;border:0;text-align:center;" v-model="MoreBuyModel.ConnectCount" />
                        </div>
                        <div class="item" @@click="MoreBuyModel.ConnectCount++">
                            +
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 text-left">
                    <span class="grayText">可同时在线的设备数</span>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 text-right">
                    选择优惠券：
                </div>
                <div class="col-lg-4 regDan">
                    <div class="dropdown">
                        <select style="height:40px;" name="" class="btn btn-default dropdown-toggle" v-model="MoreBuyModel.CouponId" v-on:change="selectFn">
                            <option value="0">请选择优惠券</option>
                            <option v-for="item in Coupons" :value="item.Id">{{item.Name}}</option>
                        </select>
                    </div>
                </div>
                <div class="col-lg-4 text-left">
                    <span class="grayText">淘宝每次下单获得优惠券</span>
                </div>
            </div>
            
            <div class="row" v-if="@userEntity.is_agent == 1">
                <div class="col-lg-4 text-right">
                    代理下会员号：
                </div>
                <div class="col-lg-4 regDan">
                    <input type="text" name="phone" v-model="MoreBuyModel.phone"  v-on:input="checkverify()"/>
                </div>
                <div class="col-lg-4 text-left">
                    <span class="grayText verify_text" style="color:red;">您下边的会员号</span>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 text-right">
                    余额：
                </div>
                <div class="col-lg-4">
                    当前账户余额<span class="blueText">@(userEntity.RestAmount)</span>元
                    <a href="/User/Index">前往充值</a>
                </div>
                <div class="col-lg-4">
                    
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 text-right">
                    支付方式：
                </div>
                <div class="col-lg-4 zhifufangshi">
                    <input id="zhifubaopay_s" type="radio" name="OPayType" value="100" checked v-model="MoreBuyModel.OPayType"> <img src="~/img/zfb.png"><label for="zhifubaopay_s">支付宝支付</label>
                    <input id="weixinpay_s" type="radio" name="OPayType" value="70" v-model="MoreBuyModel.OPayType"> <img src="~/img/wx.png"><label for="weixinpay_s">微信支付</label>
                    <input id="UseAccountAmount" type="radio" name="OPayType" value="1" v-model="MoreBuyModel.UseAccountAmount"> <label for="UseAccountAmount">余额支付</label>

                </div>
                <div class="col-lg-4 text-left">
                    <span></span>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 text-right">
                    总金额：
                </div>
                <div class="col-lg-4">
                    <span class="blueText">{{MoreTotalAmount}}</span>元
                </div>
                <div class="col-lg-4 text-left">
                    <span></span>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 text-right">
                    应付款：
                </div>
                <div class="col-lg-4">
                    <span style="font-size: 30px;font-weight: bold;">{{MorePayAmount}}</span>元
                    <span>{{auto_discount_text}}</span>
                </div>
                <div class="col-lg-4 text-left">
                    <span></span>
                </div>
            </div>
            <p class="ijiao-tip" style="color:red">{{Tip}}</p>
            <p class="tijiao"><button class="btn btn-primary pay-botton"  type="button" v-on:click="morePay">确认支付</button></p>
        </form>
    </div>
    <!-- 支付弹窗开始 -->
    <div class="payMask">
        <div class="payCon">
            <img src="~/img/close.png" class="payClose" v-on:click="close">
            <p class="payTit"><img src="~/img/wx.png">微信支付 ｜ 收银台</p>
            <div class="row">
                <div class="col-lg-6 text-center">
                    @*<p>订单将在25分钟后关闭，请及时付款</p>*@
                    <p>
                        @*<img id="wxPayQr" src="img/ewm.png">*@
                        <div id="qrcode" style="width:200px;height:200px"></div>
                    </p>
                    @*<p>二维码已经失效，请刷新后重新扫码支付</p>*@
                </div>
                <div class="col-lg-6 text-left leftBorder">
                    <p>新开订单</p>
                    <p class="payPrice">¥<span>{{OrderInfo.OtherPayAmount}}</span></p>
                    <p>收款方：聚IP</p>
                    <p>下单时间：<span>{{OrderInfo.CreateTime}}</span></p>
                    <p>订单号：<span>{{OrderInfo.OrderNo}}</span></p>
                </div>
            </div>
        </div>
    </div>
    <!-- 支付弹窗结束 -->

    <div id="aliPayBox" style="display:none"></div>
</div>

@section Scripts{
    <script>
        var productId =@(Model.Product.Id);
        /** 表单序列化成json字符串的方法  */
        function form2JsonString(formId) {
            var paramArray = $('#' + formId).serializeArray();
            var jsonObj = {};
            $(paramArray).each(function () {
                jsonObj[this.name] = this.value;
            });
            console.log(jsonObj);
            return JSON.stringify(jsonObj);
        }

        var app = new Vue({
            el: '#app',
            data: {
                auto_discount_text:'',
                acount_list:'',
                payHandler: null,
                Tip: '',
                RestAmount: @(userEntity.RestAmount),
                Coupons: [],
                SelectCoupon: {},
                OrderInfo: {},
                OneChecker: {
                    AccountOk: true,
                    PwdOk: true
                },
                MoreChecker: {
                    AccountOk: true,
                    PwdOk: true,
                    Max: 10,
                },
                OneBuyModel: {
                    Price:@(Model.Package.Price),
                    PackageId:@(Model.Package.Id),
                    CouponAmount: 0,
                    OrderType: 1,
                    Account: '@(randomAccount1)',
                    Pwd: '@(randomPwd)',
                    ConnectCount: 1,
                    CouponId: 0,
                    UseAccountAmount: 0,
                    OPayType: 100,
                    PayChannel: 50,
                    phone:''
                },
                MoreBuyModel: {
                    Price:@(Model.Package.Price),
                    PackageId:@(Model.Package.Id),
                    CouponAmount: 0,
                    OrderType: 2,
                    Account: '@(randomAccountMutil)',
                    Pwd: '@(randomPwd)',
                    ConnectCount: 1,
                    CouponId: 0,
                    UseAccountAmount: 0,
                    OPayType: 100,
                    MinPostfix: 1,
                    MaxPostfix: 1,
                    PayChannel: 50,
                    phone:''
                }
            },
            computed: {
                OneTotalAmount: function () {
                    var total = this.OneBuyModel.Price * this.OneBuyModel.ConnectCount
                    //西瓜极客优惠券
                    if((@(Model.Package.Id) == 64||@(Model.Package.Id) == 1004) && @(Model.Package.Price)<60){
                        total =  this.OneBuyModel.ConnectCount * 60.00
                    }
                    if (@(Model.Package.IsTest) == 1) {
                        total = 1.00;
                    }
                    return total.toFixed(2);
                },
                OnePayAmount: function () {
                    var restAmout = this.OneBuyModel.UseAccountAmount == 1 ? this.RestAmount : 0;
                    var total = this.OneBuyModel.Price * this.OneBuyModel.ConnectCount - this.OneBuyModel.CouponAmount ;
                    total = total < 0 ? 0 : total;

                    total = parseFloat(total.toFixed(2));

                        if(total != 0.1){
                            //最低价
                            var min_cost = @(Model.Package.MinPrice) * this.OneBuyModel.ConnectCount - this.OneBuyModel.CouponAmount;
                            if(total<min_cost){
                                total = min_cost;
                            }
                        }
                        
                    if (@(Model.Package.IsTest) == 1) {
                        total = 1.00;
                    }


                    return total.toFixed(2);
                },
                MoreTotalAmount: function () {
                    var total = this.MoreBuyModel.Price * this.MoreBuyModel.ConnectCount * this.MoreBuyModel.MaxPostfix;
                    //西瓜极客优惠券
                    if((@(Model.Package.Id) == 64||@(Model.Package.Id) == 1004) && @(Model.Package.Price)<60){
                        total =  this.MoreBuyModel.ConnectCount * 60.00 * this.MoreBuyModel.MaxPostfix
                    }
                    return total.toFixed(2);
                },
                MorePayAmount: function () {
                    var restAmout = this.MoreBuyModel.UseAccountAmount == 1 ? this.RestAmount : 0;
                    var total = this.MoreBuyModel.Price * this.MoreBuyModel.ConnectCount * this.MoreBuyModel.MaxPostfix - this.MoreBuyModel.CouponAmount ;
                    total = total < 0 ? 0 : total;
                    total = parseFloat(total.toFixed(2));

                    //最低价
                    var min_cost = @(Model.Package.MinPrice) * this.MoreBuyModel.ConnectCount * this.MoreBuyModel.MaxPostfix - this.OneBuyModel.CouponAmount;
                    if(total<min_cost){
                        total = min_cost;
                    }

                    return total.toFixed(2);
                }
            },
            watch: {
                'OneBuyModel.CouponId': {    //加引号监听对象里的属性
                    handler: function (newValue, oldValue) {
                        if( this.OneBuyModel.CouponId == 10000000){
                            return;
                        }
                        var totalAmount = this.OneBuyModel.Price * this.OneBuyModel.ConnectCount;
                        for (var i = 0; i < this.Coupons.length; i++) {
                            var item = this.Coupons[i];
                            if (totalAmount < item.AllowMinAmount) {
                                continue;
                            }
                            if (item.Id == newValue) {
                                if (item.CouponType == 1) {//满减
                                    this.OneBuyModel.CouponAmount = item.CouponValue;
                                } else {
                                    //亲 请勿非法操作呦^.^ 请按照正常的流程操作 我们后台是有记录滴
                                    if($(".sname").text() == '天卡'){
                                        this.OneBuyModel.CouponAmount = totalAmount * item.CouponValue * 0.1;
                                    } else {
                                        alert('非天卡无效');
                                        this.OneBuyModel.CouponId = '0';
                                    }
                                }
                                return;
                            } else {
                                this.OneBuyModel.CouponAmount = 0;
                            }
                        }
                    },
                    immediate: true
                },
                'MoreBuyModel.CouponId': {    //加引号监听对象里的属性
                    handler: function (newValue, oldValue) {
                        if( this.MoreBuyModel.CouponId == 10000000){
                            return;
                        }
                        var totalAmount = this.MoreBuyModel.Price * this.MoreBuyModel.ConnectCount;
                        for (var i = 0; i < this.Coupons.length; i++) {
                            var item = this.Coupons[i];
                            if (totalAmount < item.AllowMinAmount) {
                                continue;
                            }
                            if (item.Id == newValue) {
                                if (item.CouponType == 1) {//满减
                                    this.MoreBuyModel.CouponAmount = item.CouponValue;
                                } else {
                                    //亲 请勿非法操作呦^.^ 请按照正常的流程操作 我们后台是有记录滴
                                    if($(".sname").text() == '天卡'){
                                        this.MoreBuyModel.CouponAmount = totalAmount * item.CouponValue * 0.1;
                                     } else {
                                        alert('非天卡无效');
                                        this.MoreBuyModel.CouponId = '0';
                                    }
                                }
                                return;
                            } else {
                                this.MoreBuyModel.CouponAmount = 0;
                            }
                        }
                    },
                    immediate: true
                },
                'OneBuyModel.OPayType': {    //加引号监听对象里的属性
                    handler: function (newValue, oldValue) {
                        this.OneBuyModel.UseAccountAmount = false;
                        this.OneBuyModel.PayChannel = newValue == 70 ? 30 : 50;
                    },
                    immediate: true
                },
                'MoreBuyModel.OPayType': {    //加引号监听对象里的属性
                    handler: function (newValue, oldValue) {
                        this.MoreBuyModel.UseAccountAmount = false;
                        this.MoreBuyModel.PayChannel = newValue == 70 ? 30 : 50;
                    },
                    immediate: true
                }
            },
            created () {
                this.OneBuyModel.CouponId = 10000000
                this.MoreBuyModel.CouponId = 10000000
            },
            mounted: function () {
                @if(user != null) {
                    <text>this.getCoupons()</text>
                }
            },
            methods: {
                checkverify() {
                    let phone = '';
                    if (this.OneBuyModel.phone != '') {
                            phone=this.OneBuyModel.phone;
                    } else {
                            phone=this.MoreBuyModel.phone;
                    }
                    $.ajax({
                        type: 'GET',
                        async:false,
                        url: 'https://php-api.juip.com/agent/index/isverify?phone='+phone,
                        dataType: "json",
                        contentType: "application/json",
                        crossDomain: true,
                        success: function (res) {
                            if (res.is_verify == '1') {
                                $('.verify_text').html('该账号已经实名，可以开号' )
                            } else {
                                $('.verify_text').html('该账号未实名' )
                            }
                            
                            console.log(this.verify_text)
                        }
                    });
                },
                // true:数值型的，false：非数值型
                isNum(value) {
                    return typeof value === 'number' && !isNaN(value);
                },
                selectFn: function (e) {
                    console.log(e.target.value) // 选择项的value
                },
                getCoupons: function () {
                    var that = this;
                    var url = '/api/sells/v1/coupon/GetAvailableCoupon';
                    $.ajax({
                        type: 'GET',
                        url: url,
                        success: function (res) {
                            if (res.Code == 10000) {
                                if(@(Model.Package.Id) == 64||@(Model.Package.Id) == 1004){
                                    var coupon_json = {
                                        "Coupon":{
                                            "Id":10000000,
                                            "Name":"极客-西瓜-满减劵",
                                        }
                                    }
                                    res.Data.push(coupon_json);
                                }
                                console.log(res.Data)
                                that.Coupons = res.Data.map(m => m.Coupon);
                            }
                        }
                    })
                },
                hasNumAndChar(str) {
                    var zg = /^[0-9a-zA-Z]*$/; 
                    if (!zg.test(str)) {
                        return false;
                    } else {
                        return true;
                    } 
                },
                checkOneAccount() {
                    if (productId == 20||productId == 21||productId == 27) {
                        if (this.OneBuyModel.Account.length > 10 || this.OneBuyModel.Account.length < 7 || !this.hasNumAndChar(this.OneBuyModel.Account)) {
                            alert("此产品账号必须大于6位");
                            this.OneChecker.AccountOk = false;
                            return false;
                        }
                        
                        this.OneChecker.AccountOk = true;
                        return true;
                    }
                    if (this.OneBuyModel.Account.length > 10 || this.OneBuyModel.Account.length < 4 || !this.hasNumAndChar(this.OneBuyModel.Account)) {
                        this.OneChecker.AccountOk = false;
                        return false;
                    }
                    this.OneChecker.AccountOk = true;
                    return true;
                },
                checkOnePwd() {
                    if (productId == 27 || productId == 6) {
                        if (this.OneBuyModel.Pwd.length < 7 || this.OneBuyModel.Pwd.length > 10 || !this.hasNumAndChar(this.OneBuyModel.Pwd)) {
                            alert("此产品密码必须大于6位");
                            this.OneChecker.PwdOk = false;
                            return false;
                        }
                        this.OneChecker.PwdOk = true;
                        return true;
                    }
                    if (this.OneBuyModel.Pwd.length < 1 || this.OneBuyModel.Pwd.length > 10 || !this.hasNumAndChar(this.OneBuyModel.Pwd)) {
                        this.OneChecker.PwdOk = false;
                        return false;
                    }
                    this.OneChecker.PwdOk = true;
                    return true;
                },
                checkMoreAccount() {
                    if (productId == 20||productId == 21||productId == 27) {
                        if (this.MoreBuyModel.Account.length < 6 || this.MoreBuyModel.Account.length > 8 || !this.hasNumAndChar(this.MoreBuyModel.Account)) {
                            alert("此产品账号必须大于6位");
                            this.MoreChecker.AccountOk = false;
                            return false;
                        }
                        
                        this.MoreChecker.AccountOk = true;
                        return true;
                    }
                    if (this.MoreBuyModel.Account.length < 3 || this.MoreBuyModel.Account.length > 8 || !this.hasNumAndChar(this.MoreBuyModel.Account)) {
                        this.MoreChecker.AccountOk = false;
                        return false;
                    }
                    this.MoreChecker.AccountOk = true;
                    return true;
                },
                checkMorePwd() {
                    if (productId == 27 || productId == 6) {
                        if (this.MoreBuyModel.Pwd.length < 7 || this.MoreBuyModel.Pwd.length > 10 || !this.hasNumAndChar(this.MoreBuyModel.Pwd)) {
                            alert("此产品密码必须大于6位");
                            this.MoreChecker.PwdOk = false;
                            return false;
                        }
                        this.MoreChecker.PwdOk = true;
                        return true;
                    }
                    if (this.MoreBuyModel.Pwd.length < 1 || this.MoreBuyModel.Pwd.length > 10 || !this.hasNumAndChar(this.MoreBuyModel.Pwd)) {
                        this.MoreChecker.PwdOk = false;
                        return false;
                    }
                    this.MoreChecker.PwdOk = true;
                    return true;
                },
                onePay: function () {
                    this.OneBuyModel.ConnectCount = parseInt(this.OneBuyModel.ConnectCount)
                    if (!this.isNum(this.OneBuyModel.ConnectCount)) return;
                    if (!this.checkOneAccount() || !this.checkOnePwd()) return;
                    
                    if (this.OneBuyModel.UseAccountAmount) {
                        if (this.RestAmount < this.OnePayAmount){
                            alert('余额不足，请充值。您也可以使用微信、支付宝支付。');return;
                        } else {
                            this.RestAmount = this.RestAmount - this.OnePayAmount;
                        }
                    }
                    var that = this;
                    if (this.OneBuyModel.UseAccountAmount === true) this.OneBuyModel.UseAccountAmount = 1;
                    if (this.OneBuyModel.UseAccountAmount === false) this.OneBuyModel.UseAccountAmount = 0;
                    showPayWait();
                    $.ajax({
                        type: 'POST',
                        url: '/product/CreateOrder',
                        dataType: "json",
                        contentType: "application/json",
                        data: JSON.stringify(this.OneBuyModel),
                        success: function (res) {
                            console.log(res);
                            if (res.Code == 10000) {
                                hidePayWait();
                                if (res.Data == "00") {
                                    //alert('购买成功')
                                    showPayOk();
                                } else {
                                    that.payCallback(res.Data)
                                    that.isPay(res.Data.OrderInfo.OrderNo);
                                }
                            } else {
                                tipPayWait(res.Message);
                                //that.Tip = res.Message;
                            }
                        }
                    });
                },
                morePay: function () {
                    this.MoreBuyModel.ConnectCount = parseInt(this.MoreBuyModel.ConnectCount)
                    if (!this.isNum(this.MoreBuyModel.ConnectCount)) return;
                    if (!this.checkMoreAccount() || !this.checkMorePwd() || this.MoreBuyModel.MaxPostfix>500) return;
                    var that = this;
                    if (this.MoreBuyModel.UseAccountAmount) {
                        if (this.RestAmount < this.MorePayAmount){
                            alert('余额不足，请充值。您也可以使用微信、支付宝支付。');return;
                        } else {
                            this.RestAmount = this.RestAmount - this.MorePayAmount;
                        }
                    }
                    if (this.MoreBuyModel.UseAccountAmount === true) this.MoreBuyModel.UseAccountAmount = 1;
                    if (this.MoreBuyModel.UseAccountAmount === false) this.MoreBuyModel.UseAccountAmount = 0;
                    showPayWait();
                    $.ajax({
                        type: 'POST',
                        url: '/product/CreateOrder',
                        dataType: "json",
                        contentType: "application/json",
                        data: JSON.stringify(this.MoreBuyModel),
                        success: function (res) {
                            console.log(res);
                            if (res.Code == 10000) {
                                hidePayWait();
                                if (res.Data == "00") {
                                    //alert('购买成功')
                                    showPayOk();
                                } else {
                                    that.payCallback(res.Data)
                                    that.isPay(res.Data.OrderInfo.OrderNo);
                                }
                            } else {
                                //that.Tip = res.Message;
                                tipPayWait(res.Message);
                            }
                        }
                    });
                },
                payCallback: function (data) {
                    this.OrderInfo = data.OrderInfo;
                    var payType = this.OrderInfo.PayType;
                    if (payType == 70) {
                        $(".payMask").show();
                        $('#qrcode').qrcode(data.PayData);
                    } else if (payType == 100) {
                        $("#aliPayBox").html(data.PayData);
                        //document.write(data.PayData);
                    }
                },
                checkAccount: function () {
                    var account = $("#sAccount").val()
                    var url = '/api/course/v1/productaccount/ExistAccount?productId=' + productId + '&accounts=' + account;
                    $.ajax({
                        type: 'GET',
                        url: url,
                        success: function (res) {
                            console.log(res);
                            if (res.Code != 10000) {
                                $("#sAccountTip").text(res.Message)
                            }
                        }
                    })
                },
                isPay: function (orderNo) {
                    var that = this;
                    this.payHandler= setInterval(function () {
                        var url = '/product/IsPay?orderNo=' + orderNo;
                        $.ajax({
                            type: 'GET',
                            url: url,
                            success: function (res) {
                                if (res.Code == 10000 && res.Data ==1) {
                                    clearInterval(that.payHandler);
                                    showPayOk();
                                    $(".payMask").hide();
                                    //window.location.href = "/user/myaccounts";
                                }
                            }
                        })
                    }, 3000)
                },
                close() {
                    clearInterval(this.payHandler);
                    $('.payMask').hide();
                    $('#qrcode').empty();
                },
                changeAccountCount() {
                    this.acount_list = '';
                    let start_account = this.MoreBuyModel.MinPostfix;
                    let end_account = this.MoreBuyModel.MaxPostfix;
                    if(end_account>3){
                        for(let i = start_account;i<parseInt(start_account)+3;i++){
                            this.acount_list += this.MoreBuyModel.Account+i+',';
                        }
                        this.acount_list = this.acount_list.substr(0,this.acount_list.length - 1);
                        this.acount_list += '...'+this.MoreBuyModel.Account+(parseInt(start_account)+parseInt(end_account)-1)
                    } else {
                        for(let i = start_account;i<parseInt(start_account)+parseInt(end_account);i++){
                            this.acount_list += this.MoreBuyModel.Account+i+',';
                        }
                        
                        this.acount_list = this.acount_list.substr(0,this.acount_list.length - 1);
                    }
                }
            }
        })

        function checkAccount() {
            var account = $("#sAccount").val()
            var url = '/api/course/v1/productaccount/ExistAccount?productId=' + productId+ '&accounts=' + account;
            $.ajax({
                type: 'GET',
                url: url,
                success: function (res) {
                    console.log(res);
                    if (res.Code != 10000) {
                        $("#sAccountTip").text(res.Message)
                    }
                }
            })
        }
    </script>
}