@using YTSoft.BaseCallCenter.MVCWeb.Models;
@using YTSoft.BaseCallCenter.Model;
<link href="/Content/layui/css/layui.css" rel="stylesheet" />
<script src="/Content/js/jquery-other.min.js"></script>
<script src="/Content/layui/layui.js"></script>
<script src="~/Content/js/ytsoft.http.js"></script>
<link href="/Content/css/workflow/workflow.css" rel="stylesheet" />
<style>
    .autodesc {
        display: none;
        position: relative;
        width: 530px;
    }

    .autodescItem {
        display: flex;
        height: 32px;
        line-height: 32px;
        margin-top: 15px;
    }

    .autodescItem input {
        margin: 0 15px;
    }

    .autodesc .btnIcon {
        position: absolute;
        bottom: 2px;
        right: 0px;
    }

    .layui-unselect layui-form-select {
        width: 100px !important;
    }

    .layui-btn-sm {
        padding: 0 5px;
        font-size: 24px;
    }
</style>
<form class="layui-form">


    <div>
        <div class="rightSide">
            <input name="F_Id" value="@Model.F_Id" type="hidden" class="layui-input" />
            <div>
                @* <div class="divTittle"> 编辑标签</div> *@
                <ul>
                    <li class="layui-row">

                        <div class="layui-col-md12">
                            <label class="layui-form-label" style="width:100px">标签名称</label>
                            <div class="layui-input-block">
                                <input name="F_LabelName" value="" lay-verify="required" autocomplete="off"
                                    placeholder="" class="layui-input" type="text" style="width:220px" />
                            </div>
                        </div>

                    </li>
                    <li class="layui-row">
                        <div class="layui-col-xs12">
                            <label class="layui-form-label" style="width:100px">备注</label>
                            <div class="layui-input-block">
                                <input name="F_Note" value="" autocomplete="off" placeholder="" class="layui-input"
                                    type="text" style="width:220px" />
                            </div>
                        </div>

                    </li>
                    <li class="layui-row">
                        <div class="layui-col-xs12">
                            <label class="layui-form-label">等级</label>
                            <div class="layui-input-block sexParam">
                                <input type="radio" name="F_Level" value="一级" title="一级" lay-filter="F_Level" />
                                <input type="radio" name="F_Level" value="二级" title="二级" lay-filter="F_Level" />
                                <input type="radio" name="F_Level" value="三级" title="三级" lay-filter="F_Level" />
                                <input type="radio" name="F_Level" value="自动" title="自动" lay-filter="F_Level" />
                                <div class="autodesc"></div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

            <div>
                <ul>
                    <li class="layui-row">
                        <div class="layui-col-md12 btndiv">
                            <button class="layui-btn" lay-submit="" lay-filter="SubmitData">保存</button>
                        </div>
                    </li>
                </ul>
            </div>


        </div>
    </div>
</form>

<script src="~/Content/js/sysmanage/riskleveledit.js"></script>
<script>
    var riskId = helper.request.queryString("riskId");
    var autoDescData = []
    $(document).ready(function () {
        if (riskId > 0) {
            getRiskDatail(riskId)
        }
    @* $('input[type=radio][name=F_Level]').change(function () {
            console.log(this.value)
            }); *@

    })
    function addItem(data) {
        $(data).parent().prev().after('<div class="autodescItem">' +
            '<input type="number"  class="time" style="width:60px" />' +
            '<span>分钟达到</span>' +
            '<input type="number"  class="piece" style="width:60px" />' +
            '<span>件，为</span>' +
            '<div style="width: 120px;" lay-filter="group">' +
            '<select class="childGrade">' +
            '<option value="一级">一级</option>' +
            '<option value="二级">二级</option>' +
            '<option value="三级">三级</option>' +
            '</select>' +
            '</div></div>')
        layui.use(['form'], function () {
            layui.form.render('select')
        })
    }
    function minusItem(data) {
        if ($(".autodescItem").length > 1) {
            $(data).parent().prev().remove()
            layui.use(['form'], function () {
                layui.form.render('select')
            })
        }
    }
    function getRiskDatail(riskId) {
        $.ajax({
            url: "/SystemManage/GetRiskLevelDataById?riskId=" + riskId,
            type: "get",
            async: false,//同步请求
            contentType: "application/json",
            dataType: "text",
            cache: false,
            success: function (thisResult) {
                if (eval('(' + thisResult + ')').msg == "成功") {
                    var data = eval('(' + thisResult + ')')
                    $("input[name='F_LabelName']").val(data.data.F_LabelName)
                    $("input[name='F_Note']").val(data.data.F_Note)
                    $("input:radio[name=F_Level][value=" + data.data.F_Level + "]").attr('checked', 'true');
                    layui.use(['form'], function () {
                        layui.form.render('radio')
                    })
                    if (data.data.F_Level === "自动") {
                        autoDescData = JSON.parse(data.data.F_AutoDesc)
                        var autodescHtml = '';
                        autoDescData.forEach(element => {
                            autodescHtml += '<div class="autodescItem">' +
                                '<input type="number" value="' + element.minutes + '" class="time" style="width:60px" />' +
                                '<span>分钟到达</span>' +
                                '<input type="number"  value="' + element.total + '"   class="piece" style="width:60px" />' +
                                '<span>件，为</span>' +
                                '<div style="width: 120px;" lay-filter="group">' +
                                '<select class="childGrade">'
                            if (element.level === '一级') {
                                autodescHtml += '<option value="一级" selected>一级</option>'
                            } else {
                                autodescHtml += '<option value="一级">一级</option>'
                            }
                            if (element.level === '二级') {
                                autodescHtml += '<option value="二级" selected>二级</option>'
                            } else {
                                autodescHtml += '<option value="二级">二级</option>'
                            }
                            if (element.level === '三级') {
                                autodescHtml += '<option value="三级" selected>三级</option>'
                            } else {
                                autodescHtml += '<option value="三级">三级</option>'
                            }
                            autodescHtml += '</select>' +
                                '</div></div>';
                        });
                        autodescHtml += '<div class="btnIcon">' +
                            '<button type="button" class="layui-btn layui-btn-primary layui-btn-sm"  onclick="addItem(this)">＋</button>' +
                            '<button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="minusItem(this)">－</button>' +
                            '</div>'
                        autodescHtml += '</div>'
                        $(autodescHtml).appendTo($(".autodesc"))
                        layui.use(['form'], function () {
                            layui.form.render('select')
                        })
                        $(".autodesc").show()
                    }
                } else {
                    alert("获取失败")
                }
            },
            error: function (error) {
                return false;
            }
        });
    }

</script>