@{
    ViewBag.Title = "EditCustomAlertsConfig";
    Layout = "~/Views/Shared/_CloudMonitor.cshtml";
}
<form class="layui-form" id="ff" action="" lay-filter="ff">
    <input type="text" name="ID" style="display:none;" value="" placeholder="" autocomplete="off" class="layui-input">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">渠道</label>
            <div class="layui-input-inline">
                <select name="渠道ID" lay-search="" lay-verify="required" id="渠道" lay-filter="渠道">
                    <option value=""></option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">项目</label>
            <div class="layui-input-inline">
                <select name="项目ID" lay-search="" lay-verify="required" id="项目" lay-filter="项目">
                    <option value=""></option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">预警名称</label>
            <div class="layui-input-inline">
                <input type="text" name="服务名称" lay-verify="required" value="" placeholder="" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">频率：间隔</label>
            <div class="layui-input-inline layui-input-wrap">
                <input type="number" name="频率" lay-verify="required" value="" placeholder="" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-text-em">分执行</div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" title="API配置URL">API配置URL</label>
        <div class="layui-input-block">
            <textarea name="配置" lay-verify="required" placeholder="http://192.168.XX.XX:XXXX/XXX(Get服务)" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" title="API配置URL">API返回格式(JSON)</label>
        <div class="layui-input-block">
            <textarea lay-verify="required" disabled class="layui-textarea">{"预警类型":"0|1|2(正常|橙色|红色)","预警值":"字符串不可为空"}</textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">启用</label>
        <div class="layui-input-block">
            <input type="checkbox" name="是否启用" lay-skin="switch" lay-filter="switchTest" title="ON|OFF">
        </div>
    </div>
</form>
<script src="~/ViewModels/APIAlertsConfigIndex.js?r=@DateTime.Now.ToLongTimeString()"></script>
<script src="~/ViewModels/getPingyin.js"></script>
<style>
    label.layui-form-label {
        width: 100px; /* 容器宽度 */
        text-align: left;
        /*overflow: hidden;*/ /* 超出隐藏 */
        /*white-space: nowrap;*/ /* 不换行 */
        /*text-overflow: ellipsis;*/ /* 使用省略号(...)表示被隐藏的文本 */
    }

</style>
<script type="text/javascript">
    $(function () {
        let form = layui.form;

        function 加载渠道() {
            ZLPMS.BindLayUiSelect({
                "url": "/ProManager/Datagrid",
                "method": "Get",
                "key": "ID",
                "text": "名称",
                "dom": $("#渠道"),
                "form":form
            });
        }

        function 加载项目(渠道ID) {
            if(渠道ID=="") return;
            ZLPMS.BindLayUiSelect({
                "url": `/ProManager/BingProData?ChannelID=${渠道ID}&Search=`,
                "method": "Get",
                "key": "ID",
                "text": "名称",
                "dom": $("#项目"),
                "form": form
            });
        }

        // 渠道改变事件
        form.on('select(渠道)', function (data) {
            var elem = data.elem; // 获得 select 原始 DOM 对象
            var value = data.value; // 获得被选中的值
            var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象
            if (value != "") {
                加载项目(value);
            }
        });

        window.加载下拉选项 = function () {
            加载渠道();
        }

        window.加载数据 = function (data) {
            加载渠道();
            加载项目(data["渠道ID"]);
            form.val('ff',data );
        }

    })
</script>