<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="renderer" content="webkit">
    <!-- 移动设备 viewport -->
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <jsp:include page="../../common.jsp"/>
    <link rel="stylesheet" type="text/css" href="${ctx}/page/umeditor/themes/default/css/umeditor.css">
    <script type="text/javascript" src="${ctx}/page/umeditor/third-party/template.min.js"></script>
    <script type="text/javascript" src="${ctx}/page/umeditor/umeditor.config.js"></script>
    <script type="text/javascript" src="${ctx}/page/umeditor/umeditor.min.js"></script>
    <script type="text/javascript" src="${ctx}/page/umeditor/lang/zh-cn/zh-cn.js"></script>
    <script type="text/javascript">
        require("notice/noticeDetails.js");
    </script>
    <style>
        .layui-form-select dl {
            z-index: 9999;
        }
    </style>
    <title>编辑</title>
</head>
<body class="lgraybg">
<form class="layui-form" action="" style="width: 90%; margin-top: 20px">

    <input name="aliass" id="aliass" value="${userData.alias}" class="layui-input" type="hidden">
    <input name="userIds" id="userIds" value="${userData.userIds}" class="layui-input" type="hidden">
    <input name="parentIds" id="parentIds" value="${userData.parentIds}" class="layui-input" type="hidden">
    <input name="id" value="${notice.id}" class="layui-input" type="hidden">

    <div class="layui-form-item">
        <label class="layui-form-label">通知类型</label>
        <div class="layui-input-block">
            <input type="radio" name="type" lay-filter="typeRadio" value="1" title="指定用户" checked>
            <input type="radio" name="type" lay-filter="typeRadio" value="2" title="所有用户">
        </div>
    </div>

    <div class="layui-form-item userInfo">
        <div class="layui-inline">
            <label class="layui-form-label">用户ID</label>
            <div class="layui-input-inline" style="width: 26.5rem;margin-right: 0px;">
                <input type="text" name="userId" value="${notice.userId}"  autocomplete="off"
                       placeholder="用户ID或通道ID多个用,分隔" class="layui-input" required>
            </div>
        </div>
        <div class="layui-inline" style="margin-bottom:0px;margin-right:0px;margin-top: -5px;">
            <button type="button" style="height: 35px;line-height: 35px;" class="layui-btn btn1">查询用户名称</button>
        </div>
    </div>

    <div class="layui-form-item userInfo">
        <label class="layui-form-label">用户名称</label>
        <div class="layui-input-block">
            <input type="text" name="userName" value="${notice.userName}" autocomplete="off" class="layui-input layui-disabled"
                   disabled>
        </div>
    </div>
    <div class="layui-form-item userInfo">
        <label class="layui-form-label">上级名称</label>
        <div class="layui-input-block">
            <input type="text" name="parentName" value="${parentName}" autocomplete="off" class="layui-input layui-disabled"
                   disabled>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">模板类型</label>
        <div class="layui-input-block">
            <select name="typeSecond" lay-filter="typeSecond" lay-verify="required">
                <option value="">请选择</option>
                <c:forEach items="${templateTypeList}" var="list">
                    <option value="${list.value}" ${notice.typeSecond == list.value ? "selected" : ""}>${list.name}</option>
                </c:forEach>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">通知标题</label>
        <div class="layui-input-block">
            <input type="text" value="${notice.title}" name="title" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">通知简介</label>
        <div class="layui-input-block">
            <textarea name="desc" class="layui-textarea">${notice.desc}</textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">通知链接</label>
        <div class="layui-input-block">
            <input type="text" placeholder="若有通知链接，无需填写通知内容" value="${notice.url}" name="url"
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">通知内容</label>
        <div class="layui-input-block">
            <textarea name="conrtent" id="conrtent" placeholder="请输入内容"
                      class="layui-textarea">${notice.conrtent}</textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">是否推送</label>
        <div class="layui-input-block">
            <input type="radio" name="pushFlag" value="0" title="不发送" checked>
            <input type="radio" name="pushFlag" value="1" title="发送">
            <input type="radio" name="pushFlag" value="2" title="发送并发送到上级">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">定时任务</label>
        <div class="layui-input-block">
            <input type="radio" name="scheduleFlag" value="0" title="立即执行(仅一次)" checked>
            <input type="radio" name="scheduleFlag" value="1" title="次日执行(仅一次)">
            <input type="radio" name="scheduleFlag" value="2" title="每天执行">
            <input type="radio" name="scheduleFlag" value="3" title="每周执行">
            <input type="radio" name="scheduleFlag" value="4" title="每月执行">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="button" id="close" class="layui-btn layui-btn-primary">关闭</button>
        </div>
    </div>
