@{
    ViewBag.Title = "Index";
    //Layout = "~/Views/Shared/_Layout.cshtml";
    //Layout = "~/Views/Shared/_content.cshtml";
    Layout = null;
}

@*<link href="/layui-v2.5.4/css/layui.css" rel="stylesheet" />*@
@*<script src="/Scripts/jquery-1.10.2.min.js"></script>*@
<link href="/layui-v2.5.4/css/workbench.css" rel="stylesheet" />
<link href="/layui-v2.5.4/css/common.css" rel="stylesheet" />
<script src="/layui-v2.5.4/layui.js"></script>
<script src="/Scripts/common.js"></script>
<script src="/Scripts/newCommon.js"></script>
<script src="/Scripts/jquery.ajax.extend.js"></script>
<script src="/Scripts/layui_ext/xm-select/xm-select.js?v=1"></script>

<style>
    #elements-container {
        text-align: center;
    }

    .draggable-element {
        display: inline-block;
        width: 200px;
        height: 200px;
        background: white;
        border: 1px solid rgb(196, 196, 196);
        line-height: 200px;
        text-align: center;
        margin: 10px;
        color: rgb(51, 51, 51);
        font-size: 30px;
        cursor: move;
    }

    .table-title {
        width: 350px;
        margin: 10px auto;
    }

        .table-title span {
            margin-right: 10px;
        }

    .drag-list {
        width: 350px;
        margin: 0 auto;
    }

        .drag-list #fixed-left > li,
        .drag-list #fixed-right > li,
        .drag-list #list > li {
            list-style: none;
            background: rgb(255, 255, 255);
            border: 1px solid rgb(196, 196, 196);
            margin: 5px 0;
            font-size: 14px;
            display: flex;
        }

        .drag-list #fixed-left .title,
        .drag-list #fixed-right .title,
        .drag-list #list .title {
            display: inline-block;
            width: 100%;
            padding: 2px;
            vertical-align: top;
        }

        .drag-list #fixed-left .drag-area,
        .drag-list #fixed-right .drag-area,
        .drag-list #list .drag-area {
            display: inline-block;
            background: rgb(158, 211, 179);
            background-image: url('../../image/u167.svg');
            background-size: 60%;
            width: 31px;
            background-repeat: no-repeat;
            background-position: center;
            /*height: 24px;*/
            vertical-align: top;
            cursor: move;
        }

    .fixed-right {
        transform: rotate(325deg) !important;
    }

    .drag-fixed-right {
        background-image: url('../../image/u168.svg');
        background-size: 60%;
        width: 30px;
        background-repeat: no-repeat;
        background-position: center;
        height: 24px;
        vertical-align: top;
        cursor: pointer;
    }

    .fixed-left {
        transform: rotate(325deg) !important;
    }

    .layui-icon {
        margin: 3px 5px;
    }

    .drag-fixed-left {
        background-image: url('../../image/u168.svg');
        background-size: 60%;
        width: 30px;
        background-repeat: no-repeat;
        background-position: center;
        height: 24px;
        vertical-align: top;
        transform: rotate(280deg);
        cursor: pointer;
    }

    .drag-list #fixed-left .drag-area .img,
    .drag-list #fixed-right .drag-area .img,
    .drag-list #list .drag-area .img {
        width: 20px;
        padding: 5px;
    }

    .code {
        background: rgb(255, 255, 255);
        border: 1px solid rgb(196, 196, 196);
        width: 600px;
        margin: 22px auto;
        position: relative;
    }

        .code::before {
            content: 'Code';
            background: rgb(80, 80, 80);
            width: 96%;
            position: absolute;
            padding: 8px 2%;
            color: rgb(255, 255, 255);
        }

        .code pre {
            margin-top: 50px;
            padding: 0 13px;
            font-size: 1em;
        }

    .table-title {
        display: flex;
    }

        .table-title span {
            font-weight: bold;
        }

    #settingListBut {
        margin-left: 10px;
        margin-top: 5px;
    }

    #SettingListDialog {
        font-family: arial;
        background: rgb(242, 244, 246);
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

     #SettingListDialog .layui-icon {
        margin: -5px 5px;
    }
