@using WX.CRM.WebHelper;

@{
    ViewBag.Title = "注册和购买";
    Layout = "~/Views/Shared/_content.cshtml";

}
<style>
    body {
        background-color: white;
        padding: 10px;
    }

    .layui-form-txt {
        float: left;
        display: block;
        padding: 9px 15px 9px 0;
        width: 80px;
        font-weight: 400;
        line-height: 20px;
    }

    .layui-form-item .layui-inline {
        margin-bottom: unset;
    }
</style>

<script src="~/Scripts/clipboard.min.js"></script>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>注册并购买</legend>
</fieldset>
<form id="wocaaa" class="layui-form" action="" lay-filter="form1">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-inline">
            <input type="text" id="userName" name="userName" lay-verify="required" lay-reqtext="用户名不能为空！" autocomplete="off" placeholder="请输入用户名" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-inline">
            <input type="password" id="password" name="password" lay-verify="required" lay-reqtext="请输入密码！" placeholder="请输入密码" autocomplete="new-password" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">手机号</label>
        <div class="layui-inline">
            <input type="tel" name="mobile" id="mobile" lay-verify="required|phone" placeholder="请输入手机号码" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">产品大类</label>
            <div class="layui-input-inline">
                <select id="productId" name="productId" childId="subProductId" style="width:150px;height:22px" lay-filter="productId1">
                    <option value="0">--请选中产品大类--</option>
                    @foreach (var item in ViewBag.productList as List<SelectListItem>)
                    {
                        <option value="@item.Value">@item.Text</option>
                    }
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">产品小类</label>
            <div class="layui-input-inline">
                <select id="subProductId" name="subProductId" style="width:220px;height:22px" lay-filter="subProductId1">
                    <option value="0">--请选中产品小类--</option>
                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">产品价格</label>
            <lable class="layui-form-txt" id="needPay" style="color:orange">
                --
            </lable>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">开通时长</label>
            <label class="layui-form-txt" id="openDays" style="color:orange">
                --
            </label>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">购买链接</label>
        <div class="layui-inline" style="width:400px;">
            <textarea class="layui-textarea" name="buyLink" lay-verify="content" id="buyLink"></textarea>
        </div>
        <div class="layui-inline">
            <input type="button" class="layui-btn layui-btn-ok htbtn" data-clipboard-target="#buyLink" data-method="copy" value="复制" />
            <input type="button" class="layui-btn layui-btn-primary opennew" value="打开" id="openNew" hsrc="" />
            @*<button class="layui-btn layui-btn-ok" lay-filter="formDemo">复制</button>*@
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">二维码</label>
        <div class="layui-inline">
            <img id="erweima" />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-inline">
            <button class="layui-btn layui-btn-ok" lay-submit lay-filter="form1">注册并购买</button>
        </div>
    </div>
</form>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>已存在用户名购买</legend>
</fieldset>
<form id="wocaaa2" class="layui-form" action="" lay-filter="form2">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-inline">
            <input type="text" name="userName2" id="userName2" lay-verify="required" lay-reqtext="用户名不能为空！" autocomplete="off" placeholder="请输入用户名" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">产品大类</label>
            <div class="layui-input-inline">
                <select id="productId2" name="productId2" childId="subProductId2" lay-filter="productId2" style="width:150px;height:22px">
                    <option value="0">--请选中产品大类--</option>
                    @foreach (var item in ViewBag.productList as List<SelectListItem>)
                    {
                        <option value="@item.Value">@item.Text</option>
                    }
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">产品小类</label>
            <div class="layui-input-inline">
                <select id="subProductId2" name="subProductId2" lay-filter="subProductId2" style="width:220px;height:22px">
                    <option value="0">--请选中产品小类--</option>
                </select>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">产品价格</label>
            <lable class="layui-form-txt" id="needPay2" style="color:orange">
                --
            </lable>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">开通时长</label>
            <label class="layui-form-txt" id="openDays2" style="color:orange">
                --
            </label>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">购买链接</label>
        <div class="layui-inline" style="width:400px;">
            <textarea class="layui-textarea" name="buyLink2" lay-verify="content" id="buyLink2"></textarea>
        </div>
        <div class="layui-inline">
            <button class="layui-btn layui-btn-ok htbtn" data-clipboard-target="#buyLink2" data-method="copy">复制</button>
            <button class="layui-btn layui-btn-primary opennew" id="openNew2" hsrc="">打开</button>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">二维码</label>
        <div class="layui-inline">
            <img id="erweima2" />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-inline">
            <button class="layui-btn layui-btn-ok" lay-submit lay-filter="form2">已存在用户购买</button>
        </div>
    </div>
</form>

