@using Core.Web.WebHelper
@using CRM.Core.Model.Entity
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="x-body">
    <div class="layui-btn-group" style="padding-bottom:10px;">
        @Html.Action("ToolBar", "Home",
            new
                 {
                area = "",
                rightcode = (ViewBag.rightCode as string),
                otherToolBars = new ToolBar[]
                {
                }
            })
    </div>
    <form class="layui-form">
        <div id="mytoolbar">
            用户名：
            <div class="layui-inline">
                <input type="text" id="txt_username" name="txt_username" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
            说明：
            <div class="layui-inline">
                <input type="text" id="txt_remark" name="txt_remark" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
            <button class="layui-btn" type="button" id="search" data-type="reload">搜索</button>
            <button class="layui-btn layui-btn-reset" id="reset" type="reset">清空</button>
        </div>
    </form>
    <table class="layui-hide" id="tabl1" lay-filter="tabl1"></table>
</div>

<div id="EditDialog" class="layui-form" style="display:none;">
    <div class="x-body">
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名：</label>
                <div class="layui-input-block">
                    <input type="text" name="username" id="username" lay-verify="required|len" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">说明：</label>
                <div class="layui-input-block">
                    <textarea class="layui-textarea" name="remark" id="remark"></textarea>
                </div>
            </div>
            <div class="layui-form-item layui-hide">
                <div class="layui-input-block">
                    <input type="hidden" name="Id" id="EditId" />
                    <button class="layui-btn" lay-submit="" id="save" lay-filter="save">确定</button>
                    <button class="layui-btn" style="display: none" id="save-hide"></button>
                </div>
            </div>
        </form>
    </div>
</div>


<script src="~/Scripts/layui_ext/xm-select/xm-select.js"></script>
<script>
    var selectRow = {};
    var layer;
    var flow;
    layui.use(['table', 'form', 'layer', 'upload', 'laydate', 'flow', 'element'], function () {
        flow = layui.flow;

        var table = layui.table;
        var form = layui.form;
        form.render('select');
        layer = layui.layer;
        var upload = layui.upload;
        var laydate = layui.laydate;
        var element = layui.element;
        laydate.render({ elem: '#newsStartTime' });

        laydate.render({ elem: '#newsEndTime' });

        laydate.render({ elem: '#auditStartTime' });

        laydate.render({ elem: '#auditEndTime' });
        table.render({
            id: 'NewsList',//列表别名ID
            elem: '#tabl1',//表ID
            url: '/CanOpenGif/GetList',
            method: 'POST',
            cols: [[
                { field: 'code', title: '授权码',width:300 }
                , { field: 'username', title: '用户名', width: 120 }
                , { field: 'ctime', title: '时间', width: 180 }
                , { field: 'remark', title: '说明'}
                , { field: 'createor', title: '创建人', width: 120}
                , { field: 'status', title: '状态', templet: "#statusStr", width: 120 }
                , { field: 'usetime', title: '使用时间', width: 180  }
            ]]
            , page: {
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip', 'refresh'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                , groups: 5 //只显示 1 个连续页码
            }
            , where: GetParams("mytoolbar")
        });

        $('#mytoolbar #search').on('click', function (data) {
            table.reload('NewsList', {
                page: { curr: 1 },
                where: GetParams("mytoolbar")
            });
        });
        //监听行单击事件
        table.on('row(tabl1)', function (obj) {
            var data = obj.data;
            //console.log(data);
            //标注选中样式
            obj.tr.addClass('self-table-click').siblings().removeClass('self-table-click');

            selectRow = data;
        });

        var active = {
            add: function () {
                $("#Title").val("");
                $("#Content").val("");
                $("#Remark").val("");
                $("#hasAtt").hide();
                $("#hidAtt").val("");
                layer.open({
                    title: '添加授权',
                    type: 1,
                    content: $('#EditDialog'),
                    area: ['600px', '400px']
                    , btn: ['确定', '取消']
                    , yes: function (index, layero) {
                        $("#save").click();
                    }
                });
            }
        };

        form.on('submit(save)', function (data) {
            //console.log(data.field);
            var url = "/CanOpenGif/Save";
            $.r_post(url, data.field, function (res) {
                if (res.result) {
                    layer.msg('操作成功！', { icon: 1 }, function () {
                        $("#username").val("");
                        $("#remark").val("");
                        layer.closeAll();
                        var refresh = $(".layui-laypage-refresh");
                        if (refresh.length == 0) {
                            $("#search").click();
                        }
                        else {
                            refresh[0].click();
                        }
                    });
                }
                else {
                    layer.msg('错误：' + res.msg, { icon: 2 });
                }
            });
            return false;
        });

        //自定义验证规则
        form.verify({
            len: function (value) {
                if (value.length > 200) {
                    return '字数太多了！';
                }
            }
        });

        $('.layui-btn-group .layui-btn').on('click', function () {
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });

    });

</script>
<script type="text/html" id="statusStr">
    {{# if(d.status == 0){ }}
    <span style="color: green;">未使用</span>
    {{# } else if(d.status == 1) { }}
      已使用
    {{# } }}

</script>