</form>
</body>
<script>
    var layer;
    var form;
    var element;

    var alias;

    //Demo
    layui.use(['form', 'layer', 'element', 'upload'], function () {
        form = layui.form;
        layer = layui.layer;
        element = layui.element;

        var um = UM.getEditor('conrtent');
        um.setWidth("100%");

        var layerIndex = parent.layer.getFrameIndex(window.name);

        $('#close').click(function () {
            parent.layer.closeAll();
        });

        form.on('radio(typeRadio)', function (data) {
            var item = $('select[name="typeSecond"]')
            if (data.value == 2) {
                $('.userInfo').hide()
                $('input[name="userName"]').val("");
                $('input[name="userId"]').val("-1");
                $('input[name="title"]').val("系统通知");
                $('textarea[name="desc"]').val(null);
                alias = null;
                item.val(null);
                item.attr("disabled", true);
                item.removeAttr("lay-verify");
            } else {
                $('.userInfo').show()
                $('input[name="userName"]').val("")
                $('input[name="userId"]').val("")
                item.removeAttr("disabled");
                item.removeAttr("lay-verify", "required");
            }

            form.render('select');
        })

        function setTemplateContent($val){
            let title = $("[name='typeSecond']").find("option:selected").text();
            let templateStr = '${templateList}'.replace(/\n/g,"\\n");
            console.log(templateStr)
            let $obj = JSON.parse(templateStr);

            let $tmp = null;
            if(!$obj){
                $('input[name = "title"]').val("");
                $('textarea[name = "desc"]').val("");
                layer.msg("暂无可用模板,请在自定义模板中添加!",{icon:2});return;
            }
            if(title){
                $('input[name = "title"]').val(title+"通知");
            }

            for (let i = 0; i < $obj.length; i++){
                if($val == $obj[i].type){
                    $tmp = $obj[i];
                    break;
                }else{
                    $tmp = null;
                }
            }
            console.log($obj);
            if(!$tmp){
                $('input[name = "title"]').val("");
                $('textarea[name = "desc"]').val("");
                layer.msg("暂无可用模板,请在自定义模板中添加!",{icon:2});return;
            }
            console.log($tmp.content);
            $('textarea[name = "desc"]').val($tmp.content);
        }

        form.on('select(typeSecond)', function(data) {
            if (alias != null) {
                let title = $(data.elem).find("option:selected").text()+"通知";
                $('input[name = "title"]').val(title);
                let $val = data.value;
                setTemplateContent($val);
            }
        })

        //监听提交
        form.on('submit(formDemo)', function (data) {
            var index = layer.load(1, {shade: [0.1, '#000']});
            var params = data.field;
            params.conrtent = um.getContent();
            $.ajax({
                url: ctx + '/notice/sendTempNotice',
                type: 'post',
                data: JSON.stringify(params),
                dataType: 'json',
                contentType: "application/json",
                success: function (res) {
                    layer.close(index);
                    if (res.code == 200) {
                        parent.layer.msg(res.message);
                        parent.layer.closeAll();
                        parent.table.reload('idTest', {//testReload是组件名称,表格名
                            page: {//page参数是指重新刷新后从第几页开始
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                    } else {
                        layer.msg(res.message, {
                            icon: 5
                        });
                    }
                },
                error: function (res) {
                    layer.close(index);
                    layer.msg("操作失败", {
                        icon: 5
                    });
                }
            })
            return false;
        });

        $('.btn1').click(function () {
            var index = layer.load(1, {shade: [0.1, '#000']});
            if(!$('input[name="userId"]').val()){
                layer.msg("请输入用户ID或通道方ID",{icon:7});
                return;
            }
            $.ajax({
                url: ctx + '/userApp/getByUId/' + $('input[name="userId"]').val(),
                type: 'GET',
                dataType: 'json',
                success: function (res) {
                    layer.close(index);
                    if (res.code == 200) {
                        // if(res.data.alias){
                        //     layer.msg("请输入正确的用户ID或通道ID", { icon: 2});
                        //     return;
                        // }
                        alias = res.data.fastName;
                        $('input[name="userName"]').val(res.data.userName);
                        $('input[name="parentName"]').val(res.data.parentName);
                        $('#aliass').val(res.data.alias);
                        $('#userIds').val(res.data.userIds);
                        $('#parentIds').val(res.data.parentIds);
                        if($('select[name="typeSecond"]').val()){
                            setTemplateContent($('select[name="typeSecond"]').val());
                        }
                    } else {
                        layer.msg(res.message, {
                            icon: 2
                        });
                    }
                },
                error: function (res) {
                    layer.msg("查询失败", {
                        icon: 2
                    });
                }
            })
        })
    });
</script>
</html>