<script type="text/javascript">
    layui.use('form', function () {
        var form = layui.form;
        var layer = layui.layer;
        //监听提交
        form.on('submit(form1)', function (data) {
            console.log(data);
            var userName = $('#userName').val();
            var password = $('#password').val();
            if (userName.length < 5) {
                //$.messager.alert("警告", "用户名长度不能小于5个字符", "error");
                layer.msg("用户名长度不能小于5个字符", { icon: 2 });
                return false;
            }
            var pattern = /^([0-9a-z_]+)$/;
            if (!pattern.test(userName)) {
                //$.messager.alert("警告", "用户名只能是数字、小写字母和下划线组成", "error");
                layer.msg("用户名只能是数字、小写字母和下划线组成", { icon: 2 });
                return false;
            }
            if (password.length < 6 || password.length > 18) {
                layer.msg("密码的长度只能在6-18位之间", { icon: 2 });
                //$.messager.alert("警告", "密码的长度只能在6-18位之间", "error");
                return false;
            }
            if ($('#subProductId').val() == 0) {
                layer.msg("请选择购买类别", { icon: 2 });
                //$.messager.alert("警告", "请选择购买类别", "error");
                return false;
            }
            $.ajax({
                type: "POST",
                url: "RegAndBuy",
                data: data.field,
                dataType: "json",
                success: function (da) {
                    if (da.type == 0) {
                        layer.msg('失败：' + da.message, { icon: 1 })
                    } else {
                        if (da.ret == 0) {
                            layer.msg('链接生成成功！', { icon: 1 });
                            $('#buyLink').val(da.buyLink);
                            $('#openNew').attr("hsrc", da.buyLink);
                            $('#erweima').attr("src", "GetQRCode?url=" + encodeURIComponent(da.buyLink) + "?y=" + GetGuid()).width(200).height(200);
                            
                        } else if (da.ret == -1212) {
                            //$.messager.alert("警告", "该手机已经注册过，不能被再次使用", "error");
                            layer.msg("该手机已经注册过，不能被再次使用", { icon: 2 });
                        } else if (da.ret == -1108) {
                            //$.messager.alert("警告", "用户名已经存在，不能使用", "error");
                            layer.msg("用户名已经存在，不能使用", { icon: 2 });
                        }
                        else {
                            //$.messager.alert("警告", da.msg, "error");
                            layer.msg(da.msg, { icon: 2 });
                        }
                    }
                    //if (da.result == true) {
                    //    parent.layer.msg('链接生成成功！', { icon: 1 });
                    //} else {
                    //    layer.msg(da.retmsg, { icon: 2 });
                    //}
                },
                error: function () {
                    layer.msg('链接生成失败！', { icon: 2 });
                }
            });
            return false;
        });
        //提交
        form.on('submit(form2)', function (data) {
            if ($('#subProductId2').val() == 0) {
                layer.msg('请选择购买类别！', { icon: 2 });
                return false;
            }
            $.ajax({
                type: "POST",
                url: "BuyLink",
                data: { userName: $('#userName2').val(), productId: $('#productId2').val(), subProductId: $('#subProductId2').val() },
                dataType: "json",
                success: function (data) {
                    if (data.type == 0) {
                        //$.messager.alert("警告", data.message, "error");
                        layer.msg(data.message, { icon: 2 });
                    } else {
                        if (data.ret == 0) {
                            $('#buyLink2').val(data.buyLink);
                            $('#openNew2').attr("hsrc", data.buyLink);
                            $('#erweima2').attr("src", "GetQRCode?url=" + encodeURIComponent(data.buyLink) + "?y=" + GetGuid()).width(200).height(200);
                        }
                        else {
                            layer.msg('该用户名不存在！', { icon: 2 });
                        }
                    }
                },
                error: function () {
                    layer.msg('链接生成失败！', { icon: 2 });
                }
            });
            return false;
        });
        //各种基于事件的操作，下面会有进一步介绍
        form.on("select(productId1)", function (data) {
            ShowProduct("productId");
        });
        form.on("select(subProductId1)", function (data) {
            changeSubProduct($("#subProductId").val(), 'needPay', 'openDays')
        });
        form.on("select(productId2)", function (data) {
            ShowProduct("productId2");
        });
        form.on("select(subProductId2)", function (data) {
            changeSubProduct($("#subProductId2").val(), 'needPay2', 'openDays2')
        });
        function ShowProduct(mp) {
            var subId = '#' + $("#" + mp).attr("childId");
            var productId = $("#" + mp).val();
            if (productId == 0) {
                $(subId).html("<option value='0'>--请选中产品小类--</option>");
                return;
            }
            $.r_post("GetSubProductList?productId=" + productId + '&isValid=1', function (data) {
                //$(subId).unbind();
                $(subId).html("<option value='0'>--请选中产品小类--</option>");
                $(data).each(function (n, m) {
                    /*if (nb1defaultIndex == 0) {
                        $("#slt_subProductId").append("<option value='" + m.Value + "' selected='selected'>" + m.Text + "</option>");
                    }
                    else {*/
                    $(subId).append("<option value='" + m.Value + "'>" + m.Text + "</option>");

                    //}
                });
                layui.form.render("select");
            }, "json");
        }
        function changeSubProduct(subProductId, needPayKey, openDaysKey) {
            var needPayId = '#' + needPayKey;
            var openDaysKey = '#' + openDaysKey;
            $.r_post("GetSubProductPriceById?subProductId=" + subProductId, function (data) {
                if (data.result) {
                    $(needPayId).text(data.price + '元');
                    $(openDaysKey).text(data.days + '天');
                }
            }, "json");
        }
    });
    $(function () {

        //复制按钮操作
        var clipboard = new ClipboardJS('.htbtn');

        clipboard.on('success', function (e) {
            alert("复制成功！");

            e.clearSelection();
        });

        clipboard.on('error', function (e) {
            console.error('Action:', e.action);
            console.error('Trigger:', e.trigger);
        });
        $(".opennew").click(function () {
            var src = $(this).attr("hsrc");
            if (src == null)
                return;
            window.open(src);
        });

    });
</script>