<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>终端版本管理</title>
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/fontawesome/font-awesome.min.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/mulitiCheckbox/fSelect.css">
    <style>
        .form-control {
            height: 22px;
            padding: 1px 5px;
        }

        .btn {
            padding: 1px 6px;
            font-size: 12px;
        }

        .fs-wrap {
            height: 22px;
            line-height: 22px;
            margin-left: 10px;
            width: 80%;
        }

        .fs-dropdown .fs-options {
            max-height: 170px;
        }
    </style>
</head>
<body style="overflow-y: hidden">

<div style="padding: 10px 20px; height: 100%">
    <label class="" style="bottom: 10px;position: relative">类型</label>
    <select class="form-control" multiple="multiple" id="event" name="event">

    </select>
</div>


<footer class="navbar-fixed-bottom">
    <div class="row" style="text-align: center">
        <button style="margin-bottom: 10px" type="button" class="btn btn-primary" id="save">确认</button>
    </div>
</footer>

<script src="${ctx}/js/plugin/jquery/jquery.min.js"></script>
<script src="${ctx}/js/plugin/layui/layer.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap.min.js"></script>
<script src="${ctx}/js/plugin/mulitiCheckbox/fSelect.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script src="${ctx}/jspJS/utils/common.js"></script>
<script>
    var type = getQueryString('type')
    var pertype = getQueryString('pertype')
    var arr = []
    $(function () {
        if (type == 1) {
            //新增
            arr = parent.window.paramContent(pertype)
            initSelect()
        } else {
            var fsdIndex = getQueryString('fsdIndex')
            $.ajax({
                type: "get",
                url: "/pqs9900/flowstrategy/getFun",
                dataType: "json",
                data: {fsdIndex: fsdIndex},
                beforeSend: function () {
                    indexi = ityzl_SHOW_LOAD_LAYER();
                },
                success: function (data) {
                    if (data.code === 200) {
                        arr = data.body
                        initSelect()
                    } else {
                        layer.msg(data.message, {icon: 2, time: 2000})

                    }
                    ityzl_CLOSE_LOAD_LAYER(indexi);
                }
            })
            if(type == 3){
                $('#save').hide()
            }

        }


        $(document).on('click', '.fs-option', function () {
            let list = []
            if ($(this).attr('data-index') == 0) {
                let flag = $(this).hasClass('selected')
                if (flag) {
                    $('#event').find('option').each(function (index, item) {
                        if ($(item).val() != null && $(item).val() != '') {
                            list.push($(item).val())
                        }
                    })
                    //全选
                    $("select[name='event']").val(list);
                } else {
                    list = []
                    $("select[name='event']").val(list);
                }
                //第二步，给fs-optgroup下对应的option添加样式selected
                $(".fs-option").each(function () {
                    if (flag) {
                        if (list.indexOf($(this)['context']['dataset']['value']) != -1) {
                            $(this).addClass("selected");
                        }
                    } else {
                        $(this).removeClass("selected");
                    }
                });
                //第三步，重新加载下拉框，使得添加了selected样式的option处于被勾选状态
                $("select[name='event']").fSelect('reloadDropdownLabel');
            }
        })


        //确认按钮
        $('#save').click(function () {
            //获取选中的值
            let all = $("select[name='event']").val()
            if (all != null && all.length != 0) {
                all.map(function (index, item) {
                    if (item != null && item != '') {
                        return item
                    }
                })
            }
            var arr = all == null ? [] : all
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index); //再执行关闭
            window.parent.bindContent(arr, pertype)
        })
    })

    function initSelect() {
        let indexi;
        $.ajax({
            type: "get",
            url: "/pqs9900/flowstrategy/getDic",
            dataType: "json",
            data: {},
            beforeSend: function () {
                indexi = ityzl_SHOW_LOAD_LAYER();
            },
            success: function (data) {
                if (data.code === 200) {
                    //初始化表格
                    var html = '<option value="" id="chenck_event">全选</option>';
                    let da = data.body
                    if (da.length != 0) {
                        for (var i = 0; i < da.length; i++) {

                            let op = '<option value="' + da[i].dicIndex + '">' + da[i].dicName + '</option>'
                            html += op;
                        }
                        $('#event').empty()
                        $('#event').append(html)
                        $('#event').fSelect();
                        //第一步，先给select标签赋值
                        $("select[name='event']").val(arr);
                        //第二步，给fs-optgroup下对应的option添加样式selected
                        $(".fs-option").each(function () {
                            if (arr.indexOf($(this)['context']['dataset']['value']) != -1) {
                                $(this).addClass("selected");
                            }
                        });
                        //第三步，重新加载下拉框，使得添加了selected样式的option处于被勾选状态
                        $("select[name='event']").fSelect('reloadDropdownLabel');
                    }

                } else {
                    layer.msg(data.message, {icon: 2, time: 2000})

                }
                ityzl_CLOSE_LOAD_LAYER(indexi);
            }
        })
    }
</script>
</body>
</html>
