@page "{handler?}"
@model YBDevice.NWeb.Pages.Banner.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-2" 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-2" for="AppId">小程序</label>
                            <div class="col-md-4">
                                <select id="AppId" name="AppId" lay-verify="required">
                                    <option value="">选择绑定的小程序</option>
                                    @foreach (var item in Model.offlist)
                                    {
                                        if (item.authorizer_appid == Model.data.AppId)
                                        {
                                            <option value="@item.authorizer_appid" selected>@item.nick_name</option>
                                        }
                                        else
                                        {
                                            <option value="@item.authorizer_appid">@item.nick_name</option>
                                        }
                                    }
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item row">
                            <label class="layui-form-label col-md-2" for="Type">内容类型</label>
                            <div class="col-md-4">
                                <select id="Type" name="Type" lay-filter="Type">
                                    @foreach (var item in Model.types)
                                    {
                                        if (item.Value == ((int)Model.data.Type).ToString())
                                        {
                                            <option value="@item.Value" selected>@item.Text</option>
                                        }
                                        else
                                        {
                                            <option value="@item.Value">@item.Text</option>
                                        }
                                    }
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item row">
                            <label class="layui-form-label col-md-2" for="Title">封面</label>
                            <div class="col-md-10">
                                <div><button class="btn btn-info btn-lg" id="upload">上传封面</button></div>
                                @if (!string.IsNullOrEmpty(Model.data.HeadImg))
                                {
                                    <div id="HeadImgView">
                                        <img data-src="preview" src="@Model.data.HeadImg" alt="上传成功后渲染" style="max-width:196px">
                                    </div>
                                }
                                else
                                {
                                    <div id="HeadImgView" class="layui-hide">
                                        <img data-src="preview" src="" alt="上传成功后渲染" style="max-width: 196px">
                                    </div>
                                }
                            </div>
                        </div>
                        <div class="layui-form-item row">
                            <label class="layui-form-label col-md-2" for="Title">内容</label>
                            <div class="col-md-10">
                                <textarea type="text" id="Content" name="Content" placeholder="在此编辑内容">@Model.data.content</textarea>
                                <span class="tiptext contenttext"></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">
                        <span class="tiptext">如果不绑定设备,则此广告针对当前账户的所有设备生效</span>
                    </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>
@section css{
<style>
    .layui-form-select dl {
        z-index: 100001;
    }
</style>
    }
@section Scripts{
<script type="text/javascript" src="~/js/neditor/neditor.config.js"></script>
<script type="text/javascript" src="~/js/neditor/neditor.all.min.js"></script>
<script type="text/javascript" src="~/js/neditor/neditor.service.js"></script>
<script type="text/javascript">
         layui.use(['form', 'common','upload', 'laytpl', 'element', 'laypage'], function () {
             var form = layui.form,
                 upload=layui.upload,
                 common = layui.common, laytpl = layui.laytpl, element = layui.element, laypage = layui.laypage;
             var headimg = '@Model.data.HeadImg';
             var ue;
             var page = 1;
             var jsondata = [];
             var isall = false;
                upload.render({
                 elem: "#upload",
                 url: "/upload",
                 data: {
                     root: function () {
                         return "banner";
                     }
                 },
                 done: function (res) {
                     if (res.code == 0) {
                         headimg = res.data[0];
                         layui.$('#HeadImgView').removeClass('layui-hide').find('img').attr('src', headimg);
                     } else {
                         common.alert(res.message);
                     }
                 },
                    error: function () {
                        common.alert("文件上传失败");
                 }
                });
             $(window).on("scroll", function () {
                 $("#edui1").children().each(function () {
                     var id = $(this).attr('id');
                     if (typeof id === "undefined" || id === null) {
                         $(this).remove();
                     }
                 });
             });
             form.on("select(Type)", function (res) {
                 var val = res.value;
                 if (val == 1) {
                     $("#Content").removeClass("layui-textarea");
                    ue = UE.getEditor('Content', {
                        rootname: "banner",
                        scaleEnabled: false,
                        autoHeightEnabled: false
                    });
                     ue.ready(function () {
                         ue.setHeight(500); //设置高度
                     });
                     $(".contenttext").text("");
                 } else {
                     if (ue) {
                         ue.destroy();
                         ue = undefined;
                     }
                     if (val == 2) {
                         $(".contenttext").text("请输入链接地址,只支持绑定的公众号文章");
                     } else {
                         $(".contenttext").text("请输入小程序appid");
                     }
                     if (!$("#Content").hasClass("layui-textarea")) {
                         $("#Content").addClass("layui-textarea");
                     }
                 }
             });
             $("#Type").siblings("div.layui-form-select").find('dl').find('.layui-this').click();
             form.on("submit(submit)", function (data) {
                 if ('@Model.data.Id' > 0) {
                        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;
                 data.field["HeadImg"] = headimg;
                 if (data.field["Type"] == 1) {
                     data.field["Content"] = ue.getContent();
                 }
                 console.log(data.field);
                    common.ajax({
                        url: "/api/info/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/info/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>
    }