</style>
<button class="layui-btn layui-btn-sm" id="settingListBut" type="button">设置列</button>
<div id="SettingListDialog" class="layui-form" style="display:none;">
    <section class="showcase showcase-2">
        <div class="table-title"><span>展示列设置</span><a onclick="reset()">重置</a></div>
        <ul class="drag-list" id="ul">
            <html4s>固定到左侧</html4s>
            <div id="fixed-left">
            </div>
            <html4s>固定到右侧</html4s>
            <div id="fixed-right">
            </div>
            <hr size="10" />
            <div id="list">
            </div>
        </ul>
    </section>
</div>
<script src="/Scripts/drag-arrange.js?v=1"></script>

<script type="text/javascript">
    var data = [];
    const ul = document.getElementById('ul');
    var module = '@Html.Raw(ViewBag.Module)';
    var eid = @Html.Raw(ViewBag.Eid);
    var form;
    var layer;
    var settingDialog;
    $(function () {

    });
    layui.use(['table', 'form', 'layer', 'upload', 'laydate', 'flow', 'element'], function () {
        form = layui.form,
            layer = layui.layer;
        $('#settingListBut').on('click', function (data) {
            getData();
        });
        $(".drag-arrange-1").on('mouseup', function () {
            init();
        });
        $("#ul").on('drag.end.arrangeable', function () {
            liSort();
        })
        form.on('checkbox(itemCheckbox)', function (value) {
            var id = value.elem.getAttribute("name");
            for (index = 0; index < data.length; index++) {
                var item = data[index];
                if (item.Id == id) {
                    item.Checkbox = value.elem.checked;
                }
            }
        });

        //  $.ajax({
        //    type: "GET",
        //    url: '/Control/GetSettingList?module=' + module + '&eid=' + eid,
        //    dataType: "json",
        //    contentType: "application/json",
        //    success: function (da) {
        //        if (da.result) {
        //            data = da.data;
        //            console.log("data111:" + data);
        //            init();
        //            settingDialog = layer.open({
        //                title: '设置列',
        //                type: 1,
        //                content: $('#SettingListDialog'),
        //                area: ['400px', '600px']
        //                , btn: ['确定', '取消']
        //                , yes: function (index, layero) {
        //                    save();
        //                }
        //            });
        //        } else {
        //            layer.msg(da.message, { icon: 2 });
        //        }
        //    },
        //    error: function () {
        //        layer.msg('操作失败！', { icon: 2 });
        //    }
        //});
    });

    function buildLis(data) {
        return data.map((item, index) => {
            var checkbox = item.Checkbox ? `checked="checked"` : "";
            var name = item.Id;
            var leftFixed = item.Fixed == "left" ? "fixed-left" : "";
            var rightFixed = item.Fixed == "right" ? "fixed-right" : "";
            var fixed = Boolean(item.Fixed);
            return `<li name="${name}">
                    <input type="checkbox" ${checkbox} lay-skin="primary" name="${name}" lay-filter="itemCheckbox" />
                    <span class="title">${item.Title}</span>
                    <div class="drag-fixed-left ${leftFixed}" fixed="${fixed}" onclick="fixedLeft(this, ${item.Id})"></div>
                    <div class="drag-fixed-right ${rightFixed}" fixed="${fixed}" onclick="fixedRight(this, ${item.Id})"></div>
                    <div class="drag-area"></div>
                </li>`;
        });
    }

    function fixedLeft(obj, id) {
        var fixed = $(obj).attr("fixed");

        for (index = 0; index < data.length; index++) {
            var item = data[index];
            if (item.Id == id) {
                if (fixed == 'true') {
                    item.Fixed = "";
                } else {
                    item.Fixed = "left";
                }
            }
        }
        if (fixed === 'true') {
            $(obj).attr("class", "drag-fixed-left");
            $(obj).attr("fixed", 'false');
        } else {
            $(obj).attr("class", "drag-fixed-left fixed-left");
            $(obj).attr("fixed", 'true');
        }
        init();
    }

    function fixedRight(obj, id) {
        var fixed = $(obj).attr("fixed");

        for (index = 0; index < data.length; index++) {
            var item = data[index];
            if (item.Id == id) {
                if (fixed == 'true') {
                    item.Fixed = "";
                } else {
                    item.Fixed = "right";
                }
            }
        }
        if (fixed === 'true') {
            $(obj).attr("class", "drag-fixed-right");
            $(obj).attr("fixed", 'false');
        } else {
            $(obj).attr("class", "drag-fixed-right fixed-right");
            $(obj).attr("fixed", 'true');
        }
        init();
    }

    function init() {
        var fixedLeft = document.getElementById("fixed-left");
        var fixedRight = document.getElementById("fixed-right");
        var list = document.getElementById("list");
        liSort();
        fixedLeft.innerHTML = buildLis(data.filter(x => x.Fixed == "left")).join('');
        fixedRight.innerHTML = buildLis(data.filter(x => x.Fixed == "right")).join('');
        list.innerHTML = buildLis(data.filter(x => x.Fixed != "left" && x.Fixed != "right")).join('');
        form.render('checkbox');
        $('li').arrangeable({ dragSelector: '.drag-area' });
    }

    function liSort() {
        //var lis = document.getElementsByTagName("li");
        var lis = document.getElementById("ul").getElementsByTagName("li");
        console.log("lis:" + lis.length);

        var i = 0;
        for (i = 0; i < lis.length; i++) {
            var elem = lis[i]
            var id = elem.getAttribute("name");
            var item = data.find(x => x.Id == id);
            item.Order = i;
        }
        data.sort(dataSort);
        console.log(data);
    }

    function dataSort(a, b) {
        if (a.Order < b.Order) {
            return -1;
        }
        if (a.Order > b.Order) {
            return 1;
        }
        return 0;
    }

    function save() {
        $.ajax({
            type: "POST",
            url: '/Control/SettingSave?module=' + module + '&eid=' + eid,
            data: JSON.stringify(data),
            dataType: "json",
            contentType: "application/json",
            success: function (da) {
                if (da.result) {
                    console.log("set:" + da.result);
                    //parent.layer.msg('操作成功！', { icon: 1 });
                    layer.close(settingDialog);
                    location.reload();
                } else {
                    layer.msg(da.message, { icon: 2 });
                }
            },
            error: function () {
                layer.msg('操作失败！', { icon: 2 });
            }
        });
    }

    function getData() {
        $.ajax({
            type: "GET",
            url: '/Control/GetSettingList?module=' + module + '&eid=' + eid,
            dataType: "json",
            contentType: "application/json",
            success: function (da) {
                if (da.result) {
                    data = da.data;
                    console.log("data111:" + data);
                    init();
                    settingDialog = layer.open({
                        title: '设置列',
                        type: 1,
                        content: $('#SettingListDialog'),
                        area: ['400px', '600px']
                        , btn: ['确定', '取消']
                        , yes: function (index, layero) {
                            save();
                        }
                    });
                } else {
                    layer.msg(da.message, { icon: 2 });
                }
            },
            error: function () {
                layer.msg('操作失败！', { icon: 2 });
            }
        });
    }

    function reset() {
        $.ajax({
            type: "GET",
            url: '/Control/ResetSettingList?module=' + module + '&eid=' + eid,
            dataType: "json",
            contentType: "application/json",
            success: function (da) {
                if (da.result) {
                    layer.close(settingDialog);
                    location.reload();
                } else {
                    layer.msg(da.message, { icon: 2 });
                }
            },
            error: function () {
                layer.msg('操作失败！', { icon: 2 });
            }
        });
    }
</script>