@page
@model YBDevice.NWeb.Pages.Order.EditModel
@{
    ViewData["Title"] = "编辑订单";
}
<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-tab layui-tab-brief" lay-filter="ordertab">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="ordr">订单信息</li>
                <li lay-id="equ">绑定设备</li>
            </ul>
            <div class="layui-tab-content  layui-form">
                <div class="layui-tab-item layui-show">
                    <div class="form-horizontal">
                        <div class="layui-form-item row">
                            <label class="layui-form-label col-md-3" for="Name">名称</label>
                            <div class="col-md-4">
                                <input type="text" class="layui-input" id="Name" name="Name" value="@Model.data.Name" placeholder="请输入订单名称" lay-verify="required" />
                            </div>
                        </div>
                        <div class="layui-form-item row">
                            <label class="layui-form-label col-md-3" for="Type">类型</label>
                            <div class="col-md-4">
                                <select id="Type" name="Type" lay-filter="Type">
                                    @foreach (var item in Model.types)
                                    {
                                        if (Model.data.Type == item.Key)
                                        {
                                            <option value="@((int)item.Key)" selected>@item.Value</option>
                                        }
                                        else
                                        {
                                            <option value="@((int)item.Key)">@item.Value</option>
                                        }
                                    }
                                </select>
                            </div>
                        </div>
                        <div id="urldiv">
                        </div>
                        <div class="layui-form-item row">
                            <label class="layui-form-label col-md-3" for="TotalCount">总需量</label>
                            <div class="col-md-4">
                                <input type="text" class="layui-input" id="TotalCount" name="TotalCount" value="@Model.data.TotalCount" placeholder="请输入总需量" lay-verify="required" />
                                <span class="tiptext">订单总共需求量,为0则无上限</span>
                            </div>
                        </div>
                        <div class="layui-form-item row">
                            <label class="layui-form-label col-md-3" for="DayLimit">日需量</label>
                            <div class="col-md-4">
                                <input type="text" class="layui-input" id="DayLimit" name="DayLimit" value="@Model.data.DayLimit" placeholder="请输入日需量" lay-verify="required" />
                                <span class="tiptext">每日最大需求量,为0则无上限</span>
                            </div>
                        </div>
                        <div class="layui-form-item row">
                            <label class="layui-form-label col-md-3" for="StartTime">开始时间</label>
                            <div class="col-md-4">
                                <input type="text" class="layui-input ydatetime" autocomplete="off" id="StartTime" name="StartTime" value="@Model.data.StartTime" placeholder="请选择开始时间" />
                                <span class="tiptext">如果不选则表示立即开始</span>
                            </div>
                        </div>
                        <div class="layui-form-item row">
                            <label class="layui-form-label col-md-3" for="EndTime">结束时间</label>
                            <div class="col-md-4">
                                <input type="text" class="layui-input ydatetime" id="EndTime" autocomplete="off" name="EndTime" value="@Model.data.EndTime" placeholder="请选择结束时间" />
                                <span class="tiptext">如果不选则表示不会到期结束</span>
                            </div>
                        </div>
                        <div class="layui-form-item row">
                            <label class="layui-form-label col-md-3" for="Priority">优先级</label>
                            <div class="col-md-4">
                                <input type="text" class="layui-input" id="Priority" name="Priority" value="@Model.data.Priority" placeholder="请输入优先级" />
                                <span class="tiptext">数字越大越先被取到</span>
                            </div>
                        </div>
                        <div class="text-center col-md-7">
                            <button class="btn btn-primary btn-lg js-next" type="button">下一步</button>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" id="Code" placeholder="请输入设备序列号" />
                            </div>
                        </div>
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <select id="devicetype">
                                    <option value="0">选择设备类型</option>
                                    @foreach (var item in Model.devicetypes)
                                    {
                                        <option value="@item.Code">@item.Name</option>
                                    }
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button class="btn btn-primary btn-lg  js-search" type="button">查询</button>
                            <button class="btn btn-primary btn-lg" lay-submit lay-filter="submit" type="button">提交</button>
                        </div>
                    </div>
                    <div class="layui-row" id="equlistdiv">
                    </div>
                    <div class="layui-form-item layui-row">
                        <div id="pagediv" class="text-right"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="equlisttpl">
    {{# if(d.items.length > 0){ }}
    <div class="layui-form-item layui-row">
        <div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
            {{# if(d.isall){ }}
            <input type="checkbox" lay-filter="isall" lay-skin="primary" title="全选" checked />
            {{# }else{ }}
            <input type="checkbox" lay-filter="isall" lay-skin="primary" title="全选" />
            {{# } }}
        </div>
    </div>
    {{# } }}
    <div class="layui-form-item layui-row">
        {{# layui.each(d.items,function(index,item) { }}
        <div class="layui-col-xs3 layui-col-sm3 layui-col-md3" style="margin-bottom:10px;">
            {{# if(item.ischecked || d.isall) { }}
            <input type="checkbox" lay-skin="primary" data-equid="{{item.equid}}" title="{{item.name}}[{{item.facecode}}" checked />
            {{# }else { }}
            <input type="checkbox" lay-skin="primary" data-equid="{{item.equid}}" title="{{item.name}}[{{item.facecode}}" />
            {{# } }}
        </div>
        {{# }); }}

        {{#  if(d.items.length === 0){ }}
        <h3 class="text-center">无可用的设备</h3>
        {{#  } }}
    </div>
</script>
<script type="text/html" id="urltpl">
    {{# if(d.type == 1) { }}
    <div class="layui-form-item row">
        <label class="layui-form-label col-md-3" for="Url">公众号</label>
        <div class="col-md-4">
            <select id="Url" name="Url" lay-filter="Url" lay-verify="required">
                {{# layui.each(d.list,function(index,item) { }}
                {{# if(item.authorizer_appid == d.defaultvalue) { }}
                <option value="{{item.authorizer_appid}}" selected>{{item.nick_name}}</option>
                {{# }else{ }}
                <option value="{{item.authorizer_appid}}">{{item.nick_name}}</option>
                {{# } }}
                {{# }); }}
                {{#  if(d.list.length === 0){ }}
                <option value="">无可用的公众号</option>
                {{#  } }}
            </select>
        </div>
    </div>
    <div class="layui-form-item row">
        <label class="layui-form-label col-md-3" for="OrderType">订单用途</label>
        <div class="col-md-4">
            <select id="OrderType" name="OrderType" lay-filter="OrderType">
                @foreach (var item in Model.bindtypes)
                {
                    if (item.Value != "1")
                    {
                        if (Model.data.OrderType == item.Key)
                        {
                            <option value="@((int)item.Key)" selected>@item.Value</option>
                        }
                        else
                        {
                            <option value="@((int)item.Key)">@item.Value</option>
                        }
                    }
                }
            </select>
            <span class="tiptext">用户测量:关注公众号,</span>
            <span class="tiptext">用户绑定:只适用于WIFI绑定设备</span>
        </div>
    </div>
    {{# }else if(d.type == 2){ }}
    <div class="layui-form-item row">
        <label class="layui-form-label col-md-3" for="Url">链接</label>
        <div class="col-md-4">
            <input type="text" class="layui-input" id="Url" name="Url" value="@Model.data.Url" placeholder="请输入链接地址" lay-verify="required" />
        </div>
    </div>
    {{# }else { }}
    <div class="layui-form-item row">
        <label class="layui-form-label col-md-3" for="Url">小程序</label>
        <div class="col-md-4">
            <select id="Url" name="Url" lay-filter="Url" lay-verify="required">
                {{# layui.each(d.list,function(index,item) { }}
                {{# if(item.authorizer_appid == d.defaultvalue) { }}
                <option value="{{item.authorizer_appid}}" selected>{{item.nick_name}}</option>
                {{# }else{ }}
                <option value="{{item.authorizer_appid}}">{{item.nick_name}}</option>
                {{# } }}
                {{# }); }}
                {{#  if(d.list.length === 0){ }}
                <option value="">无可用的小程序</option>
                {{#  } }}
            </select>
        </div>
    </div>
    <div class="layui-form-item row">
        <label class="layui-form-label col-md-3" for="Page">小程序首页</label>
        <div class="col-md-4">
            <input type="text" class="layui-input" id="Page" name="Page" value="@Model.data.Page" placeholder="请输入首页地址" lay-verify="required" />
        </div>
    </div>
    <div class="layui-form-item row">
        <label class="layui-form-label col-md-3" for="OrderType">订单用途</label>
        <div class="col-md-4">
            <select id="OrderType" name="OrderType" lay-filter="OrderType">
                @foreach (var item in Model.bindtypes)
                {
                    if (item.Value != "3")
                    {
                        if (Model.data.OrderType == item.Key)
                        {
                            <option value="@((int)item.Key)" selected>@item.Value</option>
                        }
                        else
                        {
                            <option value="@((int)item.Key)">@item.Value</option>
                        }
                    }
                }
            </select>
            <span class="tiptext">设备管理:用于商户端小程序,</span>
            <span class="tiptext">用户测量:用户测量小程序</span>
        </div>
    </div>
    {{# } }}
</script>
@section Scripts{
<script type="text/javascript">
    layui.use(['form', 'common', 'laytpl', 'element', 'laypage'], function () {
        var form = layui.form, laytpl = layui.laytpl, element = layui.element, laypage = layui.laypage,
            common = layui.common;
        var page = 1;
        var jsondata = [];
        var isall = false;
             form.on("select(Type)", function (data) {
                 var value = data.value;
                 var jsondata = {
                     "type": value,
                     "defaultvalue": '@Model.data.Url'
                 };
                 var officetype = value == 1 ? 1 : 2;
                 if (value != 2) {
                     common.ajax({
                         url: "/api/official/getalllist?type=" + officetype,
                         success: function (res) {
                             jsondata["list"] = res.data;
                             var getTpl = urltpl.innerHTML, view = document.getElementById('urldiv');
                             laytpl(getTpl).render(jsondata, function (html) {
                                 view.innerHTML = html;
                                 form.render("select");
                             });
                         }
                     });
                 } else {
                     var getTpl = urltpl.innerHTML, view = document.getElementById('urldiv');
                     laytpl(getTpl).render(jsondata, function (html) {
                         view.innerHTML = html;
                     });
                 }
             });
             $("#Type").siblings("div.layui-form-select").find('dl').find('.layui-this').click();
             form.on("submit(submit)", function (data) {
                 data.field['id'] = '@Model.data.Id';
                 var equids = [];
                 if (!isall) {
                     $("#equlistdiv").find("input").each(function () {
                         if ($(this).prop("checked")) {
                             equids.push($(this).data("equid"));
                         }
                     });
                 } else {
                     equids.push(0);
                 }
                 data.field["equids"] = equids;
                 console.log(data.field);
                 common.ajax({
                     url: "/api/order/Submit",
                     type: "post",
                     data: data.field
                 });
             });
        $(".js-next").on("click", function () {
            element.tabChange('ordertab', 'equ');
        });

        $(".js-search").on("click", function () {
            var code = $("#Code").val();
            var type = $("#devicetype").val();
            common.ajax({
                url: "/api/order/getorderequlist?orderid=" + '@Model.data.Id' + "&code=" + code + "&page=" + page + "&type=" + type,
                success: function (res) {
                    if (res.data.items.length >0 && res.data.items[0].isall) {
                        isall = true;
                    }
                    jsondata = res;
                    loadtpl();
                }
          });
        });
        function loadtpl() {
            var getTpl = equlisttpl.innerHTML, view = document.getElementById('equlistdiv');
            jsondata.data["isall"] = isall;
            laytpl(getTpl).render(jsondata.data, function (html) {
                view.innerHTML = html;
                form.render("checkbox");
                laypage.render({
                    elem: "pagediv",
                    count: jsondata.data.totalnum,
                    limit: jsondata.data.limit,
                    curr: jsondata.data.page,
                    jump: function (obj, first) {
                        page = obj.curr;
                        if (!first) {
                            $(".js-search").trigger("click");
                        }
                    }
                });
            });
        }
        form.on("checkbox(isall)", function (val) {
            isall = val.elem.checked;
            if (!isall) {
                for (var i = 0; i < jsondata.data.items.length; i++) {
                    jsondata.data.items[i].ischecked = false;
                }
            }
            loadtpl();
        });
        $(".js-search").trigger("click");
    });
</script>
}